Legends
Legends can be added to any chart by nesting a VictoryLegend
component within VictoryChart
. The legend can be styled and positioned using props.
Basic
See the full API here.
Live View
Loading...
Live Editor
<VictoryChart domainPadding={{ x: 30 }} theme={VictoryTheme.clean} > <VictoryLegend x={125} y={20} title="Pets" data={[ { name: "Dogs", symbol: { fill: "tomato" }, }, { name: "Cats", symbol: { fill: "orange" }, }, { name: "Rabbits", symbol: { fill: "gold" }, }, ]} /> <VictoryBar data={[ { x: "Dogs", y: 6, fill: "tomato", }, { x: "Cats", y: 4, fill: "orange", }, { x: "Rabbits", y: 2, fill: "gold", }, ]} style={{ data: { fill: ({ datum }) => datum.fill, }, }} /> </VictoryChart>
Legend - Symbols
Victory includes basic symbols for legend items. The symbol
prop can be used to specify the symbol type and fill color.
Live View
Loading...
Live Editor
<VictoryLegend x={125} y={20} title="Legend" data={[ { name: "Dogs", symbol: { fill: "tomato", type: "circle", size: 8, }, }, { name: "Cats", symbol: { fill: "orange", type: "diamond", size: 8, }, }, { name: "Rabbits", symbol: { fill: "gold", type: "star", size: 8, }, }, ]} theme={VictoryTheme.clean} />
Legend - Custom Icons
Victory supports custom icons for legend items such as React components from SVG libraries like react-icons.
Live View
Loading...
Live Editor
const { FaSun, FaMoon } = reactIconsFa; const CustomMoon = (props) => ( <FaMoon fill={props.datum.fill} x={props.x - 7} y={props.y - 7} size={15} /> ); function App() { return ( <VictoryLegend x={125} y={20} title="Legend" data={[ { name: "One", fill: "orange", }, { name: "Two", fill: "blue", }, { name: "Three" }, ]} dataComponent={<CustomMoon />} theme={VictoryTheme.clean} /> ); } render(<App />);
Legend - Orientation
The legend also supports vertical orientations.
Live View
Loading...
Live Editor
<VictoryLegend x={25} y={75} title="Legend" orientation="vertical" centerTitle={false} data={[ { name: "Dogs", symbol: { fill: "tomato", type: "circle", size: 8, }, }, { name: "Cats", symbol: { fill: "orange", type: "diamond", size: 8, }, }, { name: "Rabbits", symbol: { fill: "gold", type: "star", size: 8, }, }, ]} theme={VictoryTheme.clean} />
Legend - Columns
The legend can be displayed in multiple rows by setting the itemsPerRow
prop.
Live View
Loading...
Live Editor
<VictoryLegend x={100} y={20} title="Legend" itemsPerRow={3} data={[ { name: "Dogs", symbol: { fill: "tomato", type: "circle", size: 8, }, }, { name: "Cats", symbol: { fill: "orange", type: "diamond", size: 8, }, }, { name: "Rabbits", symbol: { fill: "gold", type: "star", size: 8, }, }, { name: "Snakes", symbol: { fill: "green", type: "triangleUp", size: 8, }, }, { name: "Turtles", symbol: { fill: "purple", type: "square", size: 8, }, }, { name: "Llamas", symbol: { fill: "lightblue", type: "triangleDown", size: 8, }, }, ]} theme={VictoryTheme.clean} />