xxxxxxxxxx
import React from 'react';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
import { Line } from 'react-chartjs-2';
import faker from 'faker';
ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
export const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Chart.js Line Chart',
},
},
};
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
export const data = {
labels,
datasets: [
{
label: 'Dataset 1',
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
},
{
label: 'Dataset 2',
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
],
};
export function App() {
return <Line options={options} data={data} />;
}
xxxxxxxxxx
/* App.js */
import React, { Component } from 'react';
import CanvasJSReact from './canvasjs.react';
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
class App extends Component {
render() {
const options = {
animationEnabled: true,
title:{
text: "Monthly Sales - 2017"
},
axisX: {
valueFormatString: "MMM"
},
axisY: {
title: "Sales (in USD)",
prefix: "$"
},
data: [{
yValueFormatString: "$#,###",
xValueFormatString: "MMMM",
type: "spline",
dataPoints: [
{ x: new Date(2017, 0), y: 25060 },
{ x: new Date(2017, 1), y: 27980 },
{ x: new Date(2017, 2), y: 42800 },
{ x: new Date(2017, 3), y: 32400 },
{ x: new Date(2017, 4), y: 35260 },
{ x: new Date(2017, 5), y: 33900 },
{ x: new Date(2017, 6), y: 40000 },
{ x: new Date(2017, 7), y: 52500 },
{ x: new Date(2017, 8), y: 32300 },
{ x: new Date(2017, 9), y: 42000 },
{ x: new Date(2017, 10), y: 37160 },
{ x: new Date(2017, 11), y: 38400 }
]
}]
}
return (
<div>
<CanvasJSChart options = {options}
/* onRef={ref => this.chart = ref} */
/>
{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
</div>
);
}
}
module.exports = App;