Chartjs: Chart is not displayed

540 views Asked by At

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!

0

There are 0 answers