Using Charts.js with react

Question

I am using React and want to tie it in with Chart.js.

The graph below works, but I am not sure how to make a Graph component in React.

My Chart.js code looks like the following:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
        label: '# of Likes',
        data: [12, 19, 3],
        backgroundColor: [
           'rgba(255, 99, 132, 0.2)',
           'rgba(54, 162, 235, 0.2)',
           'rgba(255, 206, 86, 0.2)'
        ] 
     }]
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

I then tried to incorporate this into React. Unfortunately, this didn't work.

My code attempt can be seen here.This is kind of working, but not really, and I have no idea what approach to take.

var Graph = React.createClass({

    render: function() {
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
           type: 'bar',
           data: {
           labels: ["Red", "Blue", "Yellow"],
           datasets: [{
               label: '# of Likes',
               data: [12, 19, 3],
               backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)'
               ] 
            }]
          }
       });
    }
})

Reyansh Mishra · Accepted Answer · 2018-07-30 07:08:38Z

31

I have been using react-charjs and react-chart-js2 and it seems they have their own limitation if you want more control you can directly use Chartjs in you component.

import React from "react";
var Chart = require("chart.js");

class Layout extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const node = this.node;

    var myChart = new Chart(node, {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow"],
        datasets: [
          {
            label: "# of Likes",
            data: [12, 19, 3],
            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)"
            ]
          }
        ]
      }
    });
  }

  render() {
    return (
      <div>
        <canvas
          style={{ width: 800, height: 300 }}
          ref={node => (this.node = node)}
        />
      </div>
    );
  }
}

export default Layout;

answered Jul 30, 2018 at 7:08

Reyansh Mishra

1,9241 gold badge16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ging3r Over a year ago

you lost 'this.node = React.createRef();' in the constructor

Phil Over a year ago

@Ging3r it is not required to declare that in the constructor. He is assigning this.node in-line inside of the ref function which defines it for the entire context of the class component. His code will still work as is.

Roby Cigar Over a year ago

hi, how can i do this with function component?

Mchl · Accepted Answer · 2016-11-18 18:23:35Z

2

There is a React wrapper around ChartJS available from ReactJS organisation on GitHub. It does support bar charts. Maybe try this (if not as a solution, then as a source of inspiration)

answered Nov 18, 2016 at 18:23

Mchl

62.4k9 gold badges121 silver badges121 bronze badges

2 Comments

prayagupadhyay Over a year ago

Note: the react-chartjs library mentioned in this answer has been archived

anshul Over a year ago

Not the expected answer

Dinesh Nadimpalli · Accepted Answer · 2019-11-15 14:06:18Z

1

I have been using react-chartjs-2 for quite some time with all my react projects. It is also a wrapper around chartjs library so you can access all the functionalities as mentioned in the chartjs documentation.

You can go through the npm library of react-chartjs-2 for more info https://www.npmjs.com/package/react-chartjs-2

answered Nov 15, 2019 at 14:06

Dinesh Nadimpalli

1,4911 gold badge14 silver badges23 bronze badges

Comments

Elnoor · Accepted Answer · 2020-06-18 07:32:10Z

1

Here is a wrapper component built with newer React hooks

export default function Graph({ className, maxHeight, type, data, options }) {
  const graphRef = useRef(null);

  useEffect(() => {
    if (graphRef.current) {
      new Chart(graphRef.current.getContext("2d"), {
        type,
        data,
        options,
      });
    }
  }, [graphRef.current, type, data, options]);

  return (
    <div className={className || ""}>
      <canvas ref={graphRef} style={maxHeight ? { maxHeight } : null} />
    </div>
  );
}

And use like below to pass data to chart.js

<Graph
  className="col-md-4"
  maxHeight="200px"
  type="bar"
  data={{...}}
  options={{...}}
/>

answered Jun 18, 2020 at 7:32

Elnoor

3,8224 gold badges32 silver badges44 bronze badges

Comments

Yogesh D · Accepted Answer · 2019-04-08 17:06:27Z

0

You might want to take a look at a library named Recharts. I think it is a wrapper that uses Chartjs internally and has built in components for different types of charts which you can leverage to built your own charts by supplying data. It might not be fully customizable but surely will help to have a cleaner implementation as long as your React code in concerned to have basic chart components

answered Apr 8, 2019 at 17:06

Yogesh D

1,6812 gold badges23 silver badges39 bronze badges

1 Comment

Ian Dunn Over a year ago

It looks like Recharts wraps D3, which is much heavier than Chart.js.

Collectives™ on Stack Overflow

Using Charts.js with react

5 Answers 5

3 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related