VictoryLegend
For examples of VictoryLegend in action, visit the Chart Legends guide.
Inherited Props
VictoryDatableProps
- dataoverridden
- dataComponentoverridden
- xoverridden
- yoverridden
- y0not-implemented
VictorySingleLabelableProps
VictoryCommonProps
- containerComponentoverridden
Component Props
borderComponent
The borderComponent prop takes a component instance which will be responsible for rendering a border around the legend. The new element created from the passed borderComponent will be provided with the following properties calculated by VictoryLegend: x, y, width, height, and style. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a borderComponent is not provided, VictoryLegend will use its default Border component. Please note that the default width and height calculated for the border component is based on approximated text measurements, and may need to be adjusted.
borderComponent={<Border width={300}/>}
borderPadding
The borderPadding specifies the amount of padding that should be added between the legend items and the border. This prop may be given as a number, or as an object with values specified for top, bottom, left, and right. Please note that the default width and height calculated for the border component is based on approximated text measurements, so padding may need to be adjusted.
borderPadding={{ top: 20, bottom: 10 }}
centerTitle
The centerTitle boolean prop specifies whether a legend title should be centered.
<VictoryLegend x={125} y={10} title="Legend" centerTitle orientation="horizontal" gutter={20} style={{ border: { stroke: "black" }, title: { fontSize: 20 }, }} data={[ { name: "One" }, { name: "Two" }, { name: "Three" }, ]} />
containerComponent
VictoryLegend uses the standard containerComponent prop. Read about it here
VictoryLegend only works with the VictoryContainer component
containerComponent={<VictoryContainer responsive={false}/>}
data
Specify data via the data prop. VictoryLegend expects data as an array of objects with name (required), symbol, and labels properties. The data prop must be given as an array. The symbol rendered may be changed by altering the type property of the symbol object. Valid types include: circle", "diamond", "plus", "minus", "square", "star", "triangleDown", and "triangleUp". If you want to use SVG icons from a custom component or an SVG based icon library like react-icons use the dataComponent property.
<VictoryLegend x={125} y={50} orientation="horizontal" gutter={20} style={{ border: { stroke: "black" }, }} data={[ { name: "One", symbol: { fill: "tomato", type: "star", }, }, { name: "Two", symbol: { fill: "orange" }, labels: { fill: "orange" }, }, { name: "Three", symbol: { fill: "gold" }, }, ]} />
dataComponent
VictoryLegend uses the standard dataComponent prop. Read about it here
VictoryLegend supplies the following props to its dataComponent: data, datum, events, index, x, y, size, style, and symbol. VictoryLegend renders a Point component by default.
dataComponent={<Point events={{ onClick: handleClick }}/>}
An example of using Custom icons as dataComponent in VictoryLegend.
const { FaSun } = reactIconsFa; const CustomIcon = (props) => { return ( <FaSun fill={ props?.style?.fill || "green" } x={props.x - 7} y={props.y - 7} size={15} /> ); }; function App() { return ( <VictoryLegend orientation={"horizontal"} x={65} y={50} data={[ { name: "One", symbol: { fill: "orange" }, }, { name: "Two", symbol: { fill: "blue" }, }, { name: "Three" }, ]} dataComponent={<CustomIcon />} /> ); } render(<App />);
An example of using multiple Custom icons as dataComponent in VictoryLegend.
const CustomMultipleIcon = (props) => { const { x, y, datum } = props; const Icon = reactIconsFa[datum.icon]; return ( <Icon x={x - 7} y={y - 7} size={15} /> ); }; function App() { return ( <VictoryLegend orientation={"horizontal"} x={65} y={50} data={[ { name: "One", icon: "FaMoon" }, { name: "Two", icon: "FaSun" }, { name: "Three", icon: "FaStar", }, ]} dataComponent={ <CustomMultipleIcon /> } /> ); } render(<App />);
eventKey
VictoryLegend uses the standard eventKey prop to specify how event targets are addressed. This prop is not commonly used. Read about the eventKey prop in more detail here
events
VictoryLegend uses the standard events prop. Read about it here
See the Events Guide for more information on defining events.
<div> <h3>Click Me</h3> <VictoryLegend events={[ { target: "data", eventHandlers: { onClick: () => { return [ { target: "data", mutation: (props) => { const fill = props.style && props.style.fill; return fill === "#c43a31" ? null : { style: { fill: "#c43a31", }, }; }, }, { target: "labels", mutation: (props) => { return props.text === "clicked" ? null : { text: "clicked", }; }, }, ]; }, }, }, ]} data={[ { name: "One" }, { name: "Two" }, { name: "Three" }, ]} /> </div>
gutter
The gutter prop defines the number of pixels between legend columns. This prop may be given as a number, or as an object with values specified for "left" and "right" gutters. To set spacing between rows, use the rowGutter prop.
<VictoryLegend x={125} y={50} orientation="horizontal" gutter={50} style={{ border: { stroke: "black" }, }} data={[ { name: "One" }, { name: "Two" }, { name: "Three" }, ]} />
itemsPerRow
The itemsPerRow prop determines how many items to render in each row of a horizontal legend, or in each column of a vertical legend. This prop should be given as an integer. When this prop is not given, legend items will be rendered in a single row or column.
<VictoryLegend x={125} y={50} orientation="horizontal" itemsPerRow={3} gutter={20} style={{ border: { stroke: "black" }, }} data={[ { name: "One" }, { name: "Two" }, { name: "Three" }, { name: "Four" }, ]} />
orientation
The orientation prop takes a string that defines whether legend data are displayed in a row or column. When orientation is "horizontal", legend items will be displayed in rows. When orientation is "vertical", legend items will be displayed in columns.
rowGutter
The rowGutter prop defines the number of pixels between legend rows. This prop may be given as a number, or as an object with values specified for "top" and "bottom" gutters. To set spacing between columns, use the gutter prop.
<VictoryLegend x={125} y={50} orientation="vertical" gutter={20} rowGutter={{ top: 0, bottom: 10 }} style={{ border: { stroke: "black" }, }} data={[ { name: "One" }, { name: "Two" }, { name: "Three" }, ]} />
style
The style prop defines the style of the component. The style prop should be given as an object with styles defined for parent, data, labels, title, and border. Any valid svg styles are supported, but width, height, and padding should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for data, and labels style properties, and they will be evaluated with the props corresponding to each element.
note: When a component is rendered as a child of another Victory component, or within a custom <svg> element with standalone={false} parent styles will be applied to the enclosing <g> tag. Many styles that can be applied to a parent <svg> will not be expressed when applied to a <g>.
note: custom angle and verticalAnchor properties may be included in labels and title styles.
default (provided by default theme): See grayscale theme for more detail
<VictoryLegend x={125} y={50} title="Legend" centerTitle orientation="horizontal" gutter={20} style={{ data: { fill: "blue", stroke: "navy", strokeWidth: 2, }, labels: { fill: "navy" }, border: { stroke: "black" }, title: { fontSize: 20 }, }} data={[ { name: "One", symbol: { fill: "tomato" }, }, { name: "Two", labels: { fill: "orange" }, }, { name: "Three" }, ]} />
symbolSpacer
The symbolSpacer prop defines the number of pixels between data components and label components. When a symbolSpacer is not defined, spacing is calculated based on symbol size and label font size.
<VictoryLegend x={125} y={50} orientation="horizontal" symbolSpacer={5} gutter={20} data={[ { name: "One" }, { name: "Two" }, { name: "Three" }, ]} />
title
The title prop specifies a title to render with the legend. This prop should be given as a string, or an array of strings for multi-line titles.
<VictoryLegend x={125} y={50} title="Legend Title" gutter={20} orientation="horizontal" style={{ border: { stroke: "black" }, title: { fontSize: 20 }, }} data={[ { name: "One" }, { name: "Two" }, { name: "Three" }, ]} />
titleComponent
The titleComponent prop takes a component instance which will be used to render a title for the component. The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, data, datum, verticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If labelComponent is omitted, a new VictoryLabel will be created with the props described above.
<VictoryLegend x={125} y={50} title={["Legend Title", "subtitle"]} gutter={20} orientation="horizontal" style={{ border: { stroke: "black" }, }} titleComponent={ <VictoryLabel style={[ { fontSize: 20 }, { fontSize: 12 }, ]} /> } data={[ { name: "One" }, { name: "Two" }, { name: "Three" }, ]} />
titleOrientation
The titleOrientation prop specifies where the title should be rendered in relation to the rest of the legend. Possible values for this prop are "top", "bottom", "left", and "right".
<VictoryLegend x={50} y={50} title="Legend Title" titleOrientation="left" gutter={20} orientation="horizontal" style={{ border: { stroke: "black" }, title: { fontSize: 20 }, }} data={[ { name: "One" }, { name: "Two" }, { name: "Three" }, ]} />
x
The x prop defines the x coordinate corresponding to the upper left corner of the legend.
y
The y prop defines the y coordinate corresponding to the upper left corner of the legend.