Difficulty: beginner
Estimated Time: 10 minutes

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

Intro to PatternFly React bullet chart components

Step 1 of 7

Introducing PatternFly React bullet 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 bullet chart together - starting with a simple chart, adding qualitative ranges, primary comparative measures, a comparative warning measure, tooltips, 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