---
title: "JavaScript Activity Heatmap Plugin"
description: "This plugin enables the creation of GitHub-style activity heatmaps using JavaScript, allowing for an intuitive representation of user activity data over time."
source: https://jsuites.net/docs/heatmap
---
The `jSuites.heatmap` is a JavaScript plugin to embed GitHub-style activity heatmaps into web applications. It enables developers to visually represent user activity data, offering insights into patterns and trends.
## Documentation
### Methods
| Method | Description |
|----------------|-----------------------------------------------------------------|
| getData(); | Return an array with the same values as the plugin's data array |
| setData(data); | Change the plugin's data array to the array passed as argument |
### Events
| Method | Description |
|--------|-----------------------------------------------------------------------------------|
| onload | when the plugin loads. `onload(DOMElement element, Object instance) => void` |
### Initialization options
| Property | Description |
|----------------------------------------------------|-------------------------------------------------------------------|
| title: string | The title of the heat map. |
| data: Array({ date: 'yyyy-mm-dd', value: number }) | The plugin days and its values. |
| date: 'yyyy-mm-dd' | The starting day of the plugin. |
| colors: string[] | The colors used to fill the days. Must be an array with 5 colors. |
| tooltip: boolean | Caption applied at the end of the plugin. |
## Examples
### Activity heatmap basic example
```html
```
```jsx
import heatmap from "@jsuites/heatmap";
import { useRef, useEffect } from "react";
import "@jsuites/heatmap/heatmap.css";
let initialDate = '2021-01-01';
let year = [];
let date = new Date(initialDate);
while (year.length < 366) {
year.push({
date: date.toISOString().slice(0, 10),
value: Math.random() * 10,
});
date.setDate(date.getDate() + 1);
}
function App() {
const heatmapEl = useRef(null);
useEffect(() => {
heatmap(heatmapEl.current, {
title: 'Example',
data: year,
date: initialDate,
colors: ['#B2DFDB', '#4DB6AC', '#009688', '#00796B', '#004D40'],
tooltip: true,
})
})
return (
);
}
export default App;
```
```vue
```
### Displaying title and showing tooltip
```html
```
```jsx
import heatmap from "@jsuites/heatmap";
import { useRef, useEffect } from "react";
import "@jsuites/heatmap/heatmap.css";
let initialDate = '2021-07-15';
let year = [];
let date = new Date(initialDate);
while (year.length < 366) {
year.push({
date: date.toISOString().slice(0, 10),
value: Math.random() * 10,
});
date.setDate(date.getDate() + 1);
}
function App() {
const heatmapEl = useRef(null);
useEffect(() => {
heatmap(heatmapEl.current, {
data: year,
date: initialDate,
title: 'This is the title',
tooltip: true,
})
})
return (
);
}
export default App;
```
```vue
```
## Related Visualization Tools
### Spreadsheet Charts
- [Embed ChartJS Charts in Spreadsheets](https://jspreadsheet.com/docs/charts) - Create interactive charts directly in spreadsheet cells using the =CHART formula
- [ChartJS Integration Examples](https://jspreadsheet.com/docs/examples/chartjs) - See complete examples with React, Vue, and Angular
### Custom Chart Solutions
- [Reactive Bar Charts with LemonadeJS](https://lemonadejs.com/docs/examples/chart) - Build lightweight custom charts using SVG and reactive JavaScript
- [Highcharts Integration](https://jspreadsheet.com/docs/examples/highcharts) - Synchronize enterprise charts with spreadsheet data
### Use Cases
The heatmap is ideal for:
- Activity tracking and contribution calendars
- Time-based data visualization
- Frequency analysis displays
For business analytics and data dashboards, consider integrating [Jspreadsheet charts](https://jspreadsheet.com/docs/charts) for a complete data management solution.