ngx-heatmap

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

Example for data

{ max: 5, data: [{ x: 10, y: 15, value: 5}, { x: 5, y: 20, value: 4}] }

Any suggestions?

Drop me a e-mail [e-mail].

Or open a new issue in https://github.com/sanuradhag/ngx-heatmap/issues

Contributors

Anuradha Gunasekara

License

This software is licensed under the MIT license