React

Stack chart

Stacked bar charts describe totals while allowing a degree of internal breakdown of the data. They can be illustrated vertically and horizontally depending on available space and the data being described.

IntroductionExamplesDocumentationProps

Introduction

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

PatternFly React charts 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.

Learn to build a stack chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.

Start course

Examples

Basic with right aligned legend

Stack chart exampleAverage number of pets2015201620172018510152025CatsDogsBirdsMice

Horizontal with bottom aligned legend

Stack chart exampleAverage number of pets2015201620172018510152025CatsDogsBirdsMice

Multi-color (ordered) horizontal with bottom aligned legend

This demonstrates an alternate way of applying tooltips using data labels

Stack chart exampleAverage number of pets2015201620172018510152025CatsDogsBirdsMice

Monthly data with responsive container

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

Monthly Stack ChartStack Chart with monthly metric dataAug. 3051015SocketsCoresNodes

Multi-color (unordered) responsive container

Area chart exampleAverage number of petsSundayMondayTuesdayWednesdayThursdayFridaySaturday51015202530CatsBirdsDogs

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 documention 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:

Props

Chart properties
NameTypeRequiredDefaultDescription
allowZoombooleanfalseSpecifies the zoom capability of the container component. A value of true allows the chart to zoom in and out. Zoom events are controlled by scrolling. When zoomed in, panning events are controlled by dragging. By default this value is set to false. Note: Only compatible with charts that dis