Anyone know the modules I need to import to get ChartJS to work with React?

help
1

Trying to use ChartJS with React, but I for the life of me, I don’t know how to import the modules required for it to work.

Right now, my ChartJS setup can’t find the Id in the canvas tag and I’m pretty sure it’s because I’m not importing something correctly.

2

Hey @sproleee, here is one usage example:

import React, { Component } from 'react';
import Chart from 'chart.js';
Chart.defaults.global.responsive = true;
import Line from 'react-chartjs/lib/line';

class LineChart extends Component {

    render() {
      const chartData = {
        labels: [],
        datasets: []
      };

      return (
        <div>
          <Line data={chartData}/>
        </div>
      );
    }

}

export default LineChart;
2 Likes
3

I assume I need the react-chartjs package for this.

Do you have an example of just using ChartJS and React by itself or is that not possible?

4

you mean you want to use the non-react version with react? The reason for a react specific version is probably because the normal version may fight with react over DOM manipulation.

5

Yeah, I was thinking about using the non-React version with React only because the react-chartjs package is outdated and doesn’t have support for ChartJS 2.0 (latest version).

6

I see. I’m going to have the same problem then. We’re using ChartJS in a blaze project, but we’re building a new React app and it will need charts too. I’ll probably just look around for some React chart components. haven’t researched it yet, but there must be come charting components already made for react out there!

7

I gave up on ChartJS and use Highcharts.

Highcharts works perfectly and smooth with React. I don’t know why ChartJS is giving me so much trouble. I’m too lazy to look at the issue at the moment.