React

Donut utilization chart

IntroductionDonut utilization examplesDonut utilization threshold examplesDocumentationProps

Introduction

Note: PatternFly React charts live in its own package at @patternfly/react-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.

Learn to build a donut utilization chart using a Katacoda tutorial starting with a simple chart, adding thresholds, tooltips, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience.

Start course

Donut utilization examples

Basic

Donut utilization chart exampleStorage capacity75%of 100 GBps

Right aligned legend

Donut utilization chart exampleStorage capacityStorage capacity: 0%Unused0%of 100 GBps

Inverted with right aligned legend

Donut utilization chart exampleStorage capacityStorage capacity: 100%Unused100%of 100 GBps

Right aligned vertical legend

Donut utilization chart exampleStorage capacityStorage capacity: 0%Unused0%of 100 GBps

Bottom aligned legend

Donut utilization chart exampleStorage capacityStorage capacity: 45%Unused45%of 100 GBps

Small

Donut utilization chart exampleStorage capacity75%of 100 GBps

Small with right aligned legend

Donut utilization chart exampleStorage capacityStorage capacity: 0%Unused0%of 100 GBps

Small with bottom aligned subtitle

This is a small donut utilization chart with bottom aligned legend and right aligned subtitle

Donut utilization chart exampleStorage capacityStorage capacity: 45%Unused45%of 100 GBps

Small with right aligned subtitle

Donut utilization chart exampleStorage capacityStorage capacity: 45%Unused45%of 100 GBps

Donut utilization threshold examples

Static thresholds

Donut utilization chart with static threshold exampleStorage capacity45%of 100 GBps

Static thresholds with right aligned legend

Donut utilization chart with static threshold exampleStorage capacityStorage capacity: 0%Warning threshold at 60%Danger threshold at 90%0%of 100 GBps

Inverted static thresholds with right aligned legend

Donut utilization chart with static threshold exampleStorage capacityStorage capacity: 100%Warning threshold at 60%Danger threshold at 20%100%of 100 GBps

Static thresholds with custom legend

Donut utilization chart with static threshold exampleStorage capacityStorage capacity: 0%Warning threshold at 60%Danger threshold at 90%0%of 100 GBps