Skip to main content

Legend

This plugin generates a legend

Install​

Add the legend plugin in your page's <head>, after cal-heatmap library <script>

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

Usage​

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

See LegendOptions for the full list of available options.

LegendOptions​

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

enabled​

Whether to enable the legend

Default: true

itemSelector​

Specify where the legend should be rendered

If not specified, 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' }]]);

label​

Set the legend's title

Default: null

http://localhost:3000
Live Editor
Result
Loading...

width​

Set the legend's width

Default: null

http://localhost:3000
Live Editor
Result
Loading...

And more...​

info

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

You can find more supported options directly on the library documentation