How to Render Dynamic Data In ChartJS & React Hooks

February 19, 2021

  1. In your project terminal, type.
npx create-react-app chartjsapiapp
  1. If you successfully created your app go into the app’s main src directory, and do “npm start” to start the app.
npm start
  1. Once started open up your App.js file and convert the function app to a functional component
  2. Now create a new folder in the src folder called “components” and create a new file in components called Chart.js. src/components/Chart.js. Add this code into the ChartComponent function.
<!-- This is App.js -->
import "./App.css";
import ChartComponent from "./components/Chart";

const App = () => {
  return (
    <div className="App">
      <ChartComponent />
    </div>
  );
};

export default App;
<!-- This is Chart.js -->

import React from 'react'

const ChartComponent = () => {
  return <div className="App">Hello World</div>;
};

export default ChartComponent;
  1. We need to now install two dependencies npm i react-chartjs-2 chart.js
  2. Inside of Chart.js go ahead and import a line chart from react-chartjs-2 as well as useState from react
<!-- Chart.js -->
import React, {useState, useEffect} from 'react'
import {Line} from "react-chartjs-2"

const ChartComponent = () => {
  return <div className="App">Hello World</div>;
};

export default ChartComponent;
  1. Inside of your ChartComponent component add this code
<!-- Chart.js -->
import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";

const ChartComponent = () => {
  const [chartData, setChartData] = useState({});

  const chart = () => {
    setChartData({
      labels: ["Monday", "Tuesday", "Wednesday",
       "Thursday", "Friday"],
      datasets: [
        {
          label: "Level of Temperature",
          data: [32, 53, 32, 54, 69],
          backgroundColor: [`rgb(75, 192, 192, 0.6)`],
          borderWidth: 4,
        },
      ],
    });
  };
  useEffect(() => {
    chart();
  });
  return (
    <div className="App">
      <h1>Temperature *F</h1>
      <div>
        <Line data={chartData} />
      </div>
    </div>
  );
};

export default ChartComponent;

So that's a lotta code but what does it all mean? Well, let's start from the top. We imported useState and useEffect to be able to set and change the chartData and on a change re-render the chart respectively.

But what's happening inside of setChartData? Well, there are certain parameters ChartJS needs to take before it can render it. Labels and data set, there are more but those are the most important. The Labels are being used for the x-axis.

Within datasets, the label is used as the legend at the top of the chart. The background color will be used as the filling for the line chart, the border width is used for the width of the line within the chart.

The useEffect then calls the chart function, if there is any new data so it can then re-render.

Within the return statement, we called the Line component and gave it the parameter of chartData to render the chart in the app.

There are many more things you can customize in the chart but this is an easy and simple way to render a chart within React Hooks. Hope this helped you out 😃

Arslan,

Kematix Digital