CODEWITHSUNDEEP
chartsbar-chartchartjs-2.6.0
Timba
Timba

Reputation: 97

How to achieve this kind of heatmap / bar chart with Chart.js

I have to build a horizontal bar with chartjs. I already built a few of them but its a bit different. The chart has 2 labels for the yAxis ("Storm Risk", "Ice Risk") and hours for the xAxes. I have to print out for every hour one of these different options with different colors ("Low", "Medium", "Hight") as ye can see in the screenshot attached.

This kind of bar chart usually the values are represented by the length of the bar and its a bit different.

enter image description here

Any suggestion?.

Thanks

Upvotes: 1

Views: 3057

Answers (2)

Andrii Khmelkov
Andrii Khmelkov

Reputation: 1

Another option for those who are still looking is to use chartjs-chart-matrix https://chartjs-chart-matrix.pages.dev/usage.html plugin.

Example of implementation with Chart.js v3: https://www.youtube.com/watch?v=bi04BgvNY6U

Upvotes: 0

Tim
Tim

Reputation: 13058

The chart you want to implement is a sort of a "heatmap". As of now (Sep. 2018), Heatmap charts are not supported out of the box by Chart.js. However, you can make one out of a stacked bar chart (in this case, probably stacked horizontal bar chart?): make each stack size equal to one another and each item backgroundColor depending on the actual values being represented. Once this is done, you can override ticks and tooltips using with according callbacks. Legend can be implemented by one more bar chart with sample values and colors.

More details can be found in a related GitHub issue: https://github.com/chartjs/Chart.js/issues/4627

Another alternative would be to use a BubbleChart. The strategy would be similar - you would need to make all bubbles same size, but override their colors. However, provided the look in the question, stacked horizontal bar chart will be more suitable.

Upvotes: 1

Related Questions