Geek Culture
Published in

Geek Culture

ChartJs custom hook— ReactJs

Photo by Steve Johnson on Unsplash

A custom hook is nothing, a simple javascript file with shared logic. Here we will write a custom hook to render the charts by using ChartJs library.

Install the chartJs using the yarn/npm command

yarn add chart.js
or
npm install chart.js

Let’s write the hook — useChart

A hooks name should always start with use, here we will name the hook as useChart. Create a new file useChart.js and add the following snippet

import React from "react";
import Chart from "chart.js/auto";
const useChart = (nodeRef, options) => { React.useEffect(() => { const chart = Chart.getChart(nodeRef.current.id); if (chart) { chart.destroy(); } new Chart(nodeRef.current, options); console.log("chart rendered");}, [nodeRef, options]); return {};};export default useChart;

In the above snippet, the useChart function accepts two parameters ref & chart options. Ref is used to pass the chart canvas to the hook & the chart options include type of chart and data values.

Now, let’s see how to call the useChart hook

In your component, to render the chart import the useChart hook and create a ref using React’s useRef.

import useChart from “./useChart”;
.
.
.
function App() {const canvasRef = useRef(null);
.
.
.

}

ChartsJs uses DOM to render the chart, so that we should create a canvas element and pass the ref.

<canvas id=”weatherChart” ref={canvasRef} width=”400" height=”100" />

Finally, with the useChart hook render the chart by passing the ref & chart options.

useChart(canvasRef, {type: "line", //type of chart (line, pie, bar)
data: {
labels: data.label, //chart label eg: [SUN, MON, TUE]
datasets: [
{
label: "Temperature °C",
data: data.values, //chart data eg: [10,50,11]
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 1,
},
],
},
options: {
legend: {
display: true,
labels: {
fontColor: "#ff0000",
},
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});

And we have successfully created a custom chartJs hook and rendered the chart. You can call multiple useChart hooks to render different type of charts.
I have used https://api.weatherapi.com for populating the data.

Code repo — https://github.com/RasikFareed/custom-hooks/tree/main/custom-hooks

Demo link — https://rasikfareed.github.io/custom-hooks/

Summary

To summarise, React Custom hooks are more powerful and makes the code a lot lesser & easier to use.

In this article, we have built our own custom hook for a ChartsJs library and rendered the charts

Thank you for reading, Happy Coding!

References
1. https://www.chartjs.org/docs/latest/
2. https://reactjs.org/docs/hooks-custom.html

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Muhammed Rasik Fareed M

Muhammed Rasik Fareed M

Software Developer at Trimble Inc. | Focusing on a wide variety of creativity. Website: https://rasikfareed.netlify.com