sparkline.md

id	Sparkline chart
section	charts
propComponents	ChartArea ChartContainer ChartGroup ChartLabel ChartVoronoiContainer
hideDarkMode	true

import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; import { useEffect } 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.

Examples

Basic

Green

This demonstrates an alternate way of applying tooltips using CSS overflow

Documentation

Tips

• See Victory's FAQ
• For single data points or zero values, you may want to set the domain prop
• Use ChartGroup in place of Chart when an axis and labels are not desired
• Themes are inherited, so a default theme may override themeColor for a child component
• The theme and themeColor props should be applied at the most top level component

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 ChartArea props, see VictoryArea
• For ChartGroup props, see VictoryGroup
• For ChartLabel props, see VictoryLabel
• For ChartVoronoiContainer props, see VictoryVoronoiContainer