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
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.
This demonstrates monthly data with a bottom aligned legend and responsiveness for mobile
- See Victory's FAQ
- For single data points or zero values, you may want to set the
ChartLegendmay be used as a standalone component, instead of using
- Themes are inherited, so a default theme may override
themeColorfor a child component
themeColorprops should be applied at the most top level component
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:
|allowZoom||boolean||false||Specifies 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|