Data utilities
Umbrella package
@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
<Legend />
APIs
#<Linear />
@visx/scale
or d3-scale
object used to generate the legend items.
(labels: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }[]) => ReactNode
Optional render function override.
string
Classname to be applied to legend container.
FlexDirection
Flex direction of the legend itself.
ScaleInput<Scale>[]
Legend domain.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => string
Legend item fill accessor function.
FlexDirection
Flex direction of legend items.
ReactText
Margin of legend items.
string
Flex-box alignment of legend item labels.
ReactText
Flex-box flex of legend item labels.
LabelFormatter<ScaleInput<Scale>>
Given a legend item and its index, returns an item label.
ReactText
Margin of legend item labels.
LabelFormatterFactory<Scale>
Given the legend scale and labelFormatter, returns a label with datum, index, value, and label.
Partial<LegendLabelProps>
Additional props to be set on LegendLabel.
LegendShape<ScaleInput<Scale>, ReturnType<Scale>>
Legend shape string preset or Element or Component.
ReactText
Height of the legend shape.
ReactText
Margin of the legend shape.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => CSSProperties
Styles applied to legend shapes.
ReactText
Width of the legend shape.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => ReactText
Legend item size accessor function.
number
Default 5
CSSProperties
Styles to be applied to the legend container.
#<Ordinal />
@visx/scale
or d3-scale
object used to generate the legend items.
(labels: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }[]) => ReactNode
Optional render function override.
string
Classname to be applied to legend container.
FlexDirection
Flex direction of the legend itself.
ScaleInput<Scale>[]
Legend domain.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => string
Legend item fill accessor function.
FlexDirection
Flex direction of legend items.
ReactText
Margin of legend items.
string
Flex-box alignment of legend item labels.
ReactText
Flex-box flex of legend item labels.
LabelFormatter<ScaleInput<Scale>>
Given a legend item and its index, returns an item label.
ReactText
Margin of legend item labels.
LabelFormatterFactory<Scale>
Given the legend scale and labelFormatter, returns a label with datum, index, value, and label.
Partial<LegendLabelProps>
Additional props to be set on LegendLabel.
LegendShape<ScaleInput<Scale>, ReturnType<Scale>>
Legend shape string preset or Element or Component.
ReactText
Height of the legend shape.
ReactText
Margin of the legend shape.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => CSSProperties
Styles applied to legend shapes.
ReactText
Width of the legend shape.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => ReactText
Legend item size accessor function.
CSSProperties
Styles to be applied to the legend container.
#<Quantile />
@visx/scale
or d3-scale
object used to generate the legend items.
(labels: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }[]) => ReactNode
Optional render function override.
string
Classname to be applied to legend container.
FlexDirection
Flex direction of the legend itself.
ScaleInput<Scale>[]
Legend domain.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => string
Legend item fill accessor function.
FlexDirection
Flex direction of legend items.
ReactText
Margin of legend items.
string
Flex-box alignment of legend item labels.
string
Default -
ReactText
Flex-box flex of legend item labels.
LabelFormatter<ScaleInput<Scale>>
Given a legend item and its index, returns an item label.
ReactText
Margin of legend item labels.
LabelFormatterFactory<Scale>
Given the legend scale and labelFormatter, returns a label with datum, index, value, and label.
Partial<LegendLabelProps>
Additional props to be set on LegendLabel.
LegendShape<ScaleInput<Scale>, ReturnType<Scale>>
Legend shape string preset or Element or Component.
ReactText
Height of the legend shape.
ReactText
Margin of the legend shape.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => CSSProperties
Styles applied to legend shapes.
ReactText
Width of the legend shape.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => ReactText
Legend item size accessor function.
CSSProperties
Styles to be applied to the legend container.
#<Size />
@visx/scale
or d3-scale
object used to generate the legend items.
(labels: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }[]) => ReactNode
Optional render function override.
string
Classname to be applied to legend container.
FlexDirection
Flex direction of the legend itself.
ScaleInput<Scale>[]
Legend domain.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => string
Legend item fill accessor function.
FlexDirection
Flex direction of legend items.
ReactText
Margin of legend items.
string
Flex-box alignment of legend item labels.
ReactText
Flex-box flex of legend item labels.
LabelFormatter<ScaleInput<Scale>>
Given a legend item and its index, returns an item label.
ReactText
Margin of legend item labels.
LabelFormatterFactory<Scale>
Given the legend scale and labelFormatter, returns a label with datum, index, value, and label.
Partial<LegendLabelProps>
Additional props to be set on LegendLabel.
LegendShape<ScaleInput<Scale>, ReturnType<Scale>>
Legend shape string preset or Element or Component.
ReactText
Height of the legend shape.
ReactText
Margin of the legend shape.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => CSSProperties
Styles applied to legend shapes.
ReactText
Width of the legend shape.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => ReactText
Legend item size accessor function.
number
Default 5
CSSProperties
Styles to be applied to the legend container.
#<Threshold />
@visx/scale
or d3-scale
object used to generate the legend items.
(labels: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }[]) => ReactNode
Optional render function override.
string
Classname to be applied to legend container.
FlexDirection
Flex direction of the legend itself.
ScaleInput<Scale>[]
Legend domain.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => string
Legend item fill accessor function.
FlexDirection
Flex direction of legend items.
ReactText
Margin of legend items.
string
Flex-box alignment of legend item labels.
string
Default to
ReactText
Flex-box flex of legend item labels.
LabelFormatter<ScaleInput<Scale>>
Given a legend item and its index, returns an item label.
string
Default Less than
ReactText
Margin of legend item labels.
LabelFormatterFactory<Scale>
Given the legend scale and labelFormatter, returns a label with datum, index, value, and label.
string
Default More than
Partial<LegendLabelProps>
Additional props to be set on LegendLabel.
LegendShape<ScaleInput<Scale>, ReturnType<Scale>>
Legend shape string preset or Element or Component.
ReactText
Height of the legend shape.
ReactText
Margin of the legend shape.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => CSSProperties
Styles applied to legend shapes.
ReactText
Width of the legend shape.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => ReactText
Legend item size accessor function.
CSSProperties
Styles to be applied to the legend container.
#<Legend />
@visx/scale
or d3-scale
object used to generate the legend items.
(labels: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }[]) => ReactNode
Optional render function override.
string
Classname to be applied to legend container.
FlexDirection
Flex direction of the legend itself.
Default column
ScaleInput<Scale>[]
Legend domain.
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => string
Legend item fill accessor function.
FlexDirection
Flex direction of legend items.
Default row
ReactText
Margin of legend items.
Default 0
string
Flex-box alignment of legend item labels.
Default left
ReactText
Flex-box flex of legend item labels.
Default 1
LabelFormatter<ScaleInput<Scale>>
Given a legend item and its index, returns an item label.
ReactText
Margin of legend item labels.
Default 0 4px
LabelFormatterFactory<Scale>
Given the legend scale and labelFormatter, returns a label with datum, index, value, and label.
Partial<LegendLabelProps>
Additional props to be set on LegendLabel.
LegendShape<ScaleInput<Scale>, ReturnType<Scale>>
Legend shape string preset or Element or Component.
ReactText
Height of the legend shape.
Default 15
ReactText
Margin of the legend shape.
Default 2px 4px 2px 0
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => CSSProperties
Styles applied to legend shapes.
ReactText
Width of the legend shape.
Default 15
(label: { datum: ScaleInput<Scale>; index: number; text: string; value?: ReturnType<Scale>; }) => ReactText
Legend item size accessor function.
CSSProperties
Styles to be applied to the legend container.