d3-rs-legends

d3-rs-legends generate a legend for charts.

Builds

Example

View @redsift/d3-rs-legends on Codepen

Default


Left


Right


Top, rounded and spaced out


Usage

Browser

<script src="//static.redsift.io/reusable/d3-rs-legends/latest/d3-rs-legends.umd-es2015.min.js"></script>
<script>
	var chart = d3_rs_legends.html();
	d3.select('body').datum([ 'A', 'B' ]).call(chart);
</script>

ES6

import { chart } from "@redsift/d3-rs-legends";
let eml = chart.html();
...

Require

var chart = require("@redsift/d3-rs-legends");
var eml = chart.html();
...

Datum

• Simplest form, array of strings: ['A', 'B', 'C', ...]

Parameters

Property|Description|Transition|Preview ----|-----------|----------|------- classed|String SVG custom class|N width, height, size, scale|Integer SVG container sizes. Typically, use size to scale the chart|Y margin|Object, Number Margin affecting all chart elements inset|Object, Number Margin affecting the legend style|String Custom CSS to inject into chart|N background|Color theme|light|dark orientation|String Location of the legend, one of top, bottom, left, right|N legendSize|Integer Size of the color sample|N spacing|Integer Estimator of the amount of space to resere of each char in the text label padding|Integer Pixels between each legend element radius|Integer Radius of the legend rectangle. Rounds the element fill|Array, Function Colors to assign to legend in order toggleable|Boolean If true will add a new Checkbox on the left side of the color square to add capability to enable/disable legend items.|N onEnabledLegendItemsChange|Function To be called whenever enabled legend items changed. It's called passing an array of the enabled legend indexes|N tintColor|String Color to use for checkbox|N