Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
Data utilities
Umbrella package

@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

Size
0
2.5
5
7.5
10
Quantile
0 - 0.03
0.03 - 0.06
0.06 - 0.09
0.09 - 0.12
0.12 - 0.15
Linear
0.0
5.0
10.0
Threshold
More than 0.08
0.06 to 0.08
0.04 to 0.06
0.02 to 0.04
0.01 to 0.02
Less than 0.01
Ordinal
A
B
C
D
Custom Legend
a
b
c
d
$
e
Legends
<Legend />

Components

APIs

#<Linear />

# Linear.scaleScalerequired

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

# Linear.children((labels: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }[]) => ReactNode) | undefinedoptional

Optional render function override.

# Linear.classNamestring | undefinedoptional

Classname to be applied to legend container.

# Linear.direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of the legend itself.

# Linear.domainParameters<Scale>[0][] | undefinedoptional

Legend domain.

# Linear.fill((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item fill accessor function.

# Linear.itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of legend items.

# Linear.itemMarginstring | number | undefinedoptional

Margin of legend items.

# Linear.labelAlignstring | undefinedoptional

Flex-box alignment of legend item labels.

# Linear.labelFlexstring | number | undefinedoptional

Flex-box flex of legend item labels.

# Linear.labelFormatLabelFormatter<Parameters<Scale>[0]> | undefinedoptional

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

# Linear.labelMarginstring | number | undefinedoptional

Margin of legend item labels.

# Linear.labelTransformLabelFormatterFactory<Scale> | undefinedoptional

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

# Linear.legendLabelPropsPartial<LegendLabelProps> | undefinedoptional

Additional props to be set on LegendLabel.

# Linear.shape"circle" | "rect" | "line" | FC<RenderShapeProvidedProps<Parameters<Scale>[0], ReturnType<Scale>>> | ComponentClass<...> | undefinedoptional

Legend shape string preset or Element or Component.

# Linear.shapeHeightstring | number | undefinedoptional

Height of the legend shape.

# Linear.shapeMarginstring | number | undefinedoptional

Margin of the legend shape.

# Linear.shapeStyle((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefinedoptional

Styles applied to legend shapes.

# Linear.shapeWidthstring | number | undefinedoptional

Width of the legend shape.

# Linear.size((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item size accessor function.

# Linear.stepsnumber | undefinedoptional

Default 5

# Linear.styleCSSProperties | undefinedoptional

Styles to be applied to the legend container.

#<Ordinal />

# Ordinal.scaleScalerequired

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

# Ordinal.children((labels: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }[]) => ReactNode) | undefinedoptional

Optional render function override.

# Ordinal.classNamestring | undefinedoptional

Classname to be applied to legend container.

# Ordinal.direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of the legend itself.

# Ordinal.domainParameters<Scale>[0][] | undefinedoptional

Legend domain.

# Ordinal.fill((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item fill accessor function.

# Ordinal.itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of legend items.

# Ordinal.itemMarginstring | number | undefinedoptional

Margin of legend items.

# Ordinal.labelAlignstring | undefinedoptional

Flex-box alignment of legend item labels.

# Ordinal.labelFlexstring | number | undefinedoptional

Flex-box flex of legend item labels.

# Ordinal.labelFormatLabelFormatter<Parameters<Scale>[0]> | undefinedoptional

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

# Ordinal.labelMarginstring | number | undefinedoptional

Margin of legend item labels.

# Ordinal.labelTransformLabelFormatterFactory<Scale> | undefinedoptional

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

# Ordinal.legendLabelPropsPartial<LegendLabelProps> | undefinedoptional

Additional props to be set on LegendLabel.

# Ordinal.shape"circle" | "rect" | "line" | FC<RenderShapeProvidedProps<Parameters<Scale>[0], ReturnType<Scale>>> | ComponentClass<...> | undefinedoptional

Legend shape string preset or Element or Component.

# Ordinal.shapeHeightstring | number | undefinedoptional

Height of the legend shape.

# Ordinal.shapeMarginstring | number | undefinedoptional

Margin of the legend shape.

# Ordinal.shapeStyle((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefinedoptional

Styles applied to legend shapes.

# Ordinal.shapeWidthstring | number | undefinedoptional

Width of the legend shape.

# Ordinal.size((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item size accessor function.

# Ordinal.styleCSSProperties | undefinedoptional

Styles to be applied to the legend container.

#<Quantile />

# Quantile.scaleScalerequired

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

# Quantile.children((labels: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }[]) => ReactNode) | undefinedoptional

Optional render function override.

# Quantile.classNamestring | undefinedoptional

Classname to be applied to legend container.

# Quantile.direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of the legend itself.

# Quantile.domainParameters<Scale>[0][] | undefinedoptional

Legend domain.

# Quantile.fill((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item fill accessor function.

# Quantile.itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of legend items.

# Quantile.itemMarginstring | number | undefinedoptional

Margin of legend items.

# Quantile.labelAlignstring | undefinedoptional

Flex-box alignment of legend item labels.

# Quantile.labelDelimiterstring | undefinedoptional

Default -

# Quantile.labelFlexstring | number | undefinedoptional

Flex-box flex of legend item labels.

# Quantile.labelFormatLabelFormatter<Parameters<Scale>[0]> | undefinedoptional

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

# Quantile.labelMarginstring | number | undefinedoptional

Margin of legend item labels.

# Quantile.labelTransformLabelFormatterFactory<Scale> | undefinedoptional

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

# Quantile.legendLabelPropsPartial<LegendLabelProps> | undefinedoptional

Additional props to be set on LegendLabel.

# Quantile.shape"circle" | "rect" | "line" | FC<RenderShapeProvidedProps<Parameters<Scale>[0], ReturnType<Scale>>> | ComponentClass<...> | undefinedoptional

Legend shape string preset or Element or Component.

# Quantile.shapeHeightstring | number | undefinedoptional

Height of the legend shape.

# Quantile.shapeMarginstring | number | undefinedoptional

Margin of the legend shape.

# Quantile.shapeStyle((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefinedoptional

Styles applied to legend shapes.

# Quantile.shapeWidthstring | number | undefinedoptional

Width of the legend shape.

# Quantile.size((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item size accessor function.

# Quantile.styleCSSProperties | undefinedoptional

Styles to be applied to the legend container.

#<Size />

# Size.scaleScalerequired

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

# Size.children((labels: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }[]) => ReactNode) | undefinedoptional

Optional render function override.

# Size.classNamestring | undefinedoptional

Classname to be applied to legend container.

# Size.direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of the legend itself.

# Size.domainParameters<Scale>[0][] | undefinedoptional

Legend domain.

# Size.fill((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item fill accessor function.

# Size.itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of legend items.

# Size.itemMarginstring | number | undefinedoptional

Margin of legend items.

# Size.labelAlignstring | undefinedoptional

Flex-box alignment of legend item labels.

# Size.labelFlexstring | number | undefinedoptional

Flex-box flex of legend item labels.

# Size.labelFormatLabelFormatter<Parameters<Scale>[0]> | undefinedoptional

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

# Size.labelMarginstring | number | undefinedoptional

Margin of legend item labels.

# Size.labelTransformLabelFormatterFactory<Scale> | undefinedoptional

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

# Size.legendLabelPropsPartial<LegendLabelProps> | undefinedoptional

Additional props to be set on LegendLabel.

# Size.shape"circle" | "rect" | "line" | FC<RenderShapeProvidedProps<Parameters<Scale>[0], ReturnType<Scale>>> | ComponentClass<...> | undefinedoptional

Legend shape string preset or Element or Component.

# Size.shapeHeightstring | number | undefinedoptional

Height of the legend shape.

# Size.shapeMarginstring | number | undefinedoptional

Margin of the legend shape.

# Size.shapeStyle((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefinedoptional

Styles applied to legend shapes.

# Size.shapeWidthstring | number | undefinedoptional

Width of the legend shape.

# Size.size((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item size accessor function.

# Size.stepsnumber | undefinedoptional

Default 5

# Size.styleCSSProperties | undefinedoptional

Styles to be applied to the legend container.

#<Threshold />

# Threshold.scaleScalerequired

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

# Threshold.children((labels: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }[]) => ReactNode) | undefinedoptional

Optional render function override.

# Threshold.classNamestring | undefinedoptional

Classname to be applied to legend container.

# Threshold.direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of the legend itself.

# Threshold.domainParameters<Scale>[0][] | undefinedoptional

Legend domain.

# Threshold.fill((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item fill accessor function.

# Threshold.itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of legend items.

# Threshold.itemMarginstring | number | undefinedoptional

Margin of legend items.

# Threshold.labelAlignstring | undefinedoptional

Flex-box alignment of legend item labels.

# Threshold.labelDelimiterstring | undefinedoptional

Default to

# Threshold.labelFlexstring | number | undefinedoptional

Flex-box flex of legend item labels.

# Threshold.labelFormatLabelFormatter<Parameters<Scale>[0]> | undefinedoptional

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

# Threshold.labelLowerstring | undefinedoptional

Default Less than

# Threshold.labelMarginstring | number | undefinedoptional

Margin of legend item labels.

# Threshold.labelTransformLabelFormatterFactory<Scale> | undefinedoptional

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

# Threshold.labelUpperstring | undefinedoptional

Default More than

# Threshold.legendLabelPropsPartial<LegendLabelProps> | undefinedoptional

Additional props to be set on LegendLabel.

# Threshold.shape"circle" | "rect" | "line" | FC<RenderShapeProvidedProps<Parameters<Scale>[0], ReturnType<Scale>>> | ComponentClass<...> | undefinedoptional

Legend shape string preset or Element or Component.

# Threshold.shapeHeightstring | number | undefinedoptional

Height of the legend shape.

# Threshold.shapeMarginstring | number | undefinedoptional

Margin of the legend shape.

# Threshold.shapeStyle((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefinedoptional

Styles applied to legend shapes.

# Threshold.shapeWidthstring | number | undefinedoptional

Width of the legend shape.

# Threshold.size((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item size accessor function.

# Threshold.styleCSSProperties | undefinedoptional

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: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }[]) => ReactNode) | undefinedoptional

Optional render function override.

# Legend.classNamestring | undefinedoptional

Classname to be applied to legend container.

# Legend.direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of the legend itself.

Default column

# Legend.domainParameters<Scale>[0][] | undefinedoptional

Legend domain.

# Legend.fill((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item fill accessor function.

# Legend.itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefinedoptional

Flex direction of legend items.

Default row

# Legend.itemMarginstring | number | undefinedoptional

Margin of legend items.

Default 0

# Legend.labelAlignstring | undefinedoptional

Flex-box alignment of legend item labels.

Default left

# Legend.labelFlexstring | number | undefinedoptional

Flex-box flex of legend item labels.

Default 1

# Legend.labelFormatLabelFormatter<Parameters<Scale>[0]> | undefinedoptional

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

# Legend.labelMarginstring | number | undefinedoptional

Margin of legend item labels.

Default 0 4px

# Legend.labelTransformLabelFormatterFactory<Scale> | undefinedoptional

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

# Legend.legendLabelPropsPartial<LegendLabelProps> | undefinedoptional

Additional props to be set on LegendLabel.

# Legend.shape"circle" | "rect" | "line" | FC<RenderShapeProvidedProps<Parameters<Scale>[0], ReturnType<Scale>>> | ComponentClass<...> | undefinedoptional

Legend shape string preset or Element or Component.

# Legend.shapeHeightstring | number | undefinedoptional

Height of the legend shape.

Default 15

# Legend.shapeMarginstring | number | undefinedoptional

Margin of the legend shape.

Default 2px 4px 2px 0

# Legend.shapeStyle((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefinedoptional

Styles applied to legend shapes.

# Legend.shapeWidthstring | number | undefinedoptional

Width of the legend shape.

Default 15

# Legend.size((label: { datum: Parameters<Scale>[0]; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefinedoptional

Legend item size accessor function.

# Legend.styleCSSProperties | undefinedoptional

Styles to be applied to the legend container.

vx
made by @hshoff