Create Charts in React Easily with the react-chartist Library

We can add charts to our React app easily with the react-chartist library.

In this article, we’ll look at how to add charts easily with the react-chartist library.

Installation

We can install the library by running:

npm install react-chartist --save

We also need the chartist package which it depends on.

This can be installed by running:

npm install chartist --save

Creating Charts

Once we installed the libraries, we can create our own charts with it.

We have to add the CSS by adding:

<link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"
    />

to the head tag in public/index.html .

Then in our component, we can add our graph:

import React from "react";
import ChartistGraph from "react-chartist";

const data = {
  labels: [2016, 2017, 2018, 2019, 2020],
  series: [[1, 2, 4, 8, 6]]
};

const options = {
  high: 10,
  low: -10,
  axisX: {
    labelInterpolationFnc(value, index) {
      return index % 2 === 0 ? value : null;
    }
  }
};

const type = "Bar";

export default function App() {
  return (
    <div className="App">
      <ChartistGraph data={data} options={options} type={type} />
    </div>
  );
}

data has the chart data.

labels has the x-axis labels.

series has the y-axis values.

options has various options.

high sets the max value to display for the y-axis.

low sets the min value to display for the x-axis.

axisX has the labelInterpolationFnc to set how the x-axis labels are displayed.

value has the x-axis value.

index has the index of the x-axis value in labels .

Whatever returns true when this function is called with is displayed.

Line charts can be created by changing 'Bar' to 'Line' .

Pie Chart

We can add the pie chart by writing:

import React from "react";
import ChartistGraph from "react-chartist";

const data = {
  series: [20, 10, 30, 40]
};

const options = {};

const type = "Pie";

export default function App() {
  return (
    <div className="App">
      <ChartistGraph data={data} options={options} type={type} />
    </div>
  );
}

The series property now has a 1-d array instead of a 2-d one.

And the type is 'Pie' .

We can change a few options to configure our chart.

For example, we can write:

import React from "react";
import ChartistGraph from "react-chartist";

const data = {
  series: [20, 10, 30, 40]
};

const options = {
  donut: true,
  donutWidth: 20,
  startAngle: 270,
  total: 100
};

const type = "Pie";

export default function App() {
  return (
    <div className="App">
      <ChartistGraph data={data} options={options} type={type} />
    </div>
  );
}

donut set to true makes the pie chart display as a donut.

donutWidth sets the width of the ring in pixels.

startAngle sets the starting angle for the chart in degrees.

total has the total amount that the series numbers add up to.

Conclusion

We can use react-chartist to create simple charts with lots of flexibility.