Skip to main content Link Menu Expand (external link) Document Search Copy Copied

Legend

This plugin generates a legend

Install

NPM

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

import { Legend } from 'cal-heatmap';

CDN

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>

Usage

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

LegendOptions

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

enabled

Whether to enable the legend

Example

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

Default: true

Playground

itemSelector

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.

Example

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

label

Set the legend’s title

Default: null

Example

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

width

Set the legend’s width

Default: null

Example

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

Notes

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