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 [email protected].

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