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.
Examples
Multi-color (ordered)
This demonstrates how to apply theme colors for ordered charts like bar, donut, pie, and stack.
Multi color (unordered)
This demonstrates how to apply theme colors for unordered charts like area, line, and sparkline.
Custom color scale
This demonstrates an alternate way of applying a custom color scale and fill colors to individual charts.
Custom stroke color
This demonstrates an alternate way of applying custom stroke and fill colors to a threshold chart.
Custom theme
This demonstrates custom theme properties, which may be applied across multiple charts.
Documentation
Tips
- See Victory's FAQ
- The
themeandthemeColorprops should be applied at the most top level component - Use
ChartGroupto apply theme color scales and other properties to multiple components
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:
- For theme props, see VictoryTheme
View source on GitHub
