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 area charts - starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color.

Area 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 the content.

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

Note: Victory renders responsive containers, so the chart's width and height props 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.