LegendLite

This plugin generates a basic legend

Compared to Legend, this plugin generates a more basic legend, with a UI more similar to github contribution calendar.

Install

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

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

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

import LegendLite from 'cal-heatmap/plugins/LegendLite';

caution

This plugin only support the quantize, ordinal, and threshold scale's type

Usage

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

See LegendOptions for the full list of available options.

LegendOptions

interface LegendOptions {
  enabled: boolean;
  itemSelector: string | null;
  width: number;
  height: number;
  gutter: number;
  radius: number;
  includeBlank: boolean;
}

`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' }]]);

`width`

Set the legend cell's width

Default: 10

http://localhost:3000

Live Editor

const cal = new CalHeatmap();
cal.paint({}, [
  [
    LegendLite,
    {
      width: 25,
      itemSelector: '#legend-width',
    },
  ],
]);

render(<div id="legend-width"></div>);

const cal = new CalHeatmap();
cal.paint({}, [
  [
    LegendLite,
    {
      width: 25,
      itemSelector: '#legend-width',
    },
  ],
]);

render(<div id="legend-width"></div>);

Result

`height`

Set the legend cell's height

Default: 10

http://localhost:3000

Live Editor

const cal = new CalHeatmap();
cal.paint({}, [
  [
    LegendLite,
    {
      height: 25,
      itemSelector: '#legend-height',
    },
  ],
]);

render(<div id="legend-height"></div>);

const cal = new CalHeatmap();
cal.paint({}, [
  [
    LegendLite,
    {
      height: 25,
      itemSelector: '#legend-height',
    },
  ],
]);

render(<div id="legend-height"></div>);

Result

`gutter`

Set the legend cell's gutter

Default: 2

http://localhost:3000

Live Editor

const cal = new CalHeatmap();
cal.paint({}, [
  [
    LegendLite,
    {
      gutter: 10,
      itemSelector: '#legend-gutter',
    },
  ],
]);

render(<div id="legend-gutter"></div>);

const cal = new CalHeatmap();
cal.paint({}, [
  [
    LegendLite,
    {
      gutter: 10,
      itemSelector: '#legend-gutter',
    },
  ],
]);

render(<div id="legend-gutter"></div>);

Result

`radius`

Set the legend cell's radius

Default: 0

http://localhost:3000

Live Editor

const cal = new CalHeatmap();
cal.paint({}, [
  [
    LegendLite,
    {
      radius: 3,
      itemSelector: '#legend-radius',
    },
  ],
]);

render(<div id="legend-radius"></div>);

const cal = new CalHeatmap();
cal.paint({}, [
  [
    LegendLite,
    {
      radius: 3,
      itemSelector: '#legend-radius',
    },
  ],
]);

render(<div id="legend-radius"></div>);

Result

`includeBlank`

Whether to include a cell for data with no values

Default: false

http://localhost:3000

Live Editor

const cal = new CalHeatmap();
cal.paint({}, [
  [
    LegendLite,
    {
      includeBlank: true,
      itemSelector: '#legend-include-blank',
    },
  ],
]);

render(<div id="legend-include-blank"></div>);

const cal = new CalHeatmap();
cal.paint({}, [
  [
    LegendLite,
    {
      includeBlank: true,
      itemSelector: '#legend-include-blank',
    },
  ],
]);

render(<div id="legend-include-blank"></div>);

Result

Install​

Usage​

LegendOptions​

enabled​

itemSelector​

width​

height​

gutter​

radius​

includeBlank​

Install

Usage

LegendOptions

`enabled`

`itemSelector`

`width`

`height`

`gutter`

`radius`

`includeBlank`