@vx/legend

Legends associate shapes and colors to data, and are associated with scales.

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

Examples

Components

APIs

#<Linear />

# Linear.scaleScaleLinear<number, Output>required

@vx/scale or d3-scale object used to generate the legend items.

# Linear.children(labels: { datum: number; index: number; text: string; value?: Output; }[]) => ReactNodeoptional

Optional render function override.

# Linear.classNamestringoptional

Classname to be applied to legend container.

# Linear.directionFlexDirectionoptional

Flex direction of the legend itself.

# Linear.domainnumber[]optional

Legend domain.

# Linear.fill(label: { datum: number; index: number; text: string; value?: Output; }) => ReactTextoptional

Legend item fill accessor function.

# Linear.itemDirectionFlexDirectionoptional

Flex direction of legend items.

# Linear.itemMarginReactTextoptional

Margin of legend items.

# Linear.labelAlignstringoptional

Flex-box alignment of legend item labels.

# Linear.labelFlexReactTextoptional

Flex-box flex of legend item labels.

# Linear.labelFormatLabelFormatter<number>optional

Given a legend item and its index, returns an item label.

# Linear.labelMarginReactTextoptional

Margin of legend item labels.

# Linear.labelTransformLabelFormatterFactory<number, Output, ScaleLinear<number, Output>>optional

Given the legend scale and labelFormatter, returns a label with datum, index, value, and label.

# Linear.shapeLegendShape<number, Output>optional

Legend shape string preset or Element or Component.

# Linear.shapeHeightReactTextoptional

Height of the legend shape.

# Linear.shapeMarginReactTextoptional

Margin of the legend shape.

# Linear.shapeStyle(label: { datum: number; index: number; text: string; value?: Output; }) => CSSPropertiesoptional

Styles applied to legend shapes.

# Linear.shapeWidthReactTextoptional

Width of the legend shape.

# Linear.size(label: { datum: number; index: number; text: string; value?: Output; }) => ReactTextoptional

Legend item size accessor function.

# Linear.stepsnumberoptional

Default 5

# Linear.styleCSSPropertiesoptional

Styles to be applied to the legend container.

#<Ordinal />

# Ordinal.scaleScaleOrdinal<Input, Output>required

@vx/scale or d3-scale object used to generate the legend items.

# Ordinal.children(labels: { datum: string; index: number; text: string; value?: Output; }[]) => ReactNodeoptional

Optional render function override.

# Ordinal.classNamestringoptional

Classname to be applied to legend container.

# Ordinal.directionFlexDirectionoptional

Flex direction of the legend itself.

# Ordinal.domainstring[]optional

Legend domain.

# Ordinal.fill(label: { datum: string; index: number; text: string; value?: Output; }) => ReactTextoptional

Legend item fill accessor function.

# Ordinal.itemDirectionFlexDirectionoptional

Flex direction of legend items.

# Ordinal.itemMarginReactTextoptional

Margin of legend items.

# Ordinal.labelAlignstringoptional

Flex-box alignment of legend item labels.

# Ordinal.labelFlexReactTextoptional

Flex-box flex of legend item labels.

# Ordinal.labelFormatLabelFormatter<string>optional

Given a legend item and its index, returns an item label.

# Ordinal.labelMarginReactTextoptional

Margin of legend item labels.

# Ordinal.labelTransformLabelFormatterFactory<string, Output, ScaleOrdinal<Input, Output>>optional

Given the legend scale and labelFormatter, returns a label with datum, index, value, and label.

# Ordinal.shapeLegendShape<string, Output>optional

Legend shape string preset or Element or Component.

# Ordinal.shapeHeightReactTextoptional

Height of the legend shape.

# Ordinal.shapeMarginReactTextoptional

Margin of the legend shape.

# Ordinal.shapeStyle(label: { datum: string; index: number; text: string; value?: Output; }) => CSSPropertiesoptional

Styles applied to legend shapes.

# Ordinal.shapeWidthReactTextoptional

Width of the legend shape.

# Ordinal.size(label: { datum: string; index: number; text: string; value?: Output; }) => ReactTextoptional

Legend item size accessor function.

# Ordinal.styleCSSPropertiesoptional

Styles to be applied to the legend container.

#<Quantile />

# Quantile.scaleScaleQuantile<number, Output>required
# Quantile.children(labels: { datum: number; index: number; text: string; value?: Output; }[]) => ReactNodeoptional

Optional render function override.

# Quantile.classNamestringoptional

Classname to be applied to legend container.

# Quantile.directionFlexDirectionoptional

Flex direction of the legend itself.

# Quantile.domainnumber[]optional

Legend domain.

# Quantile.fill(label: { datum: number; index: number; text: string; value?: Output; }) => ReactTextoptional

Legend item fill accessor function.

# Quantile.itemDirectionFlexDirectionoptional

Flex direction of legend items.

# Quantile.itemMarginReactTextoptional

Margin of legend items.

# Quantile.labelAlignstringoptional

Flex-box alignment of legend item labels.

# Quantile.labelDelimiterstringoptional

Default -

# Quantile.labelFlexReactTextoptional

Flex-box flex of legend item labels.

# Quantile.labelFormatLabelFormatter<number>optional

Given a legend item and its index, returns an item label.

Default x => x

# Quantile.labelMarginReactTextoptional

Margin of legend item labels.

# Quantile.labelTransformLabelFormatterFactory<number, Output, ScaleQuantile<number, Output>>optional
# Quantile.shapeLegendShape<number, Output>optional

Legend shape string preset or Element or Component.

# Quantile.shapeHeightReactTextoptional

Height of the legend shape.

# Quantile.shapeMarginReactTextoptional

Margin of the legend shape.

# Quantile.shapeStyle(label: { datum: number; index: number; text: string; value?: Output; }) => CSSPropertiesoptional

Styles applied to legend shapes.

# Quantile.shapeWidthReactTextoptional

Width of the legend shape.

# Quantile.size(label: { datum: number; index: number; text: string; value?: Output; }) => ReactTextoptional

Legend item size accessor function.

# Quantile.styleCSSPropertiesoptional

Styles to be applied to the legend container.

#<Size />

# Size.scaleScaleType<Datum, number>required

@vx/scale or d3-scale object used to generate the legend items.

# Size.children(labels: { datum: Datum; index: number; text: string; value?: number; }[]) => ReactNodeoptional

Optional render function override.

# Size.classNamestringoptional

Classname to be applied to legend container.

# Size.directionFlexDirectionoptional

Flex direction of the legend itself.

# Size.domainDatum[]optional

Legend domain.

# Size.fill(label: { datum: Datum; index: number; text: string; value?: number; }) => ReactTextoptional

Legend item fill accessor function.

# Size.itemDirectionFlexDirectionoptional

Flex direction of legend items.

# Size.itemMarginReactTextoptional

Margin of legend items.

# Size.labelAlignstringoptional

Flex-box alignment of legend item labels.

# Size.labelFlexReactTextoptional

Flex-box flex of legend item labels.

# Size.labelFormatLabelFormatter<Datum>optional

Given a legend item and its index, returns an item label.

Default x => x

# Size.labelMarginReactTextoptional

Margin of legend item labels.

# Size.labelTransformLabelFormatterFactory<Datum, number, ScaleType<Datum, number>>optional

Given the legend scale and labelFormatter, returns a label with datum, index, value, and label.

# Size.shapeLegendShape<Datum, number>optional

Legend shape string preset or Element or Component.

# Size.shapeHeightReactTextoptional

Height of the legend shape.

# Size.shapeMarginReactTextoptional

Margin of the legend shape.

# Size.shapeStyle(label: { datum: Datum; index: number; text: string; value?: number; }) => CSSPropertiesoptional

Styles applied to legend shapes.

# Size.shapeWidthReactTextoptional

Width of the legend shape.

# Size.size(label: { datum: Datum; index: number; text: string; value?: number; }) => ReactTextoptional

Legend item size accessor function.

# Size.stepsnumberoptional

Default 5

# Size.styleCSSPropertiesoptional

Styles to be applied to the legend container.

#<Threshold />

# Threshold.scaleScaleThreshold<Datum, Output>required

@vx/scale or d3-scale object used to generate the legend items.

# Threshold.children(labels: { datum: Datum; index: number; text: string; value?: Output; }[]) => ReactNodeoptional

Optional render function override.

# Threshold.classNamestringoptional

Classname to be applied to legend container.

# Threshold.directionFlexDirectionoptional

Flex direction of the legend itself.

# Threshold.domainDatum[]optional

Legend domain.

# Threshold.fill(label: { datum: Datum; index: number; text: string; value?: Output; }) => ReactTextoptional

Legend item fill accessor function.

# Threshold.itemDirectionFlexDirectionoptional

Flex direction of legend items.

# Threshold.itemMarginReactTextoptional

Margin of legend items.

# Threshold.labelAlignstringoptional

Flex-box alignment of legend item labels.

# Threshold.labelDelimiterstringoptional

Default to

# Threshold.labelFlexReactTextoptional

Flex-box flex of legend item labels.

# Threshold.labelFormatLabelFormatter<Datum>optional

Given a legend item and its index, returns an item label.

Default (d: Datum) => d

# Threshold.labelLowerstringoptional

Default Less than

# Threshold.labelMarginReactTextoptional

Margin of legend item labels.

# Threshold.labelTransformLabelFormatterFactory<Datum, Output, ScaleThreshold<Datum, Output>>optional

Given the legend scale and labelFormatter, returns a label with datum, index, value, and label.

# Threshold.labelUpperstringoptional

Default More than

# Threshold.shapeLegendShape<Datum, Output>optional

Legend shape string preset or Element or Component.

# Threshold.shapeHeightReactTextoptional

Height of the legend shape.

# Threshold.shapeMarginReactTextoptional

Margin of the legend shape.

# Threshold.shapeStyle(label: { datum: Datum; index: number; text: string; value?: Output; }) => CSSPropertiesoptional

Styles applied to legend shapes.

# Threshold.shapeWidthReactTextoptional

Width of the legend shape.

# Threshold.size(label: { datum: Datum; index: number; text: string; value?: Output; }) => ReactTextoptional

Legend item size accessor function.

# Threshold.styleCSSPropertiesoptional

Styles to be applied to the legend container.

#<Legend />

# Legend.scaleScalerequired

@vx/scale or d3-scale object used to generate the legend items.

# Legend.children(labels: { datum: Datum; index: number; text: string; value?: Output; }[]) => ReactNodeoptional

Optional render function override.

# Legend.classNamestringoptional

Classname to be applied to legend container.

# Legend.directionFlexDirectionoptional

Flex direction of the legend itself.

Default column

# Legend.domainDatum[]optional

Legend domain.

# Legend.fill(label: { datum: Datum; index: number; text: string; value?: Output; }) => ReactTextoptional

Legend item fill accessor function.

# Legend.itemDirectionFlexDirectionoptional

Flex direction of legend items.

Default row

# Legend.itemMarginReactTextoptional

Margin of legend items.

Default 0

# Legend.labelAlignstringoptional

Flex-box alignment of legend item labels.

Default left

# Legend.labelFlexReactTextoptional

Flex-box flex of legend item labels.

Default 1

# Legend.labelFormatLabelFormatter<Datum>optional

Given a legend item and its index, returns an item label.

# Legend.labelMarginReactTextoptional

Margin of legend item labels.

Default 0 4px

# Legend.labelTransformLabelFormatterFactory<Datum, Output, Scale>optional

Given the legend scale and labelFormatter, returns a label with datum, index, value, and label.

# Legend.shapeLegendShape<Datum, Output>optional

Legend shape string preset or Element or Component.

# Legend.shapeHeightReactTextoptional

Height of the legend shape.

Default 15

# Legend.shapeMarginReactTextoptional

Margin of the legend shape.

Default 2px 4px 2px 0

# Legend.shapeStyle(label: { datum: Datum; index: number; text: string; value?: Output; }) => CSSPropertiesoptional

Styles applied to legend shapes.

# Legend.shapeWidthReactTextoptional

Width of the legend shape.

Default 15

# Legend.size(label: { datum: Datum; index: number; text: string; value?: Output; }) => ReactTextoptional

Legend item size accessor function.

# Legend.styleCSSPropertiesoptional

Styles to be applied to the legend container.