Skip to content

ChartBar.md

Latest commit

 

History

History
76 lines (49 loc) · 3.06 KB

ChartBar.md

File metadata and controls

76 lines (49 loc) · 3.06 KB
id Bar chart
section components
subsection charts
propComponents
Chart
ChartAxis
ChartBar
ChartGroup
ChartLabel
ChartVoronoiContainer
hideDarkMode true

import { Chart, ChartAxis, ChartBar, ChartGroup, ChartLabel, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; import { VictoryZoomContainer } from 'victory-zoom-container'; import t_global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100'; import t_global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_info_100'; import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100';

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 with right aligned legend



Purple with bottom aligned legend


This demonstrates an alternate way of applying tooltips using data labels.




Multi-color (ordered) with bottom-left aligned legend


This demonstrates zoom for both the x and y axis.




Single with right aligned legend




Alerts timeline


A gnatt-like chart using y and y0 data properties for alert start/end dates




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
    • 

  • The theme and themeColor props should be applied at the most top level component
    • 

  • Use ChartGroup to apply theme color scales and other properties to multiple components
    • 



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: