VictoryBar
For examples of VictoryBar in action, visit the Bar Chart examples.
Inherited Props
VictoryDatableProps
VictoryMultiLabelableProps
VictoryCommonProps
Component Props
alignment
The alignment prop specifies how bars should be aligned relative to their data points. This prop may be given as "start", "middle" or "end". When this prop is not specified, bars will have "middle" alignment relative to their data points.
<VictoryChart theme={VictoryTheme.clean}> <VictoryBar alignment="start" /> </VictoryChart>
barRatio
The barRatio prop specifies an approximate ratio between bar widths and spaces between bars. When width is not specified via the barWidth prop or in bar styles, the barRatio prop will be used to calculate a default width for each bar given the total number of bars in the data series and the overall width of the chart.
<VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 30 }} > <VictoryBar barRatio={0.8} /> </VictoryChart>
barWidth
The barWidth prop is used to specify the width of each bar. This prop may be given as a number of pixels or as a function that returns a number. When this prop is given as a function, it will be evaluated for each bar with the props object corresponding to that bar. When this value is not given, a default value will be calculated based on the overall dimensions of the chart, and the number of bars.
It is still possible to define bar width via the style prop with the width attribute, but barWidth will take precedence.
<VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 20 }} > <VictoryBar barWidth={({ datum }) => datum.x * 7} /> </VictoryChart>
cornerRadius
The cornerRadius prop specifies a radius to apply to each bar. If this prop is given as a single number, the radius will only be applied to the top of each bar. When this prop is given as a function, it will be evaluated for each bar with the props object corresponding to that bar.
<VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 20 }} > <VictoryBar cornerRadius={{ topLeft: ({ datum }) => datum.x * 4 }} /> </VictoryChart>
getPath
The getPath prop is used to customize the path of the bar. This prop should be given as a function that takes an object of props and returns a string. The getPath function will be called with the props object for each bar.
style
Defines the style of the component using VictoryStyleInterface.
<VictoryChart domainPadding={{ x: 30 }}> <VictoryBar style={{ data: { fill: ({ datum }) => datum.x === 3 ? "#000000" : "#c43a31", stroke: ({ index }) => +index % 2 === 0 ? "#000000" : "#c43a31", fillOpacity: 0.7, strokeWidth: 3 }, labels: { fontSize: 15, fill: ({ datum }) => datum.x === 3 ? "#000000" : "#c43a31" } }} data={sampleData} labels={({ datum }) => datum.x} /> </VictoryChart>