JavaScript Activity 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>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/heatmap/heatmap.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@jsuites/heatmap/heatmap.min.js"></script>

<div id='root' style="padding: 40px;"></div>

<script>
var initialDate = '2021-01-01';

var year = [];
var 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);
}

heatmap(document.getElementById('root'), {
    title: 'Example',
    data: year,
    date: initialDate,
    colors: ['#B2DFDB', '#4DB6AC', '#009688', '#00796B', '#004D40'],
    tooltip: true,
});
</script>
</html>

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 (
        <div className="App">
            <div ref={heatmapEl}></div>
        </div>
    );
}

export default App;

<template>
    <div>
        <div ref="heatmapEl"></div>
    </div>
</template>
  
<script>
import heatmap from "@jsuites/heatmap";
import "@jsuites/heatmap/heatmap.css";

export default {
    name: "App",
    data() {
        return {
            initialDate: "2021-01-01",
            year: [],
        };
    },
    mounted() {
        this.generateYearData();
        this.initializeHeatmap();
    },
    methods: {
        generateYearData() {
            let date = new Date(this.initialDate);

            while (this.year.length < 366) {
                this.year.push({
                    date: date.toISOString().slice(0, 10),
                    value: Math.random() * 10,
                });

                date.setDate(date.getDate() + 1);
            }
        },
        initializeHeatmap() {
            heatmap(this.$refs.heatmapEl, {
                title: "Example",
                data: this.year,
                date: this.initialDate,
                colors: ["#B2DFDB", "#4DB6AC", "#009688", "#00796B", "#004D40"],
                tooltip: true,
            });
        },
    },
};
</script>

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/heatmap/heatmap.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@jsuites/heatmap/heatmap.min.js"></script>

<div id='root' style="padding: 40px;"></div>

<script>
var initialDate = '2021-07-15';

var year = [];
var 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);
}

heatmap(document.getElementById('root'), {
  data: year,
  date: initialDate,
  title: 'This is the title',
  tooltip: true,
});
</script>
</html>

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 (
        <div className="App">
            <div ref={heatmapEl}></div>
        </div>
    );
}


export default App;

<template>
    <div>
        <div ref="heatmapEl"></div>
    </div>
</template>
  
<script>
import heatmap from "@jsuites/heatmap";
import "@jsuites/heatmap/heatmap.css";

export default {
    name: "App",
    data() {
        return {
            initialDate: "2021-07-15",
            year: [],
        };
    },
    mounted() {
        this.generateYearData();
        this.initializeHeatmap();
    },
    methods: {
        generateYearData() {
            let date = new Date(this.initialDate);

            while (this.year.length < 366) {
                this.year.push({
                    date: date.toISOString().slice(0, 10),
                    value: Math.random() * 10,
                });

                date.setDate(date.getDate() + 1);
            }
        },
        initializeHeatmap() {
            heatmap(this.$refs.heatmapEl, {
                title: "Example",
                data: this.year,
                date: this.initialDate,
                tooltip: true,
            });
        },
    },
};
</script>

Spreadsheet Charts

Embed ChartJS Charts in Spreadsheets - Create interactive charts directly in spreadsheet cells using the =CHART formula
ChartJS Integration Examples - See complete examples with React, Vue, and Angular

Custom Chart Solutions

Reactive Bar Charts with LemonadeJS - Build lightweight custom charts using SVG and reactive JavaScript
Highcharts Integration - 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 for a complete data management solution.