@visx/legend

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

Example

import { LegendThreshold } from '@visx/legend';
import { scaleThreshold } from '@visx/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 @visx/legend

Examples

APIs

#<Linear />

# scaleScalerequired

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

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

Optional render function override.

# classNamestring | undefined

Classname to be applied to legend container.

# direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of the legend itself.

# domainScaleInput<Scale>[] | undefined

Legend domain.

# fill((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | undefined) | undefined

Legend item fill accessor function.

# itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of legend items.

# itemMarginstring | number | undefined

Margin of legend items.

# labelAlignstring | undefined

Flex-box alignment of legend item labels.

# labelFlexstring | number | undefined

Flex-box flex of legend item labels.

# labelFormatLabelFormatter<ScaleInput<Scale>> | undefined

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

# labelMarginstring | number | undefined

Margin of legend item labels.

# labelTransformLabelFormatterFactory<Scale> | undefined

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

# legendLabelPropsPartial<LegendLabelProps> | undefined

Additional props to be set on LegendLabel.

# shape"line" | "rect" | "circle" | FC<RenderShapeProvidedProps<ScaleInput<Scale>, ReturnType<Scale>>> | ComponentClass<...> | undefined

Legend shape string preset or Element or Component.

# shapeHeightstring | number | undefined

Height of the legend shape.

# shapeMarginstring | number | undefined

Margin of the legend shape.

# shapeStyle((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefined

Styles applied to legend shapes.

# shapeWidthstring | number | undefined

Width of the legend shape.

# size((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefined

Legend item size accessor function.

# stepsnumber | undefined

Default 5

# styleCSSProperties | undefined

Styles to be applied to the legend container.

#<Ordinal />

# scaleScalerequired

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

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

Optional render function override.

# classNamestring | undefined

Classname to be applied to legend container.

# direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of the legend itself.

# domainScaleInput<Scale>[] | undefined

Legend domain.

# fill((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | undefined) | undefined

Legend item fill accessor function.

# itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of legend items.

# itemMarginstring | number | undefined

Margin of legend items.

# labelAlignstring | undefined

Flex-box alignment of legend item labels.

# labelFlexstring | number | undefined

Flex-box flex of legend item labels.

# labelFormatLabelFormatter<ScaleInput<Scale>> | undefined

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

# labelMarginstring | number | undefined

Margin of legend item labels.

# labelTransformLabelFormatterFactory<Scale> | undefined

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

# legendLabelPropsPartial<LegendLabelProps> | undefined

Additional props to be set on LegendLabel.

# shape"line" | "rect" | "circle" | FC<RenderShapeProvidedProps<ScaleInput<Scale>, ReturnType<Scale>>> | ComponentClass<...> | undefined

Legend shape string preset or Element or Component.

# shapeHeightstring | number | undefined

Height of the legend shape.

# shapeMarginstring | number | undefined

Margin of the legend shape.

# shapeStyle((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefined

Styles applied to legend shapes.

# shapeWidthstring | number | undefined

Width of the legend shape.

# size((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefined

Legend item size accessor function.

# styleCSSProperties | undefined

Styles to be applied to the legend container.

#<Quantile />

# scaleScalerequired

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

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

Optional render function override.

# classNamestring | undefined

Classname to be applied to legend container.

# direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of the legend itself.

# domainScaleInput<Scale>[] | undefined

Legend domain.

# fill((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | undefined) | undefined

Legend item fill accessor function.

# itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of legend items.

# itemMarginstring | number | undefined

Margin of legend items.

# labelAlignstring | undefined

Flex-box alignment of legend item labels.

# labelDelimiterstring | undefined

Default -

# labelFlexstring | number | undefined

Flex-box flex of legend item labels.

# labelFormatLabelFormatter<ScaleInput<Scale>> | undefined

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

# labelMarginstring | number | undefined

Margin of legend item labels.

# labelTransformLabelFormatterFactory<Scale> | undefined

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

# legendLabelPropsPartial<LegendLabelProps> | undefined

Additional props to be set on LegendLabel.

# shape"line" | "rect" | "circle" | FC<RenderShapeProvidedProps<ScaleInput<Scale>, ReturnType<Scale>>> | ComponentClass<...> | undefined

Legend shape string preset or Element or Component.

# shapeHeightstring | number | undefined

Height of the legend shape.

# shapeMarginstring | number | undefined

Margin of the legend shape.

# shapeStyle((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefined

Styles applied to legend shapes.

# shapeWidthstring | number | undefined

Width of the legend shape.

# size((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefined

Legend item size accessor function.

# styleCSSProperties | undefined

Styles to be applied to the legend container.

#<Size />

# scaleScalerequired

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

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

Optional render function override.

# classNamestring | undefined

Classname to be applied to legend container.

# direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of the legend itself.

# domainScaleInput<Scale>[] | undefined

Legend domain.

# fill((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | undefined) | undefined

Legend item fill accessor function.

# itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of legend items.

# itemMarginstring | number | undefined

Margin of legend items.

# labelAlignstring | undefined

Flex-box alignment of legend item labels.

# labelFlexstring | number | undefined

Flex-box flex of legend item labels.

# labelFormatLabelFormatter<ScaleInput<Scale>> | undefined

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

# labelMarginstring | number | undefined

Margin of legend item labels.

# labelTransformLabelFormatterFactory<Scale> | undefined

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

# legendLabelPropsPartial<LegendLabelProps> | undefined

Additional props to be set on LegendLabel.

# shape"line" | "rect" | "circle" | FC<RenderShapeProvidedProps<ScaleInput<Scale>, ReturnType<Scale>>> | ComponentClass<...> | undefined

Legend shape string preset or Element or Component.

# shapeHeightstring | number | undefined

Height of the legend shape.

# shapeMarginstring | number | undefined

Margin of the legend shape.

# shapeStyle((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefined

Styles applied to legend shapes.

# shapeWidthstring | number | undefined

Width of the legend shape.

# size((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefined

Legend item size accessor function.

# stepsnumber | undefined

Default 5

# styleCSSProperties | undefined

Styles to be applied to the legend container.

#<Threshold />

# scaleScalerequired

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

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

Optional render function override.

# classNamestring | undefined

Classname to be applied to legend container.

# direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of the legend itself.

# domainScaleInput<Scale>[] | undefined

Legend domain.

# fill((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | undefined) | undefined

Legend item fill accessor function.

# itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of legend items.

# itemMarginstring | number | undefined

Margin of legend items.

# labelAlignstring | undefined

Flex-box alignment of legend item labels.

# labelDelimiterstring | undefined

Default to

# labelFlexstring | number | undefined

Flex-box flex of legend item labels.

# labelFormatLabelFormatter<ScaleInput<Scale>> | undefined

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

# labelLowerstring | undefined

Default Less than

# labelMarginstring | number | undefined

Margin of legend item labels.

# labelTransformLabelFormatterFactory<Scale> | undefined

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

# labelUpperstring | undefined

Default More than

# legendLabelPropsPartial<LegendLabelProps> | undefined

Additional props to be set on LegendLabel.

# shape"line" | "rect" | "circle" | FC<RenderShapeProvidedProps<ScaleInput<Scale>, ReturnType<Scale>>> | ComponentClass<...> | undefined

Legend shape string preset or Element or Component.

# shapeHeightstring | number | undefined

Height of the legend shape.

# shapeMarginstring | number | undefined

Margin of the legend shape.

# shapeStyle((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefined

Styles applied to legend shapes.

# shapeWidthstring | number | undefined

Width of the legend shape.

# size((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefined

Legend item size accessor function.

# styleCSSProperties | undefined

Styles to be applied to the legend container.

#<Legend />

# scaleScalerequired

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

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

Optional render function override.

# classNamestring | undefined

Classname to be applied to legend container.

# direction"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of the legend itself.

Default column

# domainScaleInput<Scale>[] | undefined

Legend domain.

# fill((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | undefined) | undefined

Legend item fill accessor function.

# itemDirection"inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | undefined

Flex direction of legend items.

Default row

# itemMarginstring | number | undefined

Margin of legend items.

Default 0

# labelAlignstring | undefined

Flex-box alignment of legend item labels.

Default left

# labelFlexstring | number | undefined

Flex-box flex of legend item labels.

Default 1

# labelFormatLabelFormatter<ScaleInput<Scale>> | undefined

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

# labelMarginstring | number | undefined

Margin of legend item labels.

Default 0 4px

# labelTransformLabelFormatterFactory<Scale> | undefined

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

# legendLabelPropsPartial<LegendLabelProps> | undefined

Additional props to be set on LegendLabel.

# shape"line" | "rect" | "circle" | FC<RenderShapeProvidedProps<ScaleInput<Scale>, ReturnType<Scale>>> | ComponentClass<...> | undefined

Legend shape string preset or Element or Component.

# shapeHeightstring | number | undefined

Height of the legend shape.

Default 15

# shapeMarginstring | number | undefined

Margin of the legend shape.

Default 2px 4px 2px 0

# shapeStyle((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => CSSProperties) | undefined

Styles applied to legend shapes.

# shapeWidthstring | number | undefined

Width of the legend shape.

Default 15

# size((label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale> | undefined; }) => string | number | undefined) | undefined

Legend item size accessor function.

# styleCSSProperties | undefined

Styles to be applied to the legend container.