React-Chartjs-2 common practices that are hard to find.

Introduction.

React-Chartjs-2 is a popular library for building charts and graphs in React applications using the Chart.js library. While there are many resources available online for learning how to use React-Chartjs-2, some common practices may be hard to find. In this context, “common practices” refers to best practices and patterns that are commonly used by experienced developers when working with React-Chartjs-2.

The prerequisites needed to understand and follow through with this article are: React, html, css, javascript, chartjs, react-chartjs, node, npm, es6 syntax. You should have setup your project for react-chartjs-2 to continue.

Why i wrote this article is to clearly help others not to face the bug and search hard to find some simple practices that should be available on the react-chartjs-2 docs to easily achieve your design UI.

This is what i was working on to give a visual of what we will be trying to achieve at each point.

Line chart with data from an API

Doughnut Chart and labels with data from an API

These are the charts i worked with in my project. Which led me to many bugs and scouring the internet for answers. I’m going to talk less and show you the code. Firstly we want to able to achieve;

<Line options={options} data={dataOne} style={{ height: 300 }} /> 
//This is what your line chart component should look like and pass in options
//so the necessary changes can take effect

Increasing step-size in Chart: This means the interval values on your y-axis.

const options = {
    scales: {
      y: {
       ticks: {
          stepSize: 20,
        },
      },
      },
  };

Looking at this code block you’ll see that on the y-axis i added ticks: stepsize: 20 which allows my intervals to be [0,20,40,60,80,100].

Making your Chart responsive: This is a lot important when building your project as you would want your chart to be responsive. This is also applicable to all the charts not line chart alone.

const options = {
    maintainAspectRatio: false, // Don't maintain w/h ratio
  };

Removing your legends: This are the labels at the top of your chart that displays by default. Sometimes you might want to custom display your legends.

const options = {
    plugins: {
      legend: {
        display: false,
      },
    }
  };

Removing your gridlines: This is very important as you might want to remove your gridlines according to the requirement of the design.

const options ={
x: {
  grid: {
    display: false,
        },
      },
y: {
 border: { dash: [4, 4] },
   grid: {
    display: false,
       },
  },
}

This allows you to remove gridlines on both y-axis and x-axis of your chart. you can also make the gridlines dotted with the border: dash: [4, 4].

Passing fetched API: You can pass fetched API into your label data on the chart.

{
  "graph_data": {
    "views": {
      "2022-07-31": 1,
      "2022-08-01": 3,
      "2022-08-02": 3,
      "2022-08-03": 7,
      "2022-08-04": 8,
      "2022-08-05": 5,
      "2022-08-06": 20,
      "2022-08-07": 50,
      "2022-08-08": 100,
      "2022-08-09": 2
    }
   },
  }

For example let’s use this data above.

We’re using the data to achieve this line chart above. I’ll provide the code below.

import { useQuery } from "react-query";

// Fetcher function
  const getFacts = async () => {
    const res = await fetch("https://fetch-data.io/");
    return res.json();
  };

 useEffect(() => {
    async function fetchData() {
      await getFacts();
    }
    fetchData();
  }, []);

// Loading, data and error state using usequery
  const { data, error, isLoading } = useQuery("randomFacts", getFacts);

  const data = {
    labels: Object.keys(data.graph_data.views),
    datasets: [
      {
        data: Object.keys(data.graph_data.views).map(
          (date) => `${data.graph_data.views[date]}`
        ),
      },
    ],
  };
// Chart Component
<Line options={options} data={data} />

The labels are on the y-axis while the datasets are on the x-axis. If you’re having an array of object then you can also map it appropriately so it can be properly listed.

Changing the size and styles: on the chart one of the most important things after setting the maintainAspectRatio: false you also want to be able to reduce the height and width and other styles of the of the chart.

 <Doughnut
        data={dataFetched}
        options={options}
        style={{
          width: "230px",
          height: "200px",
          position: "absolute",
          marginLeft: "20rem",
          marginTop: "-45rem",
          flexDirection: "row",
        }}
      />

With this changes i made in this code above you’ll be able to adjust the styles to your preference.

Conclusion: I hope i’m able to help you make some changes and use react-chartjs-2 effectively. If you encounter any bug on this you can reach out to me. Thank you.