https://github.com/benweizhu/react-heatmap.js
A React Component based on heatmap.js.
https://github.com/benweizhu/react-heatmap.js
heatmapjs library react
Last synced: 5 months ago
JSON representation
A React Component based on heatmap.js.
- Host: GitHub
- URL: https://github.com/benweizhu/react-heatmap.js
- Owner: benweizhu
- Created: 2017-04-18T01:53:38.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-18T08:06:58.000Z (about 9 years ago)
- Last Synced: 2025-08-09T14:29:45.286Z (10 months ago)
- Topics: heatmapjs, library, react
- Language: JavaScript
- Homepage: https://benweizhu.github.io/react-heatmap.js/
- Size: 760 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-heatmap.js
A React Component based on [heatmap.js][b7fa289f].
[b7fa289f]: https://www.patrick-wied.at/static/heatmapjs/ "heatmap.js"
```
yarn add react-heatmap.js
```
```javascript
import React from 'react';
import ReactDom from 'react-dom';
import ReactHeatmap from 'react-heatmap.js';
class ReactHeatmapExample extends React.PureComponent {
render() {
const config = {
radius: 10,
maxOpacity: 0.5,
minOpacity: 0,
blur: 0.75
};
const points = [];
const width = 840;
const height = 400;
let max = 0;
let len = 300;
while (len--) {
const val = Math.floor(Math.random() * 100);
// now also with custom radius
const radius = Math.floor(Math.random() * 70);
max = Math.max(max, val);
const point = {
x: Math.floor(Math.random() * width),
y: Math.floor(Math.random() * height),
value: val,
// radius configuration on point basis
radius
};
points.push(point);
}
return (
);
}
}
ReactDom.render(, document.querySelector('#app'));
```
For more configuration, take [docs.html][747485cf] as reference.
[747485cf]: https://www.patrick-wied.at/static/heatmapjs/docs.html "docs.html"