Heat map

Quick reference

Considering the example below:

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

<div class='row'>
    <div class='column p10'>
        <div id='heat-map'></div>

var root = document.getElementById('heat-map');
var initialDate = '2021-01-01';

var year = [];
var date = new Date(initialDate);

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

  date.setDate(date.getDate() + 1);

var heatMap = jSuites.heatMap(root, {
  data: year,
  date: initialDate,


Method Description
heatMap.getData(); Return an array with the same values as the plugin's data array
heatMap.setData(data); Change the plugin's data array to the array passed as argument


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.