Area chart

An area chart is used to display metrics for continuous data. It offers an area fill for visual emphasis that functions to indicate the cumulative data.

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 an area chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis 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 with right aligned legend

Area chart exampleAverage number of pets201520162017201820192468CatsDogsBirds

Cyan with bottom aligned legend and axis label

Area chart exampleAverage number of petsYears201520162017201820192468CatsDogsBirds

Multi-color (unordered) bottom-left aligned legend and responsive container

Area chart exampleAverage number of pets201520162017201820192468CatsDogsBirds

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 documention 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:

Props

Chart properties
NameTypeRequiredDefaultDescription
allowZoombooleanfalse
animateAnimatePropTypeInterface
ariaDescstring
ariaTitlestring
childrenReact.ReactNode
containerComponentReact.ReactElement<any>allowZoom ? <VictoryZoomContainer /> : <ChartContainer />
domainDomainPropType
domainPaddingDomainPaddingPropType
endAnglenumber
eventKeyStringOrNumberOrCallback
eventsEventPropTypeInterface<string, StringOrNumberOrCallback>[]
externalEventMutationsany[]
groupComponentReact.ReactElement<any>
heightnumbertheme.chart.height
horizontalboolean
innerRadiusnumber
legendAllowWrapbooleanfalse
legendComponentReact.ReactElement<any><ChartLegend />
legendData{ name?: string; symbol?: { fill?: string; type?: string; }; }[]
legendOrientation'horizontal' | 'vertical'theme.legend.orientation as ChartLegendOrientation
legendPosition'bottom' | 'bottom-left' | 'right'ChartCommonStyles.legend.position as ChartLegendPosition
maxDomainnumber | { x?: number; y?: number }
minDomainnumber | { x?: number; y?: number }
paddingPaddingProps
polarboolean
range[number, number] | { x?: [number, number]; y?: [number, number] }
scaleScalePropType | D3Scale | { x?: ScalePropType | D3Scale; y?: ScalePropType | D3Scale; }
sharedEventsany
singleQuadrantDomainPaddingboolean | { x: boolean; y: boolean }
standalonebooleantrue
startAnglenumber
styleVictoryStyleInterface
themeChartThemeDefinitiongetTheme(themeColor, themeVariant)
themeColorstring
themeVariantstring
widthnumbertheme.chart.width
ChartArea properties
NameTypeRequiredDefaultDescription
animateAnimatePropTypeInterface
categoriesCategoryPropType
containerComponentReact.ReactElement<any><ChartContainer />
dataany[]
dataComponentReact.ReactElement<any>
domainDomainPropType
domainPaddingDomainPaddingPropType
eventKeyStringOrNumberOrCallback
eventsEventPropTypeInterface<'data' | 'labels' | 'parent', 'all'>[]
externalEventMutationsany[]
groupComponentReact.ReactElement<any>
heightnumber
horizontalboolean
interpolationInterpolationPropType
labelComponentReact.ReactElement<any>
labelsstring[] | number[] | Function
maxDomainnumber | { x?: number; y?: number }
minDomainnumber | { x?: number; y?: number }
namestring
origin{ x: number; y: number }
paddingPaddingProps
polarboolean
range[number, number] | { x?: [number, number]; y?: [number, number] }
samplesnumber
scaleScalePropType | D3Scale | { x?: ScalePropType | D3Scale; y?: ScalePropType | D3Scale; }
sharedEventsany
singleQuadrantDomainPaddingboolean | { x: boolean; y: boolean }
sortKeystring | string[] | Function
sortOrder'ascending' | 'descending'
standaloneboolean
styleVictoryStyleInterface
themeChartThemeDefinitiongetTheme(themeColor, themeVariant)
themeColorstring
themeVariantstring
widthnumber
xDataGetterPropType
yDataGetterPropType
y0DataGetterPropType
ChartAxis properties
NameTypeRequiredDefaultDescription
animateAnimatePropTypeInterface
axisComponentReact.ReactElement<any>
axisLabelComponentReact.ReactElement<any>
axisValueany
containerComponentReact.ReactElement<any><ChartContainer />
crossAxisboolean
dependentAxisboolean
domainDomainPropType
domainPaddingDomainPaddingPropType
eventsEventPropTypeInterface<'axis' | 'axisLabel' | 'grid' | 'ticks' | 'tickLabels' | 'parent', number | string>[]
externalEventMutationsany[]
fixLabelOverlapboolean
gridComponentReact.ReactElement<any>
groupComponentReact.ReactElement<any>
heightnumber
invertAxisboolean
labelany
maxDomainnumber | { x?: number; y?: number }
minDomainnumber | { x?: number; y?: number }
namestring
offsetXnumber
offsetYnumber
orientation'top' | 'bottom' | 'left' | 'right'
paddingPaddingProps
range[number, number] | { x?: [number, number]; y?: [number, number] }
scaleScalePropType | D3Scale | { x?: ScalePropType | D3Scale; y?: ScalePropType | D3Scale; }
sharedEventsany
showGridbooleanfalse
singleQuadrantDomainPaddingboolean | { x: boolean; y: boolean }
standaloneboolean
style{ parent?: React.CSSProperties; axis?: React.CSSProperties; axisLabel?: React.CSSProperties; grid?: { [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number); }; ticks?: { [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number); }; tickLabels?: { [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number); }; }
themeChartThemeDefinitiongetTheme(themeColor, themeVariant)
themeColorstring
themeVariantstring
tickComponentReact.ReactElement<any>
tickCountnumber
tickFormatany[] | ((tick: any, index: number, ticks: any[]) => string | number)
tickLabelComponentReact.ReactElement<any>
tickValuesany[]
widthnumber
ChartGroup properties
NameTypeRequiredDefaultDescription
allowZoombooleanfalse
animateAnimatePropTypeInterface
ariaDescstring
ariaTitlestring
categoriesCategoryPropType
childrenReact.ReactNode
colorstring
colorScaleColorScalePropType
containerComponentReact.ReactElement<any>allowZoom ? <VictoryZoomContainer /> : <ChartContainer />
dataany[]
domainDomainPropType
domainPaddingDomainPaddingPropType
eventKeyStringOrNumberOrCallback
eventsEventPropTypeInterface<'data' | 'labels' | 'parent', 'all'>[]
externalEventMutationsany[]
groupComponentReact.ReactElement<any>
heightnumber
horizontalboolean
labelComponentReact.ReactElement<any>
labelsstring[] | ((data: any) => string)
maxDomainnumber | { x?: number; y?: number }
minDomainnumber | { x?: number; y?: number }
namestring
offsetnumber
origin{ x: number; y: number }
paddingPaddingProps
polarboolean
range[number, number] | { x?: [number, number]; y?: [number, number] }
samplesnumber
scaleScalePropType | D3Scale | { x?: ScalePropType | D3Scale; y?: ScalePropType | D3Scale; }
sharedEventsany
singleQuadrantDomainPaddingboolean | { x: boolean; y: boolean }
sortKeystring | string[] | Function
sortOrder'ascending' | 'descending'
standaloneboolean
styleVictoryStyleInterface
themeChartThemeDefinitiongetTheme(themeColor, themeVariant)
themeColorstring
themeVariantstring
widthnumber
xDataGetterPropType
yDataGetterPropType
y0DataGetterPropType
ChartThreshold properties
NameTypeRequiredDefaultDescription
animateAnimatePropTypeInterface
categoriesCategoryPropType
containerComponentReact.ReactElement<any>
dataany[]
dataComponentReact.ReactElement<any>
domainDomainPropType
domainPaddingDomainPaddingPropType
eventKeyStringOrNumberOrCallback
eventsEventPropTypeInterface<'data' | 'labels' | 'parent', number | string>[]
externalEventMutationsany[]
groupComponentReact.ReactElement<any>
heightnumber
horizontalboolean
interpolationInterpolationPropType
labelComponentReact.ReactElement<any>
labelsFunction | string[] | number[]
maxDomainnumber | { x?: number, y?: number }
minDomainnumber | { x?: number, y?: number }
namestring
origin{ x: number, y: number }
paddingPaddingProps
polarboolean
range[number, number] | { x?: [number, number], y?: [number, number] }
samplesnumber
scaleScalePropType | D3Scale | { x?: ScalePropType | D3Scale; y?: ScalePropType | D3Scale; }
sharedEventsany
singleQuadrantDomainPaddingboolean | { x: boolean, y: boolean }
sortKeystring | string[] | Function
sortOrder'ascending' | 'descending'
standaloneboolean
styleVictoryStyleInterface{}
themeChartThemeDefinitiongetThresholdTheme(themeColor, themeVariant)
themeColorstring
themeVariantstring
widthnumber
xDataGetterPropType
yDataGetterPropType
y0DataGetterPropType
ChartVoronoiContainer properties
NameTypeRequiredDefaultDescription
activateDataboolean
activateLabelsboolean
allowTooltipbooleantrue
classNamestring
constrainToVisibleAreabooleanfalse
disableboolean
labels(point: any, index: number, points: any[]) => string
labelComponentReact.ReactElement<any>allowTooltip ? <ChartTooltip /> : undefined
mouseFollowTooltipsboolean
onActivated(points: any[], props: VictoryVoronoiContainerProps) => void
onDeactivated(points: any[], props: VictoryVoronoiContainerProps) => void
radiusnumber
responsiveboolean
styleReact.CSSProperties
themeChartThemeDefinitiongetTheme(themeColor, themeVariant)
themeColorstring
themeVariantstring
voronoiBlackliststring[]
voronoiDimension'x' | 'y'
voronoiPaddingnumber