Legend

Legend Component reusable API class that renders a simple and configurable legend element.

Example

import { select } from 'd3-selection';
import { donut, legend } from '@britecharts/core';

// dataset: [{ id, name, quantity }], the same ids for both
const donutChart = donut();
const legendChart = legend();

donutChart
    .externalRadius(500)
    .internalRadius(200)
    .on('customMouseOver', (data) => legendChart.highlight(data.data.id))
    .on('customMouseOut', () => legendChart.clearHighlight());

select('.css-selector')
    .datum(dataset)
    .call(donutChart);

select('.other-css-selector')
    .datum(dataset)
    .call(legendChart);

• Legend
  • exports(_selection, _data) ⏏
    • static
      • .a11yTitle(_x) ⇒ String | null | module
      • .a11yDescription(_x) ⇒ String | null | module
      • .clearHighlight()
      • .colorMap([_x]) ⇒ object | module
      • .colorSchema([_x]) ⇒ number | module
      • .height([_x]) ⇒ height | module
      • .highlight(entryId)
      • .highlightEntryById([_x]) ⇒ Number | Module
      • .isHorizontal([_x]) ⇒ Boolean | module
      • .margin(_x) ⇒ object | module
      • .marginRatio([_x]) ⇒ number | module
      • .markerSize([_x]) ⇒ object | module
      • .numberFormat(_x) ⇒ string | module
      • .unit([_x]) ⇒ String | module
      • .width([_x]) ⇒ number | module
    • inner
      • ~LegendChartData : Array.<Object>

exports(_selection, _data) ⏏

This function creates the graph using the selection as container

Kind: Exported function

Param	Type	Description
_selection	D3Selection	A d3 selection that represents the container(s) where the chart(s) will be rendered
_data	LegendChartData	The data to attach and generate the chart

a11yTitle(_x) ⇒ String | null | module

Gets or Sets the name screen readers announce for the chart. It is set as the svg's aria-label. Unset, the chart is announced as "Legend".

Kind: static method of exports
Returns: String | null | module - Current a11yTitle or Chart module to chain calls
Access: public

Param	Type	Description
_x	String | null	Desired accessible title for the chart

a11yDescription(_x) ⇒ String | null | module

Gets or Sets a longer description screen readers announce after the chart's name, such as what the data shows. It is rendered as the svg's <desc>. Unset, the chart has no description.

Kind: static method of exports
Returns: String | null | module - Current a11yDescription or Chart module to chain calls
Access: public

Param	Type	Description
_x	String | null	Desired accessible description for the chart

clearHighlight()

Command that clears all highlighted entries on a legend instance

Kind: static method of exports
Access: public

colorMap([_x]) ⇒ object | module

Gets or Sets the colorMap of the chart

Kind: static method of exports
Returns: object | module - Current colorMap or Legend module to chain calls
Access: public

Param	Type	Default	Description
[_x]	object		Color map

colorSchema([_x]) ⇒ number | module

Gets or Sets the colorSchema of the chart

Kind: static method of exports
Returns: number | module - Current colorSchema or Legend module to chain calls
Access: public

Param	Type	Default	Description
[_x]	array	colorHelper.colorSchemas.britecharts	Color scheme array to get/set

height([_x]) ⇒ height | module

Gets or Sets the height of the legend chart

Kind: static method of exports
Returns: height | module - Current height or Legend module to chain calls
Access: public

Param	Type	Default	Description
[_x]	number	180	Desired width for the chart in pixels

highlight(entryId)

Command that highlights a line entry by fading the rest of lines on a legend instance

Kind: static method of exports
Access: public

Param	Type	Description
entryId	number	ID of the entry line

highlightEntryById([_x]) ⇒ Number | Module

Gets or Sets the id of the entry to highlight

Kind: static method of exports
Returns: Number | Module - Current highlighted slice id or Donut Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Number		Entry id

isHorizontal([_x]) ⇒ Boolean | module

Gets or Sets the horizontal mode on the legend

Kind: static method of exports
Returns: Boolean | module - If it is horizontal or Legend module to chain calls
Access: public

Param	Type	Default	Description
[_x]	Boolean	false	Desired horizontal mode for the graph

margin(_x) ⇒ object | module

Gets or Sets the margin of the legend chart

Kind: static method of exports
Returns: object | module - Current margin or Legend module to chain calls
Access: public

Param	Type	Description
_x	object	Margin object to get/set

marginRatio([_x]) ⇒ number | module

Gets or Sets the margin ratio of the legend chart. Used to determine spacing between legend elements.

Kind: static method of exports
Returns: number | module - Current marginRatio or Legend module to chain calls
Access: public

Param	Type	Default	Description
[_x]	number	1.5	Margin Ratio to get/set

markerSize([_x]) ⇒ object | module

Gets or Sets the markerSize of the legend chart. This markerSize will determine the horizontal and vertical size of the colored marks added as color identifiers for the chart's categories.

Kind: static method of exports
Returns: object | module - Current markerSize or Legend module to chain calls
Access: public

Param	Type	Default	Description
[_x]	object	16	Margin object to get/set

numberFormat(_x) ⇒ string | module

Gets or Sets the number format of the legend chart

Kind: static method of exports
Returns: string | module - Current number format or Legend module to chain calls
Access: public

Param	Type	Description
_x	Array.<string>	= 's' Desired numberFormat for the chart. See examples here

unit([_x]) ⇒ String | module

Gets or Sets the unit of the value

Kind: static method of exports
Returns: String | module - Current unit or Legend module to chain calls
Access: public

Param	Type	Default	Description
[_x]	String	''	Desired unit

width([_x]) ⇒ number | module

Gets or Sets the width of the legend chart

Kind: static method of exports
Returns: number | module - Current width or Legend module to chain calls
Access: public

Param	Type	Default	Description
[_x]	number	320	Desired width for the graph in pixels

exports~LegendChartData : Array.<Object>

Kind: inner typedef of exports
Properties

Name	Type	Description
id	Number	Id of the group (required)
name	String	Name of the group (required)
quantity	Number	Quantity of the group (optional)

Example

[
    {
        id: 1,
        quantity: 2,
        name: 'glittering'
    },
    {
        id: 2,
        quantity: 3,
        name: 'luminous'
    }
]