Difficulty: beginner
Estimated Time: 10 minutes

PatternFly React charts are based on the Victory chart library, along with additional functionality, custom components, and theming for PatternFly.

PatternFly provides a collection of React-based components you can use to build patterns with consistent markup, styling, and behavior.

PatternFly React charts are composed using separate components, so features are more easily customizable. This course covers PatternFly line chart - starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color.

Line chart

Step 1 of 7

Customize with CSS

Begin by adding a CSS selector to define the chart size.

Katacoda is setting up a new React application. Begin coding once the server starts and "Welcome to PatternFly" is visible on the lower pane.

1) Navigate to the src folder and open src/app.css

2) Add CSS to define the overall chart size.

Copy the following code into the app.css file, replacing all of the content.

.chart-container {
  height: 250px;
  width: 600px;

Note: Victory renders responsive containers, so the chart's width and height properties do not determine the width and height of the chart in number of pixels. Instead, they define an aspect ratio for the chart.

The exact number of pixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set to the same width to maintain the aspect ratio.