Legend

Creates an SVG legend based on an array of data.

Basic example

Each datum becomes a labeled entry drawn with Rect markers whose fill is read per datum from shapeConfig; label sets the entry text and title the heading above them.

Edit codeGet the code

Reset

const config = {
  data: [
    {color: "red", id: "alpha"},
    {color: "orange", id: "beta"},
    {color: "green", id: "gamma"},
    {color: "blue", id: "delta"},
    {color: "purple", id: "epsilon"},
  ],
  label: d => d.id,
  shapeConfig: {
    fill: d => d.color,
    r: 10,
    height: 20,
    width: 20,
  },
  shape: "Rect",
  title: "A Basic Legend",
  height: 100,
  width: 500,
};

Circle markers

Setting shape to Circle marks each entry with a filled dot sized by shapeConfig.r instead of a rectangle.

Edit codeGet the code

Reset

const config = {
  data: [
    {color: "#cc4b4b", id: "alpha"},
    {color: "#3a7ca5", id: "beta"},
    {color: "#5d9e6e", id: "gamma"},
    {color: "#b07cc6", id: "delta"},
  ],
  label: d => d.id,
  shapeConfig: {fill: d => d.color, r: 12},
  shape: "Circle",
  title: "Circle Markers",
  height: 100,
  width: 500,
};

Vertical orientation

Set direction: "column" to stack entries in a single vertical column instead of the default horizontal "row" — handy for a narrow sidebar where a wide legend won’t fit. Flip direction in the controls to compare.

Edit codeGet the code

Reset

const config = {
  data: [
    {color: "#cc4b4b", id: "alpha"},
    {color: "#e0913a", id: "beta"},
    {color: "#5d9e6e", id: "gamma"},
    {color: "#3a7ca5", id: "delta"},
    {color: "#b07cc6", id: "epsilon"},
  ],
  label: d => d.id,
  shapeConfig: {fill: d => d.color, height: 20, width: 20},
  shape: "Rect",
  direction: "column",
  title: "Vertical Legend",
  height: 240,
  width: 220,
};

Configuration

import {Legend} from "@d3plus/core";

Extends BaseClass.

Filter 14 config keys

activeunknown

The active method for all shapes.

classNamestring | array.<string> | undefined

CSS classes added to the outermost element this chart or component draws into, next to its fixed d3plus classes, so page CSS can target it: a chart's root <svg class="d3plus-viz"> (its <canvas> with the Canvas renderer) and a standalone component's <svg>. Takes a space-separated string or an array. A new value replaces the classes the previous one added; unset adds none. Tooltips take their own tooltipConfig.className.

colorDefaultscolordefaultsconfig

Overrides the default colors used when assigning fills from data and choosing legible text colors: dark and light (the text colors picked for contrast against a background), missing (null/undefined values), on/off (true/false values), sequential (the anchor hue for magnitude ramps), and scale (the categorical palette, given as a d3 ordinal scale or an array of colors). Keys are merged into the current defaults, and a Viz passes its overrides down to the shapes and components it draws.

configd3plusconfig

Methods that correspond to the key/value pairs and returns this class.

dataarray.<datapoint>Default [ ]

The data array used to create shapes. A shape key will be drawn for each object in the array.

hoverunknown

The hover method for all shapes.

localestring | object

The locale used for all text and number formatting. Supports the locales defined in d3plus-format. The locale can be a complex Object, a locale code (like "en-US"), or a 2-digit language code (like "en"). If a 2-digit code is provided, the "findLocale" function is used to identify the most approximate locale.

onstring

Event listener for the specified event typenames. Mirrors the core d3-selection behavior.

parentunknown

Parent config used by the wrapper.

renderfunction

Renders the current Legend to the page.

selectstring | htmlelement | svgelement | null

The SVG container element as a d3 selector or DOM element.

shapeConfigrecord

Methods that correspond to the key/value pairs for each shape.

titleConfigrecord

Title configuration of the legend.

translatefunction

Defines how informational text strings should be displayed. By default, this function will try to find the string in question (which is the first argument provided to this function) inside of an internally managed translation Object. If you'd like to override to use custom text, simply pass this method your own custom formatting function.