Create a Heatmap with Grouped Categories using Highcharts

Question

I have to create a Heatmap with Grouped Categories as shown in the below image.

I could only achieve the below functionality as of now. The link to my codepen is https://codepen.io/DukeBoy200/pen/xmpYxo?editors=1010#0. The problem with what I have done until now is it has only one common color axis for all rows in all three categories. But I need to group the color axis by each individual row in each category. I mean, the heat colour stops that I mentioned in the code,

[0, '#00FF00'],
[0.3, '#ADFF2F'],
[0.6, '#FFFFCC'],
[1, '#FFFF00']

should get applied for each individual row in a category instead of the entire heatmap. In a simple language, I want to have a heat range for a single value in a single grouped category. Example, The heat range for the value 'A' for the grouped category 'I' is 4.99 to 7.78 (4.99, 5.68, 5.92 and 7.78).

After trying different approaches, I understood neither there is a direct way nor I can tweak the existing properties to achieve the desired functionality.

Hence, I thought of implementing one heatmap for each individual category. But the problem with this approach is I would end up in having a different color axis for each individual heatmap. I already went through the answer to have one color axis for multiple heatmaps, Highcharts: multiple heatmaps with shared color bar but I couldn't understand how can I use it in my case.

Can someone please suggest me a different approach to achieve my functionality?

It might be easier to create a function that generates colors per series and category, and sets the color explicitly per point before you give the data to highcharts, that way you have complete freedom on how coloring is done. Here is a good answer for how to get a gradient based on percentage: stackoverflow.com/questions/5560248/… — ewolden

Srichandradeep C Srichandradeep C · Accepted Answer · 2019-01-03T14:47:02

After doing a lot of research, I understood that there is no way to achieve this in Highcharts. Hence, I have created one heatmap for each individual row of all three different grouped categories.

This would look like https://codepen.io/DukeBoy200/pen/QzQbXz.

Create a Heatmap with Grouped Categories using Highcharts

1 Answers