@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

API

<Legend />

# Legend.children<func>

# Legend.className<string>

# Legend.direction<string>
Default'column'

# Legend.domain<array>

# Legend.fill<any>
DefaultvalueOrIdentity

# Legend.itemDirection<string>
Default'row'

# Legend.itemMargin<string>
Default'0'

# Legend.labelAlign<string>
Default'left'

# Legend.labelFlex<string>
Default'1'

# Legend.labelFormat<func>
DefaultvalueOrIdentity

# Legend.labelMargin<string>
Default'0 4px'

# Legend.labelTransform<func>
Defaultfunction 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)>
Default15

# Legend.shapeMargin<any>
Default'2px 4px 2px 0'

# Legend.shapeStyle<any>

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

# Legend.size<any>
DefaultvalueOrIdentity

# 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>
DefaultShapeRect

# LegendShape.shapeStyle<any>

# LegendShape.size<any>

# LegendShape.width<any>

<Linear />

# Linear.domain<array>

# Linear.labelFormat<func>
Defaultx => x

# Linear.labelTransform<func>
Defaultfunction defaultTransform({ scale, labelFormat }) { return (d, i) => { return { text: ${labelFormat(d, i)}, value: scale(d) }; }; }

# Linear.scale<func> required

# Linear.steps<number>
Default5

<Ordinal />

# Ordinal.domain<array>

# Ordinal.labelFormat<func>
DefaultvalueOrIdentity

# Ordinal.labelTransform<func>
Defaultfunction 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>
Defaultx => x

# Quantile.labelTransform<func>

# Quantile.scale<func> required

<Size />

# Size.labelFormat
Defaultx => x

# Size.labelTransform
Defaultfunction defaultTransform({ scale, labelFormat }) { return (d, i) => { return { text: ${labelFormat(d, i)}, value: scale(d), datum: d, index: i }; }; }

# Size.steps
Default5

<Threshold />

# Threshold.domain<array>

# Threshold.labelDelimiter<string>
Default'to'

# Threshold.labelFormat<func>
Defaultx => 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)>