React

Bullet chart

IntroductionExamplesDocumentationProps

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 bullet chart using a Katacoda tutorial 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 React chart components together to build a consistent user experience.

Start course

Examples

Basic

Bullet chart exampleStorage capacity0100255075

Segmented primary measure

Bullet chart exampleStorage capacity0100255075Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Responsive container with bottom aligned legend

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

Bullet chart exampleStorage capacity0100255075Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Bullet chart with primary measure dot

Bullet chart exampleStorage capacity0100255075Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

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

Bullet chart exampleStorage capacity075150Text labelMeasure detailsMeasure 1Measure 2WarningErrorRange 1Range 2

Primary measure outside range

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

Bullet chart exampleStorage capacity501256988107Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Negative primary measure

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

Bullet chart exampleStorage capacity-257502550Text labelMeasure detailsMeasure 1WarningRange 1Range 2

Reversed with right aligned legend

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

Bullet chart exampleStorage capacity-1000-75-50-25Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2

Negative and positive primary measures

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

Bullet chart exampleStorage capacity-257502550Text labelMeasure detailsMeasure 1Measure 2Measure 3Measure 4WarningRange 1Range 2

Vertical with segmented primary measure

Bullet chart exampleStorage capacity0100255075Text labelMeasure detailsMeasure 1Measure 2WarningRange 1Range 2