[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