Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

visx

@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

Size

2.5

7.5

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

Custom Legend

Legends

<Legend />

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>; }[]) => ReactNode

Optional render function override.

# classNamestring

Classname to be applied to legend container.

# directionFlexDirection

Flex direction of the legend itself.

# domainScaleInput<Scale>[]

Legend domain.

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

Legend item fill accessor function.

# itemDirectionFlexDirection

Flex direction of legend items.

# itemMarginReactText

Margin of legend items.

# labelAlignstring

Flex-box alignment of legend item labels.

# labelFlexReactText

Flex-box flex of legend item labels.

# labelFormatLabelFormatter<ScaleInput<Scale>>

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

# labelMarginReactText

Margin of legend item labels.

# labelTransformLabelFormatterFactory<Scale>

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

# legendLabelPropsPartial<LegendLabelProps>

Additional props to be set on LegendLabel.

# shapeLegendShape<ScaleInput<Scale>, ReturnType<Scale>>

Legend shape string preset or Element or Component.

# shapeHeightReactText

Height of the legend shape.

# shapeMarginReactText

Margin of the legend shape.

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

Styles applied to legend shapes.

# shapeWidthReactText

Width of the legend shape.

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

Legend item size accessor function.

# stepsnumber

Default 5

# styleCSSProperties

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>; }[]) => ReactNode

Optional render function override.

# classNamestring

Classname to be applied to legend container.

# directionFlexDirection

Flex direction of the legend itself.

# domainScaleInput<Scale>[]

Legend domain.

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

Legend item fill accessor function.

# itemDirectionFlexDirection

Flex direction of legend items.

# itemMarginReactText

Margin of legend items.

# labelAlignstring

Flex-box alignment of legend item labels.

# labelFlexReactText

Flex-box flex of legend item labels.

# labelFormatLabelFormatter<ScaleInput<Scale>>

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

# labelMarginReactText

Margin of legend item labels.

# labelTransformLabelFormatterFactory<Scale>

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

# legendLabelPropsPartial<LegendLabelProps>

Additional props to be set on LegendLabel.

# shapeLegendShape<ScaleInput<Scale>, ReturnType<Scale>>

Legend shape string preset or Element or Component.

# shapeHeightReactText

Height of the legend shape.

# shapeMarginReactText

Margin of the legend shape.

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

Styles applied to legend shapes.

# shapeWidthReactText

Width of the legend shape.

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

Legend item size accessor function.

# styleCSSProperties

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>; }[]) => ReactNode

Optional render function override.

# classNamestring

Classname to be applied to legend container.

# directionFlexDirection

Flex direction of the legend itself.

# domainScaleInput<Scale>[]

Legend domain.

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

Legend item fill accessor function.

# itemDirectionFlexDirection

Flex direction of legend items.

# itemMarginReactText

Margin of legend items.

# labelAlignstring

Flex-box alignment of legend item labels.

# labelDelimiterstring

Default -

# labelFlexReactText

Flex-box flex of legend item labels.

# labelFormatLabelFormatter<ScaleInput<Scale>>

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

# labelMarginReactText

Margin of legend item labels.

# labelTransformLabelFormatterFactory<Scale>

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

# legendLabelPropsPartial<LegendLabelProps>

Additional props to be set on LegendLabel.

# shapeLegendShape<ScaleInput<Scale>, ReturnType<Scale>>

Legend shape string preset or Element or Component.

# shapeHeightReactText

Height of the legend shape.

# shapeMarginReactText

Margin of the legend shape.

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

Styles applied to legend shapes.

# shapeWidthReactText

Width of the legend shape.

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

Legend item size accessor function.

# styleCSSProperties

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>; }[]) => ReactNode

Optional render function override.

# classNamestring

Classname to be applied to legend container.

# directionFlexDirection

Flex direction of the legend itself.

# domainScaleInput<Scale>[]

Legend domain.

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

Legend item fill accessor function.

# itemDirectionFlexDirection

Flex direction of legend items.

# itemMarginReactText

Margin of legend items.

# labelAlignstring

Flex-box alignment of legend item labels.

# labelFlexReactText

Flex-box flex of legend item labels.

# labelFormatLabelFormatter<ScaleInput<Scale>>

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

# labelMarginReactText

Margin of legend item labels.

# labelTransformLabelFormatterFactory<Scale>

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

# legendLabelPropsPartial<LegendLabelProps>

Additional props to be set on LegendLabel.

# shapeLegendShape<ScaleInput<Scale>, ReturnType<Scale>>

Legend shape string preset or Element or Component.

# shapeHeightReactText

Height of the legend shape.

# shapeMarginReactText

Margin of the legend shape.

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

Styles applied to legend shapes.

# shapeWidthReactText

Width of the legend shape.

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

Legend item size accessor function.

# stepsnumber

Default 5

# styleCSSProperties

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>; }[]) => ReactNode

Optional render function override.

# classNamestring

Classname to be applied to legend container.

# directionFlexDirection

Flex direction of the legend itself.

# domainScaleInput<Scale>[]

Legend domain.

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

Legend item fill accessor function.

# itemDirectionFlexDirection

Flex direction of legend items.

# itemMarginReactText

Margin of legend items.

# labelAlignstring

Flex-box alignment of legend item labels.

# labelDelimiterstring

Default to

# labelFlexReactText

Flex-box flex of legend item labels.

# labelFormatLabelFormatter<ScaleInput<Scale>>

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

# labelLowerstring

Default Less than

# labelMarginReactText

Margin of legend item labels.

# labelTransformLabelFormatterFactory<Scale>

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

# labelUpperstring

Default More than

# legendLabelPropsPartial<LegendLabelProps>

Additional props to be set on LegendLabel.

# shapeLegendShape<ScaleInput<Scale>, ReturnType<Scale>>

Legend shape string preset or Element or Component.

# shapeHeightReactText

Height of the legend shape.

# shapeMarginReactText

Margin of the legend shape.

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

Styles applied to legend shapes.

# shapeWidthReactText

Width of the legend shape.

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

Legend item size accessor function.

# styleCSSProperties

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>; }[]) => ReactNode

Optional render function override.

# classNamestring

Classname to be applied to legend container.

# directionFlexDirection

Flex direction of the legend itself.

Default column

# domainScaleInput<Scale>[]

Legend domain.

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

Legend item fill accessor function.

# itemDirectionFlexDirection

Flex direction of legend items.

Default row

# itemMarginReactText

Margin of legend items.

Default 0

# labelAlignstring

Flex-box alignment of legend item labels.

Default left

# labelFlexReactText

Flex-box flex of legend item labels.

Default 1

# labelFormatLabelFormatter<ScaleInput<Scale>>

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

# labelMarginReactText

Margin of legend item labels.

Default 0 4px

# labelTransformLabelFormatterFactory<Scale>

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

# legendLabelPropsPartial<LegendLabelProps>

Additional props to be set on LegendLabel.

# shapeLegendShape<ScaleInput<Scale>, ReturnType<Scale>>

Legend shape string preset or Element or Component.

# shapeHeightReactText

Height of the legend shape.

Default 15

# shapeMarginReactText

Margin of the legend shape.

Default 2px 4px 2px 0

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

Styles applied to legend shapes.

# shapeWidthReactText

Width of the legend shape.

Default 15

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

Legend item size accessor function.

# styleCSSProperties

Styles to be applied to the legend container.