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