@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<string>

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.domain<array>

# Size.labelFormat<func>

Default

x => x

# Size.labelTransform<func>

Default

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

# Size.scale<func> required

# Size.steps<number>

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)>