ChartStack.md

id	Stack chart
section	components
subsection	charts
propComponents	Chart ChartArea ChartBar ChartStack ChartTooltip
hideDarkMode	true

import { Chart, ChartArea, ChartAxis, ChartBar, ChartStack, ChartLegendTooltip, ChartThemeColor, ChartTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; import { useEffect, useRef, useState } from 'react';

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

Horizontal with bottom aligned legend

Multi-color (ordered) horizontal with bottom aligned legend

This demonstrates an alternate way of applying tooltips using data labels.

Monthly data with responsive container

Multi-color (unordered) responsive container

This demonstrates monthly data with a bottom aligned legend and responsiveness for mobile.

Documentation

Tips

• See Victory's FAQ
• For single data points or zero values, you may want to set the domain prop
• ChartLegend may be used as a standalone component, instead of using legendData
• Themes are inherited, so a default theme may override themeColor for a child component
• The theme and themeColor props should be applied at the most top level component

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 ChartStack props, see VictoryStack
• For ChartTooltip props, see VictoryTooltip