ChartLegend.md

id	Legends
section	components
subsection	charts
propComponents	Chart ChartArea ChartAxis ChartBar ChartBullet ChartDonut ChartGroup ChartLabel ChartLegend ChartLegendTooltip ChartLine ChartPie ChartScatter ChartVoronoiContainer
hideDarkMode	true

import { cloneElement, useEffect, useRef, useState } from 'react'; import { Chart, ChartArea, ChartAxis, ChartBar, ChartBullet, ChartContainer, ChartDonut, ChartGroup, ChartLabel, ChartLegend, ChartLegendTooltip, ChartLine, ChartPie, ChartScatter, ChartThemeColor, ChartVoronoiContainer, createContainer, getInteractiveLegendEvents, getInteractiveLegendItemStyles } from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; import '@patternfly/patternfly/patternfly-charts.css';

Introduction

Note: PatternFly React charts live in its own package at @patternfly/react-charts!

The examples below are based on the Victory chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.

Examples

Basic with right aligned legend

Bottom aligned legend

Responsive bottom-left aligned legend

This demonstrates a responsive legend which wraps when items are wider than its container.

Standalone legend

This demonstrates a standalone legend vs. using the legendData property.

Interactive legend

This demonstrates how to add an interactive legend using events such as onMouseOver, onMouseOut, and onClick.

Interactive legend with pie chart

This demonstrates how to add an interactive legend to a pie chart using events such as onMouseOver, onMouseOut, and onClick.

Legend tooltips

This demonstrates an approach for applying tooltips to a legend using a custom label component. These tooltips are keyboard navigable.

Legend links

This demonstrates an approach for applying links to a legend using a custom label component. These links are keyboard navigable.

Legend layout

This demonstrates an approach for applying a different legend layout and styles using a custom label component.

Documentation

Tips

• See Victory's FAQ
• ChartLegend may be used as a standalone component, instead of using legendData

Note

Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the components used in the examples above, Victory pass-thru props are also documented here:

• For Chart props, see VictoryChart
• For ChartArea props, see VictoryArea
• For ChartAxis props, see VictoryAxis
• For ChartBar props, see VictoryBar
• For ChartBullet props, see VictoryBar
• For ChartDonut props, see VictoryPie
• For ChartGroup props, see VictoryGroup
• For ChartLabel props, see VictoryLabel
• For ChartLegend props, see VictoryLegend
• For ChartLine props, see VictoryLine
• For ChartPie props, see VictoryPie
• For ChartScatter props, see VictoryScatter
• For ChartVoronoiContainer props, see VictoryVoronoiContainer