ChartDonutUtilization.md

id	Donut utilization chart
section	components
subsection	charts
propComponents	ChartDonutThreshold ChartDonutUtilization
hideDarkMode	true

import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory'; import { useEffect, useState } from 'react';

Introduction

Note: PatternFly React charts live in its own package at @patternfly/react-charts!

The examples below 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.

Donut utilization examples

Basic

Right aligned legend

Inverted with right aligned legend

Right aligned vertical legend

Bottom aligned legend

Small

Small with right aligned legend

Small with bottom aligned subtitle

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

Small with right aligned subtitle

Donut utilization threshold examples

Static thresholds

Static thresholds with right aligned legend

Inverted static thresholds with right aligned legend

Static thresholds with custom legend

Static thresholds with bottom aligned legend

Small with static thresholds

Small with static thresholds and right aligned legend

Small with subtitle

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

Small with thresholds and right aligned subtitle

Documentation

Tips

• See Victory's FAQ
• For single data points or zero values, you may want to set the domain prop
• ChartLegend may be used as a standalone component, instead of using legendData

Note

Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the components used in the examples above, Victory pass-thru props are also documented here:

• For ChartDonutThreshold props, see VictoryPie
• For ChartDonutUtilization props, see VictoryPie