Skip to content
Patternfly Logo

Themed charts

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

Green

This demonstrates how to apply basic theme colors.

Line chart exampleAverage number of pets2015201620172018258CatsDogsBirdsMice

Multi-color (ordered)

This demonstrates how to apply theme colors for ordered charts like bar, donut, pie, and stack.

Donut chart exampleAverage number of petsCats: 35Dogs: 55Birds: 10100Pets

Multi color (unordered)

This demonstrates how to apply theme colors for unordered charts like area, line, and sparkline.

Area chart exampleAverage number of pets201520162017201820192468CatsDogsBirds

Custom color scale

This demonstrates an alternate way of applying a custom color scale and fill colors to individual charts.

Stack chart exampleAverage number of pets2015201620172018510152025CatsDogsBirdsMice

Custom stroke color

This demonstrates an alternate way of applying custom stroke and fill colors to a threshold chart.

Line chart exampleAverage number of pets2015201620172018258CatsBirdsMiceCats Threshold

Custom theme

This demonstrates custom theme properties, which may be applied across multiple charts.

Bar chart exampleAverage number of pets20152016201720182468CatsDogsBirdsMice

Documentation

Tips

  • See Victory's FAQ
  • The theme and themeColor props should be applied at the most top level component
  • Use ChartGroup to 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:


View source on GitHub