ChartBullet.md

id	Bullet chart
section	components
subsection	charts
propComponents	ChartAxis ChartBullet ChartContainer
hideDarkMode	true

import { createRef } from 'react'; import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor } from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core';

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.

Examples

Basic

Segmented primary measure

Responsive container with bottom aligned legend

This demonstrates a responsive legend which wraps when items are wider than its container.

Primary measure dot

Error measure and custom axis ticks

This is a green bullet chart with error measure and custom axis ticks with 3 legend items per row.

Primary measure outside range

This is a yellow bullet chart with primary measure greater than max range.

Negative primary measure

This bullet chart with negative primary measure is for measures considered to be bad when they are low.

Reversed with right aligned legend

This reversed bullet chart with right aligned legend is for measures considered to be good when they are low.

Negative and positive primary measures

This bullet chart with negative and positive primary measures has 4 legend items per row.

Vertical with segmented primary measure

Vertical primary measure outside max range

Custom labels

Custom size

Horizontal group

Vertical group

Horizontal group with title

Vertical group with title

Documentation

Tips

• See Victory's FAQ
• 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 ChartAxis props, see VictoryAxis
• For ChartBullet props, see VictoryBar
• For ChartContainer props, see VictoryContainer