@vx/legend
Legends associate shapes and colors to data.
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
Components
API
<Legend />
# Legend.children<func>
# Legend.className<string>
# Legend.direction<string>
Default | 'column' |
# Legend.domain<array>
# Legend.fill<any>
Default | valueOrIdentity |
# Legend.itemDirection<string>
Default | 'row' |
# Legend.itemMargin<string>
Default | '0' |
# Legend.labelAlign<string>
Default | 'left' |
# Legend.labelFlex<string>
Default | '1' |
# Legend.labelFormat<func>
Default | valueOrIdentity |
# Legend.labelMargin<string>
Default | '0 4px' |
# Legend.labelTransform<func>
Default | function defaultTransform({ scale, labelFormat }) {
return (d, i) => {
return {
datum: d,
index: i,
text: ${labelFormat(d, i)} ,
value: scale(d)
};
};
} |
# Legend.scale<union(func|object)> required
# Legend.shape<any>
# Legend.shapeHeight<union(number|string)>
Default | 15 |
# Legend.shapeMargin<any>
Default | '2px 4px 2px 0' |
# Legend.shapeStyle<any>
# Legend.shapeWidth<union(number|string)>
Default | 15 |
# Legend.size<any>
Default | valueOrIdentity |
# Legend.style<any>
Default | { display: 'flex' } |
<LegendItem />
# LegendItem.alignItems<string>
Default | 'center' |
# LegendItem.children<any>
# LegendItem.display
Default | 'flex' |
# LegendItem.flexDirection<string>
Default | 'row' |
# LegendItem.margin<union(string|number)>
Default | '0' |
<LegendLabel />
# LegendLabel.align<string>
Default | 'left' |
# LegendLabel.children<any>
# LegendLabel.flex<union(string|number)>
Default | '1' |
# LegendLabel.label<any>
# LegendLabel.margin<union(string|number)>
Default | '5px 0' |
<LegendShape />
# LegendShape.fill<any>
# LegendShape.height<any>
# LegendShape.label<any>
# LegendShape.margin<any>
# LegendShape.shape<any>
Default | ShapeRect |
# LegendShape.shapeStyle<any>
# LegendShape.size<any>
# LegendShape.width<any>
<Linear />
# Linear.domain<array>
# Linear.labelFormat<func>
Default | x => x |
# Linear.labelTransform<func>
Default | function defaultTransform({ scale, labelFormat }) {
return (d, i) => {
return {
text: ${labelFormat(d, i)} ,
value: scale(d)
};
};
} |
# Linear.scale<func> required
# Linear.steps<number>
Default | 5 |
<Ordinal />
# Ordinal.domain<array>
# Ordinal.labelFormat<func>
Default | valueOrIdentity |
# Ordinal.labelTransform<func>
Default | function defaultTransform({ scale, labelFormat }) {
return (d, i) => {
return {
datum: d,
index: i,
text: ${labelFormat(d, i)} ,
value: scale(d)
};
};
} |
# Ordinal.scale<func> required
<Quantile />
# Quantile.domain<array>
# Quantile.labelDelimiter<string>
Default | '-' |
# Quantile.labelFormat<func>
Default | x => x |
# Quantile.labelTransform<func>
# Quantile.scale<func> required
<Size />
# Size.labelFormat
Default | x => x |
# Size.labelTransform
Default | function defaultTransform({ scale, labelFormat }) {
return (d, i) => {
return {
text: ${labelFormat(d, i)} ,
value: scale(d),
datum: d,
index: i
};
};
} |
# Size.steps
Default | 5 |
<Threshold />
# Threshold.domain<array>
# Threshold.labelDelimiter<string>
Default | 'to' |
# Threshold.labelFormat<func>
Default | x => x |
# Threshold.labelLower<string>
Default | 'Less than ' |
# Threshold.labelTransform<func>
# Threshold.labelUpper<string>
Default | 'More than ' |
# Threshold.scale<func> required
<Circle />
# Circle.fill<any>
# Circle.height<union(number|string)>
# Circle.style<object>
# Circle.width<union(number|string)>
<Rect />
# Rect.fill<any>
# Rect.height<union(number|string)>
# Rect.style<object>
# Rect.width<union(number|string)>