[New Chart Type] Heatmap

[andreladocruz]

Just to ask you guys to add the type heatmap to the graphs.
The bubble one is not the same thing.
Thanks

[panzarino]

There is currently a Chart.js heatmap plugin that is available: https://github.com/tmroyal/Chart.HeatMap

[etimberg]

I think this would better live in an external repository so that the core doesn't get larger

[panzarino]

Closing as this has been implemented in an external library and should not be included in the core.

[andreladocruz]

@panzarino, the plugin https://github.com/tmroyal/Chart.HeatMap does not work with the current version of Chart.js

[panzarino]

@andreladocruz Maybe try contacting @tmroyal to see if he is willing to update it. Someone else could also make a new plugin, but at this time there are no plans for adding this chart type to the core library.

[andreladocruz]

Well, lets see if @tmroyal has to say about this. I'll inspect his code and see if I can upgrade it. :)

[csecker]

Did you manage to update the Chart.HeatMap plugin to work with the current version of Chart.js. Or anyone know about an alternative plugin/heatmap?

[gbordoni]

The Chart.Heatmap plugin it's outdated, it does not work with the current version of Chart.js

[prabhpahul]

Is there any other library which support the HeatMap charts or is there any update upon @tmroyal library.?

[FinnLawrence]

I just wanted to post for anyone following this issue, since finding out that Chart.HeatMap doesn't work anymore, I've managed to quite successfully create a heat map using a Stacked Bar Chart and being clever with the colors and tooltips:

How to

Grid Structure

For each of the graph's 7 datasets (in my case, one for each day of the week) I pass in a scaffold array as the data component:

var scaffold = new Array(24).fill(1);

This fills the stacked bars so that all the data points are the same size - and form a grid. Then you can color them and edit the tooltips to make it appear like a heat map.

Coloring

Example function includes a scale variable, above which values are at full opacity:

generateDatasetColors: function(valuesArray, scale) {
  var colors = [];
  var rgb = 0, 175, 221; // You should probably define this elsewhere

  for (var i in valuesArray) {
    var value = valuesArray[i];
    var opacity = value / scale;
    if (opacity > 1) {opacity = 1};

    colors.push("rgba(" + rgb + ", " + opacity + ")");
  }

  return colors;
}

Then you can just generate an array of colors for each dataset using this function and pass it in as the backgroundColor.

Tooltips

Here is what I am passing to the Chart's options object for the tooltips:

tooltips: {
  callbacks: {
    title: function(tooltipItems, data) {
      return data.datasets[tooltipItems[0].datasetIndex].label + ", " + tooltipItems[0].xLabel;
    },
    label: function(tooltipItem, data) {
      var weekDayIndex = 7 - tooltipItem.datasetIndex;
      if (weekDayIndex > 6) { weekDayIndex = 0 }
      return weekByHour[weekDayIndex][tooltipItem.index] + "%";
    }
  }
}

Where weekByHour is my 2d array of values.

This basically gets and concatenates the values for the dataset names and the axis labels for the title. The label function gets the indices from the datasets to access the 2d array of values correctly and display the value in the body of the tooltip.

---

Hopefully, that helps someone! Good luck 👍

[Hedva]

Clever. Can you create a fiddle of this example?

[nukec]

this library should be simple for angular users(tested in ang5):
https://ej2.syncfusion.com/angular/documentation/heatmap/getting-started.html

[manhar-developer]

Hi @FinnLawrence ,
Could you please share snippet/fiddle for this example

[jchao12]

@FinnLawrence
Thanks a ton for the example, was able to get the heatmap up by following it! Tremendous!

[cljk]

I thought about the same - I need a kind of headmap... or grouped scatter plot.

I thought about using the Bubble chart. Perhaps I´ll find an easy way to replace the circles with squares...

[benmccann]

You might be interested in these:
https://github.com/kurkle/chartjs-chart-matrix
https://github.com/kurkle/chartjs-chart-treemap

[cljk]

YES

Matrix seems to be exactly the one.
Thanks.

[tmroyal]

@tmroyal here, the author of the chart.js plugin available at https://github.com/tmroyal/Chart.HeatMap/. As is probably apparent, I've abandoned the plugin, and it probably should not be used. @benmccann above has some good suggestions that I would recommend adopting if you need this kind of chart type for chart.js.

[rmpt]

https://github.com/kurkle/chartjs-chart-matrix

This one is really cool, but doesn't accept x and y as strings, only numbers. That's a bummer

[mbonaci]

https://github.com/kurkle/chartjs-chart-matrix

This one is really cool, but doesn't accept x and y as strings, only numbers. That's a bummer

What do you mean? Aren't x and y square coordinates?

[rmpt]

sure, but why cant be strings? You can have situations where "A" - "B" = V. Where X and Y até strings. Em 4/07/2020, 07:35, em 07:35, "Marko Bonaći" <notifications@github.com> escreveu:

…

> > https://github.com/kurkle/chartjs-chart-matrix > > This one is really cool, but doesn't accept x and y as strings, only numbers. That's a bummer What do you mean? Aren't `x` and `y` square coordinates? -- You are receiving this because you commented. Reply to this email directly or view it on GitHub: #4627 (comment)

[0xDaksh]

https://github.com/kurkle/chartjs-chart-matrix

This one is really cool, but doesn't accept x and y as strings, only numbers. That's a bummer

What do you mean? Aren't x and y square coordinates?

Yeah but what about categories?

[kurkle]

https://github.com/kurkle/chartjs-chart-matrix

This one is really cool, but doesn't accept x and y as strings, only numbers. That's a bummer

It does, you need to use category scales for those.
Example: https://codepen.io/kurkle/pen/qBbeOZN

[0xDaksh]

Thanks @kurkle, although i already made the heatmap with plotly but still this looks good!

[pfeatherstone]

Is chartjs-chart-matrix the recommended chart type to plot spectrograms?

[bondgeek]

How to create histogram / heat map chart like the snapshot in ng2-charts valor-software/ng2-charts#1022

The examples below seem to blow the argument that adding heatmaps would make the library too large out of the water.

[julia-okuniewska]

https://github.com/kurkle/chartjs-chart-matrix

This one is really cool, but doesn't accept x and y as strings, only numbers. That's a bummer

It does, you need to use category scales for those. Example: https://codepen.io/kurkle/pen/qBbeOZN

Update for anyone using this awesome example:
if you want to override callback for tooltip's title and label, you need to rename key tooltips into tooltip and move it inside plugins

https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback