VictoryBar

info

For examples of VictoryBar in action, visit the Bar Chart examples.

Inherited Props

VictoryDatableProps

• categories
• data
• dataComponent
• domain
• domainPadding
• samples
• sortKey
• sortOrder
• x
• y
• y0

VictoryMultiLabelableProps

• labelComponent
• labels

VictoryCommonProps

• animate
• colorScale
• containerComponent
• disableInlineStyles
• domainPadding
• externalEventMutations
• groupComponent
• height
• horizontal
• maxDomain
• minDomain
• name
• origin
• padding
• polar
• range
• scale
• sharedEvents
• singleQuadrantDomainPadding
• standalone
• theme
• width

VictoryEventProps

• eventKey
• events

Component Props

---

alignment

type: "start" | "middle" | "end"

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.

Live View

Loading...

Live Editor

<VictoryChart theme={VictoryTheme.clean}>
  <VictoryBar alignment="start" />
</VictoryChart>

---

barRatio

type: number

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.

Live View

Loading...

Live Editor

<VictoryChart
  theme={VictoryTheme.clean}
  domainPadding={{ x: 30 }}
>
  <VictoryBar
    barRatio={0.8}
  />
</VictoryChart>

---

barWidth

type: number | (args: CallbackArgs) => number

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.

note

It is still possible to define bar width via the style prop with the width attribute, but barWidth will take precedence.

Live View

Loading...

Live Editor

<VictoryChart
  theme={VictoryTheme.clean}
  domainPadding={{ x: 20 }}
>
  <VictoryBar
    barWidth={({ datum }) => datum.x * 7}
  />
</VictoryChart>

---

cornerRadius

type: number | (args: CallbackArgs) => number | { top, bottom, topLeft, topRight, bottomLeft, bottomRight }

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.

Live View

Loading...

Live Editor

<VictoryChart
  theme={VictoryTheme.clean}
  domainPadding={{ x: 20 }}
>
  <VictoryBar
    cornerRadius={{ topLeft: ({ datum }) => datum.x * 4 }}
  />
</VictoryChart>

---

getPath

type: (props: VictoryBarProps) => string

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

type: VictoryStyleInterfacedefault: (provided by theme)

Defines the style of the component using VictoryStyleInterface.

Live View

Loading...

Live Editor

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