Difficulty: beginner
Estimated Time: 10 minutes

In this scenario, you will learn how to use PatternFly React sparkline chart components for the first time.

Sparkline chart

Step 1 of 6

Introducing PatternFly React sparkline 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.

PatternFly React charts are composed using separate components, so features are more easily customizable. In this course, we're going to build a PatternFly sparkline chart together - starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use PatternFly React chart components together to build a consistent user experience.

The image below is what we'll end up with when we are done.

Completed chart component