Angular Heatmap Directive Plugin

A wrapper for heatmap.js so it can be used as an AngularJS directive

This plugin is maintained within the actual heatmap.js repository. If you download heatmap.js you will also download the latest version of angular-heatmap.js.

download angular heatmap directive plugin



Add the angular-heatmap.js right under heatmap.js (either in the header or right before closing the body) and inject the 'heatmap' module in your application. A <heatmap> directive can take take the following attributes: id, data, config, width, height, where data is a typical heatmap.js data object (as explained in the main documentation), config is the typical configuration object.


The angular-heatmap.js plugin exposes a service called '$heatmap' that provides direct access to your heatmap instances


Check out the live example.
// full example directive usage
// <heatmap id="myHeatmapInstance" data="myHeatmapData" config="myHeatmapCfg"></heatmap>

// => the heatmap directive will react to changes to myHeatmapData & myHeatmapCfg automatically!
// => you can manually access the heatmap instance by $heatmap.getInstance('myHeatmapInstance')