Pyramid Chart with Chart.js and React

Dipesh Dulal
Aug 6, 2020 · 3 min read

Chart.JS is a popular java script charting library. Various kinds of Charts can be built with it but when I was searching for building Pyramid Chart (Stacked Bar Chart), I couldn’t find any tutorials that shows how to build the chart I wanted using chart.js so, this story shows how I built the pyramid chart.

TL;DR: Use negative values for one data set and then customize tool tips and x-axis ticks to show positive numbers although they are negative numbers.

Final Pyramid Chart built using chart.js

In this story, I will be using ReactJS and ChartJS to build a pyramid chart. Before we begin let us add chart js dependency by doing yarn add chart.js and If you are using typescript in your project you can simple add type definitions for chart.js using yarn add -D @types/chart.js .

By doing so, we are ready to build our new charting component. Let’s name it StackedAxisChart.tsx and add canvas component in render method.

Here, I have created a reference to HTMLCanvasElement . If you are not using typscript you can do useRef(null) without using typescript generic statement.

We now need to initialize chartjs with 2d context of the canvas. We can use useEffect hook for implementing initialization of our pyramid chart. i.e

Let’s create data-set for our pyramid chart which will be of type Chart.ChartData i.e

In the data-set, we have just added color for our two data points and named at which stack in stacked chart our data set fits. Here we are saying that the stack is the same for both Males and Females. In the line #14
data: [...].map(k=>-k) is simply inverting the data points so that our data will be displayed in opposite side of the stack. (One side for Male and Another side for female.)

Let’s write configuration for chart.js which will look like shown below;

These are all normal configuration for stacked bar chart found in their documentation.

Pyramid Chart with negative values.

We built it, but there is a problem tool tips for Female part has negative value as well as x-axis labels (ticks) contain negative value as well. But this was supposed to happen as we provided negative value in our data set. To mitigate this problem we can use; custom callback function to render x-axis ticks as well as tool tips.

For rendering x-axis ticks, we convert negative number into positive as do nothing for positive numbers, we can write;

// inside xAxes: {stacked: false, ....
ticks: {
beginAtZero: true,
callback: (v) => { return v < 0 ? -v: v }
}

For rendering tool tips, the logic is same as x-axis ticks but is little but complex due to displaying label for both Males and females as shown below;

  • In line #7 to #11 we have checked for if data set at c is for Male or Female as provided the text similarly.
  • Line #5 is same as callback logic for x-axis ticks.

That’s it we have successfully created a pyramid chart by using negative values for a data point and then using custom callbacks for ticks and tool tips render to mitigate negative values shown in the chart.

After everything, the code for our component will look like;

You can customize this chart more by looking at the documentation provided by chart.js here.
For full code of this tutorial you can check this github repo

Follow me on GitHub: https://github.com/dipeshdulal

For basic concepts on golang check; https://github.com/dipeshdulal/learning-golang

Have a good day.

wesionaryTEAM

Visionary Development Team. We ❤︎ Technology!

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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