Ngx-heatmap NPM

ngx heatmap

An angular wrapper for heatmap.js.

Installation

Install through npm;

npm install --save ngx-heatmap

For now you have to install following dependency since Angular 9 and heatmap.js have problems when resolving peer dependencies

npm install --save git+https://github.com/sanuradhag/heatmap.js

Then import NgxHeatmapModule and include it in your apps for module.

import { Component, NgModule } from '@angular/core';
import { NgxHeatmapModule } from 'ngx-heatmap';
 
@NgModule({
  imports: [
    NgxHeatmapModule
  ]
})
export class MyModule {}

Then add ngx-heatmap to your app template.

<ngx-heatmap [height]="height"
             [width]="width"
             [maxDataPoints]="500"
             [minDataPoints]="500"
             [heatPoints]="data">
</ngx-heatmap>

Styles

Style guide will be added soon.

Documentation

ngx-heatmap properties.

Property	Input/Output	Default value	Description
height	Input	400px	Height of the heat map canvas
width	Input	400px	Width of the heat map canvas
maxDataPoints	Input	null	Maximum number of points on heat map
minDatPoints	Input	null	Minimum number of points on heat map.
heatPoints	Input	{} - empty Object	Object, that contains the data Attribute, that containing an Array with heat map points
configurations	Input	{} - empty object	Configurations for heat map