Skip to main content

Bar

Bar charts renders a dataset as series of bars and is used for comparing numeric values between different categories.

Basic

See the full API here. Typically composed with VictoryChart to create full charts.

Live View
Loading...
Live Editor

Bar Charts - Domain

Bars in VictoryBar are centered around their corresponding value by default. You can move your bars away from your axis by setting a new domain, adding domainPadding, or changing how bars are aligned relative to their values with the alignment prop on VictoryBar.

note

Using domainPadding to adjust the bar position is the most common way to adjust the position of bars in a chart.

Live View
Loading...
Live Editor
note

Setting the bar alignment using the alignment prop.

Live View
Loading...
Live Editor
note

Setting the bar alignment using the domain prop.

Live View
Loading...
Live Editor

Bar Charts - Horizontal

Bar charts can be rendered horizontally by setting the horizontal prop to true. This prop can be applied to either VictoryChart or VictoryBar.

Live View
Loading...
Live Editor

Bar Charts - Labels

Add labels to charts by setting the labels prop to the name of a property in the dataset, or a function that returns the label value. You can customize the display of the labels by using the labelComponent prop.

Live View
Loading...
Live Editor

Bar Charts - Tooltips

Tooltips can be added by using a VictoryTooltip component as the labelComponent.

Live View
Loading...
Live Editor

Bar Charts - Grouped

Bar charts can be grouped to show how different subcategories compare to each other.

Live View
Loading...
Live Editor

Bar Charts - Grouped Labels

Bar chart labels for grouped bars can be rendered by setting the labels prop to the name of a property in the dataset, an array, or a function that returns the label value.

Live View
Loading...
Live Editor

Bar Charts - Combination

Bar charts can be rendered with other chart types like Line.

Live View
Loading...
Live Editor

Bar Charts - Animation

Charts can be animated by setting the animate prop. See the animations guide for more information.

Live View
Loading...
Live Editor

Bar Charts - Zoom & Pan

Bar charts support pan and zoom behavior by using the VictoryZoomContainer component. See the Pan & Zoom guide for more information.

Live View
Loading...
Live Editor

Bar Charts - Styles

Chart styling can be customized by using the theme or overriding the style prop on the component.

Live View
Loading...
Live Editor

Bar Charts - Events

Events can be handled by passing an array of event objects to the events prop on the component. Each event object should specify a target and an eventHandlers object. See the events guide for more information.

Live View
Loading...
Live Editor

Stacked Bar Charts

Bar charts can be stacked to show how different categories contribute to the total.

Live View
Loading...
Live Editor

Stacked Bar Charts - 100%

While Victory does not support 100% stacked bar charts natively, you can achieve this by transforming your data.

Live View
Loading...
Live Editor

Stacked Bar Charts - Grouped

Bar charts can be stacked and grouped to show how different subcategories contribute to the total.

Live View
Loading...
Live Editor

Diverging Bar Charts

Diverging bar are useful for showing how different categories compare to a common baseline. By default, Victory will calculate the domain based on the data provided.

Live View
Loading...
Live Editor

Diverging Bar Charts - Horizontal

Diverging bar are useful for showing how different categories compare to a common baseline. By default, Victory will calculate the domain based on the data provided.

Live View
Loading...
Live Editor

Diverging Bar Charts - Grouped

Diverging bar are useful for showing how different categories compare to a common baseline. By default, Victory will calculate the baseline based on the data provided.

Live View
Loading...
Live Editor

Diverging Bar Charts - Floating

Diverging bar are useful for showing how different categories compare to a common baseline.

Live View
Loading...
Live Editor

Polar Bar Charts

Bar charts can be rendered in polar coordinates by setting the polar prop to true and using VictoryPolarAxis components.

Live View
Loading...
Live Editor

Polar Bar Charts - Stacked

Bar charts can be rendered in polar coordinates by setting the polar prop to true and using VictoryPolarAxis components.

Live View
Loading...
Live Editor

Standalone Rendering

Bar charts can be rendered outside a VictoryChart.

Live View
Loading...
Live Editor

They can also be embeded in other SVG components by using the standalone prop.

Live View
Loading...
Live Editor