@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.183

:rocket: Enhancements

• [responsive] add innerRef prop to <ScaleSVG />. #393

:memo: Documentation

• [docs] use react-docgen to generate docs from prop-types and comments. #399
• [responsive][docs] add innerRef prop docs. #400
• [threshold][docs] update clipAboveTo and clipBelowTo prop types to number|func. #401

:house: Internal

• [docs] add script to sync files -> docs -> readme -> vx-demo.now.sh/docs. #399

:trophy: Contributors

• dagda1
• hshoff

Changes:
 - @vx/annotation: 0.0.182 => 0.0.183
 - @vx/axis: 0.0.182 => 0.0.183
 - @vx/boxplot: 0.0.182 => 0.0.183
 - @vx/chord: 0.0.182 => 0.0.183
 - @vx/clip-path: 0.0.182 => 0.0.183
 - @vx/demo: 0.0.182 => 0.0.183
 - @vx/drag: 0.0.182 => 0.0.183
 - @vx/geo: 0.0.182 => 0.0.183
 - @vx/glyph: 0.0.182 => 0.0.183
 - @vx/gradient: 0.0.182 => 0.0.183
 - @vx/grid: 0.0.182 => 0.0.183
 - @vx/group: 0.0.182 => 0.0.183
 - @vx/heatmap: 0.0.182 => 0.0.183
 - @vx/hierarchy: 0.0.182 => 0.0.183
 - @vx/legend: 0.0.182 => 0.0.183
 - @vx/marker: 0.0.182 => 0.0.183
 - @vx/network: 0.0.182 => 0.0.183
 - @vx/pattern: 0.0.182 => 0.0.183
 - @vx/responsive: 0.0.182 => 0.0.183
 - @vx/shape: 0.0.182 => 0.0.183
 - @vx/stats: 0.0.182 => 0.0.183
 - @vx/text: 0.0.182 => 0.0.183
 - @vx/threshold: 0.0.182 => 0.0.183
 - @vx/voronoi: 0.0.182 => 0.0.183
 - @vx/vx: 0.0.182 => 0.0.183