patterns.md

id	Patterns
section	components
subsection	charts
propComponents	Chart ChartArea ChartAxis ChartBar ChartDonut ChartDonutThreshold ChartDonutUtilization ChartGroup ChartLegend ChartLegendTooltip ChartPie ChartScatter ChartStack ChartVoronoiContainer
hideDarkMode	true

import { cloneElement, createRef } from 'react'; import { useEffect, useRef, useState } from 'react'; import { Chart, ChartArea, ChartAxis, ChartBar, ChartDonut, ChartDonutThreshold, ChartDonutUtilization, ChartGroup, ChartLegend, ChartLegendTooltip, ChartPie, ChartScatter, ChartStack, 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 chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; import chart_color_teal_300 from '@patternfly/react-tokens/dist/esm/chart_color_teal_300'; import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300'; 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 pie chart

Bar chart

Stack chart

Donut chart

Donut utilization chart

This demonstrates how to hide a pattern for the static, unused portion of the donut utilization chart.

Donut utilization chart with thresholds

This demonstrates how to apply patterns to thresholds.

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.

Interactive legend with area chart

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

Custom pattern visibility

This demonstrates how to omit patterns from pie chart segments.

Custom color scale

This demonstrates how to apply a custom color scale to patterns.

Custom pattern defs

This demonstrates how to create custom patterns.

All patterns

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 ChartDonut props, see VictoryPie
• For ChartDonutThreshold props, see VictoryPie
• For ChartDonutUtilization props, see VictoryPie
• For ChartGroup props, see VictoryGroup
• For ChartLegend props, see VictoryLegend
• For ChartPie props, see VictoryPie
• For ChartScatter props, see VictoryScatter
• For ChartStack props, see VictoryStack
• For ChartVoronoiContainer props, see VictoryVoronoiContainer