chart.js demo med React-komponent

Demo.jsx

import { Pie, Bar, Line } from 'react-chartjs-2';
import { data1, data2 } from './demoData'


const DemoChart = () => (
	<div className="demo-chart">
		<Bar data={data1} />
		<Bar data={data2} />
	</div>
)

export default DemoChart

demoData.js

// Alternativ 1: använd objektformen
// Observera att objektet måste ha egenskaperna x och y
const daysInMonth = [
	{ month: 'januari', days: 31 },
	{ month: 'februari', days: 28 },
	{ month: 'mars', days: 31 },
	{ month: 'april', days: 30 },
	{ month: 'maj', days: 31 },
].map(({ month, days }) => ({ x: month, y: days }))
const data1 = {
	datasets: [{
		label: 'Månader',
		data: daysInMonth
	}]
}

// Alternativ 2: separata listor för varje serie
const monthNameSeries = ['januari', 'februari', 'mars', 'april', 'maj']  // x
const dayAmountSeries = [31, 28, 31, 30, 31]
const data2 = {
	labels: monthNameSeries,
	datasets: [{
		label: 'Månader',
		data: dayAmountSeries
	}]
}

export { data1, data2 }