@redsift/d3-rs-legends

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