How to create charts using Chart.js with React
Tags: react, html, css, javascript
Published: 2020-06-13 03:14:06


![How to create charts using Chart.js with React](https://i2.wp.com/blogreact.com/wp-content/uploads/2020/06/charts.png?fit=750%2C398&ssl=1)

Making charts in React is always tricky. We need to take care of a number of things like chart type, there design, colors, background, values, dataSets, options, etc. In this article we will gonna learn how to create charts using Chart.js with React.

## Chart.js

Its a simple JavaScript library which is used to create various type of charts using Html5 Canvas element. It supports 8 different type of charts. Chart.js used Canvas which is great in terms of performance and IE11+ also supports it.

It will redraw the chart on resize of your browser window so that responsiveness is always taken care of. Chart.js also supports animation.

## Installation

To use this library with React you need to install there package first.

```
npm install chart.js --save
```

## Usage

We can simply import it like this.

```
import Chart from 'chart.js';
```

Chart.js uses canvas to draw the charts for that reason we need to put a canvas element in our Render method.

```
<canvas id="myChart" width="400" height="400"></canvas>
```

Once our component is rendered we can add our chart in  **componentDidMount**  if you are using class Component otherwise use  **useEffect**  for that.

Get the reference for canvas element.

```
const ctx = document.getElementById("myChart");
```

Now simply pass data and chart to that canvas element.

```
  new Chart(ctx, {
      type: "pie",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
          {
            label: "# of Votes",
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              "Red",
              "Blue",
              "Yellow",
              "Green",
              "Purple",
              "Orange"
            ],
            borderColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            borderWidth: 1
          }
        ]
      }
    });
```

Our whole component will gonna look like this.

```
import React, { useEffect } from "react";
import Chart from "chart.js";
import "./styles.css";

export default function App() {
  useEffect(() => {
    const ctx = document.getElementById("myChart");
    new Chart(ctx, {
      type: "pie",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
          {
            label: "# of Votes",
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              "Red",
              "Blue",
              "Yellow",
              "Green",
              "Purple",
              "Orange"
            ],
            borderColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            borderWidth: 1
          }
        ]
      }
    });
  });
  return (
    <div className="App">
      <canvas id="myChart" width="400" height="400" />
    </div>
  );
}

```

You will see output similar to this.

![](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/06/image-3.png?w=750&ssl=1)

Checkout this example on codesandbox.

[![Edit k1mps](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/condescending-violet-k1mps?file=/src/App.js)

Using the same way you can create all different kind of charts by just changing the  **type**  in useEffect. I hope you have learned how to create charts using Chart.js with React

[How to create cool scenes using react three fiber](https://blogreact.com/react-three-fiber/)