Difficulty: beginner
Estimated Time: 12 minutes

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

Donut utilization chart

Step 1 of 9

Introducing PatternFly React donut utilization 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 donut utilization chart together - starting with a simple chart, adding thresholds, tooltips, 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