@vx/legend

@vx/legend

Legends associate shapes and colors to data.

Example

import { LegendThreshold } from '@vx/legend';
import { scaleThreshold } from '@vx/scale';

const threshold = scaleThreshold({
  domain: [0.02, 0.04, 0.06, 0.08, 0.1],
  range: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f']
});

function MyChart() {
  return (
    <div>
      <svg>{/** chart stuff */}</svg>
      <LegendThreshold
        scale={threshold}
        direction="column-reverse"
        itemDirection="row-reverse"
        labelMargin="0 20px 0 0"
        shapeMargin="1px 0 0"
      />
    </div>
  );
}

Installation

npm install --save @vx/legend

Components

• Legend
• LegendItem
• LegendLabel
• LegendShape
• Linear
• Ordinal
• Quantile
• Size
• Threshold
• Circle
• Rect

API

<Legend />

# Legend.children<func>

# Legend.className<string>

# Legend.direction<string>

Default

'column'

# Legend.domain<array>

# Legend.fill<any>

Default

valueOrIdentity

# Legend.itemDirection<string>

Default

'row'

# Legend.itemMargin<string>

Default

'0'

# Legend.labelAlign<string>

Default

'left'

# Legend.labelFlex<string>

Default

'1'

# Legend.labelFormat<func>

Default

valueOrIdentity

# Legend.labelMargin<string>

Default

'0 4px'

# Legend.labelTransform<func>

Default

function defaultTransform({ scale, labelFormat }) { return (d, i) => { return { datum: d, index: i, text: ${labelFormat(d, i)}, value: scale(d) }; }; }

# Legend.scale<union(func|object)> required

# Legend.shape<any>

# Legend.shapeHeight<union(number|string)>

Default

15

# Legend.shapeMargin<any>

Default

'2px 4px 2px 0'

# Legend.shapeStyle<any>

# Legend.shapeWidth<union(number|string)>

Default

15

# Legend.size<any>

Default

valueOrIdentity

# Legend.style<any>

Default

{ display: 'flex' }

<LegendItem />

# LegendItem.alignItems<string>

Default

'center'

# LegendItem.children<any>

# LegendItem.display

Default

'flex'

# LegendItem.flexDirection<string>

Default

'row'

# LegendItem.margin<union(string|number)>

Default

'0'

<LegendLabel />

# LegendLabel.align<string>

Default

'left'

# LegendLabel.children<any>

# LegendLabel.flex<union(string|number)>

Default

'1'

# LegendLabel.label<any>

# LegendLabel.margin<union(string|number)>

Default

'5px 0'

<LegendShape />

# LegendShape.fill<any>

# LegendShape.height<any>

# LegendShape.label<any>

# LegendShape.margin<any>

# LegendShape.shape<any>

Default

ShapeRect

# LegendShape.shapeStyle<any>

# LegendShape.size<any>

# LegendShape.width<any>

<Linear />

# Linear.domain<array>

# Linear.labelFormat<func>

Default

x => x

# Linear.labelTransform<func>

Default

function defaultTransform({ scale, labelFormat }) { return (d, i) => { return { text: ${labelFormat(d, i)}, value: scale(d) }; }; }

# Linear.scale<func> required

# Linear.steps<number>

Default

5

<Ordinal />

# Ordinal.domain<array>

# Ordinal.labelFormat<func>

Default

valueOrIdentity

# Ordinal.labelTransform<func>

Default

function defaultTransform({ scale, labelFormat }) { return (d, i) => { return { datum: d, index: i, text: ${labelFormat(d, i)}, value: scale(d) }; }; }

# Ordinal.scale<func> required

<Quantile />

# Quantile.domain<array>

# Quantile.labelDelimiter<string>

Default

'-'

# Quantile.labelFormat<func>

Default

x => x

# Quantile.labelTransform<func>

# Quantile.scale<func> required

<Size />

# Size.labelFormat

Default

x => x

# Size.labelTransform

Default

function defaultTransform({ scale, labelFormat }) { return (d, i) => { return { text: ${labelFormat(d, i)}, value: scale(d), datum: d, index: i }; }; }

# Size.steps

Default

5

<Threshold />

# Threshold.domain<array>

# Threshold.labelDelimiter<string>

Default

'to'

# Threshold.labelFormat<func>

Default

x => x

# Threshold.labelLower<string>

Default

'Less than '

# Threshold.labelTransform<func>

# Threshold.labelUpper<string>

Default

'More than '

# Threshold.scale<func> required

<Circle />

# Circle.fill<any>

# Circle.height<union(number|string)>

# Circle.style<object>

# Circle.width<union(number|string)>

<Rect />

# Rect.fill<any>

# Rect.height<union(number|string)>

# Rect.style<object>

# Rect.width<union(number|string)>

Changelog

v0.0.190

💥 Breaking Changes

• [scale] d3-scale 2.2.2 changed the behavior of a collapsed domain. See this comment for how to handle the updated behavior. #477
• [text] Don't split strings rendered by <Text /> when encountering a set of non-breaking space characters. #460

:rocket: Enhancements

• [group] add innerRef prop. #480
• [scale] bump d3-scale dep to ^2.2.2 for scaleSymlog. #477
• [scale] add scaleSymlog. #470

:bug: Bug Fix

• [stats] fix horizontal boxplot in @vx/stats. #476
• [boxplot] fix horizontal boxplot in @vx/boxplot. #472
• [heatmap] remove bin.x0. The x0 offset is accounted for in bin.x. #475

:memo: Documentation

• [docs][group] add innerRef prop. #480
• [axis] fix tickLabelProps() prop default args for docs. #478
• [glyph] remove outdated readme description. #478
• [docs] run doc:gen script. #478

:trophy: Contributors

• hshoff
• robsco-git
• LambStack
• mmarkelov

Changes:
 - @vx/annotation: 0.0.189 => 0.0.190
 - @vx/axis: 0.0.189 => 0.0.190
 - @vx/boxplot: 0.0.189 => 0.0.190
 - @vx/demo: 0.0.189 => 0.0.190
 - @vx/geo: 0.0.189 => 0.0.190
 - @vx/glyph: 0.0.189 => 0.0.190
 - @vx/grid: 0.0.189 => 0.0.190
 - @vx/group: 0.0.189 => 0.0.190
 - @vx/heatmap: 0.0.189 => 0.0.190
 - @vx/hierarchy: 0.0.189 => 0.0.190
 - @vx/legend: 0.0.189 => 0.0.190
 - @vx/marker: 0.0.189 => 0.0.190
 - @vx/network: 0.0.189 => 0.0.190
 - @vx/scale: 0.0.189 => 0.0.190
 - @vx/shape: 0.0.189 => 0.0.190
 - @vx/stats: 0.0.189 => 0.0.190
 - @vx/text: 0.0.189 => 0.0.190
 - @vx/threshold: 0.0.189 => 0.0.190
 - @vx/voronoi: 0.0.189 => 0.0.190
 - @vx/vx: 0.0.189 => 0.0.190