Legend

This plugin generates a legend

Install

The plugin is built-in in the core CalHeatmap, just import the module with

import { Legend } from 'cal-heatmap';

Add the legend plugin in your page’s <head>

<script src="https://unpkg.com/cal-heatmap@4.0.0-beta.4/dist/plugins/Legend.min.js"></script>

const cal = new CalHeatmap();
cal.paint({}, [[Legend, LEGEND_OPTIONS]]);

interface LegendOptions {
  enabled: boolean;
  itemSelector: string | null;
  label: string | null;
  width: number;
}

Whether to enable the legend

let cal = new CalHeatmap();
cal.paint({}, [[Legend]]);

Default: true

Specify where the legend should be rendered

If not sepcified, the legend will be inserted just after the calendar, in the same DOM node defined by itemSelector.

const cal = new CalHeatmap();
cal.paint({}, [[Legend, { itemSelector: '#my-legend-container' }]]);

Set the legend’s title

Default: null

const cal = new CalHeatmap();
cal.paint({}, [[Legend, { label: 'Temperature (°F)' }]])

Set the legend’s width

Default: null

const cal = new CalHeatmap();
cal.paint({}, [[Legend, { width: 80 }]])

The legend uses ObservaleHQ Plot library under the hood. See this article for a more detailed and advanced customisation of the legend.