I am using react-chartjs, and now I am having a problem that my chart is not rendered with no error at all in my console.
Previously, when I installed the react-chartjs and the chartjs there was always error Unmet peer dependency: [email protected]
. Although I am not sure if that is related.
Here is my presentation component:
import React, { PropTypes } from 'react';
import Chart from 'chart.js';
import { Line as LineChart } from 'react-chartjs';
const StatsGraph = (props) =>
<div>
<LineChart data={props.helpsPosted} redraw width="600" height="250" />
</div>;
StatsGraph.propTypes = {
helpsPosted: PropTypes.object.isRequired,
};
export default StatsGraph;
and here is my helpsPosted
props:
const helpsPosted = {
chartData: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
datasets: [
{
label: "Helps posted",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, 40, 0, 21, 10, 0],
spanGaps: false,
},
],
},
};
Any help would be appreciated. Thanks!