Charts overview

Note: Charts are only available in React in their own package @patternfly/react-charts.

A chart visualizes data in an application, helping users understand large or complex data sets. The type of chart you use will depend on your use case and the data you need to display. Charts are currently only available in React.

The majority of PatternFly charts are based on the Victory chart library, with a couple of charts based instead on the Apache Echarts library. We add functionality, customization, and theming to align charts with our design system.

To get started:

1. Install the @patternfly/react-charts package by following the README instructions.

2. To use a particular chart in your project, import your desired option from the respective charts library:

   • Victory:

     import { Chart, ChartAxis, ChartGroup, ChartLine, ChartVoronoiContainer } from '@patternfly/react-charts/victory';

   • Echarts:

     import { Charts } from '@patternfly/react-charts/echarts'; import { LineChart } from 'echarts/charts';

Default styles in the @patternfly/react-charts package are aligned with our light theme. Charts work with PatternFly's light theme by default—you don't need to import anything else.

To support dark-themed charts, you must:

1. Import the @patternfly/patternfly package, so that you can use our global tokens.
2. Import the stylesheet that contains dark theme styles by adding this line before importing your main application component: import '@patternfly/patternfly/patternfly-charts.css';
   • Once you import this file, you'll have access to all chart variables. Beyond dark theme, you could use these variables to match the style of other UI elements to your chart styles.

To display the list of all available chart tokens, filter for "charts" in the design tokens table.

To adjust the visual presentation of your chart, refer to the following guidelines for how to utilize:

• Chart design guidelines: General overview of chart elements and types, with guidelines for usage.
• Colors: Examples and guidance for applying themes and combining colors within charts.
• Patterns: Examples of using patterns within charts, like stripes and lines.
• Tooltips: Examples and guidance for adding tooltips to charts.