VictoryBar renders a dataset as series of bars. VictoryBar can be composed with VictoryChart to create bar charts.

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={10}
>
  <VictoryBar
    style={{ data: { fill: "#c43a31" } }}
    data={sampleData}
  />
</VictoryChart>

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.

<VictoryChart
  theme={VictoryTheme.material}
>
  <VictoryBar
    style={{ data: { fill: "#c43a31" } }}
    alignment="start"
    data={sampleData}
  />
</VictoryChart>

type: boolean || object

VictoryBar uses the standard animate prop. Read about it here

See the Animations Guide for more detail on animations and transitions

animate={{
  duration: 2000,
  onLoad: { duration: 1000 }
}}

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.

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={{ x: 15 }}
>
  <VictoryBar
    barRatio={0.8}
    style={{
      data: { fill: "#c43a31" }
    }}
    data={sampleData}
  />
</VictoryChart>

type: number || function

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.

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={{ x: 20 }}
>
  <VictoryBar
    barWidth={({ index }) => index * 2 + 8}
    style={{
      data: { fill: "#c43a31" }
    }}
    data={sampleData}
  />
</VictoryChart>

type: array[string] || { x: array[string], y: array[string] }

VictoryBar uses the standard categories prop. Read about it here

categories={{ x: ["dogs", "cats", "mice"] }}

type: element

VictoryBar uses the standard containerComponent prop. Read about it here

containerComponent={<VictoryVoronoiContainer/>}

type: function || 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.

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={{ x: 15 }}
>
  <VictoryBar
    cornerRadius={{ topLeft: ({ datum }) => datum.x * 4 }}
    style={{
      data: {
        fill: "#c43a31",
        width: 25
      }
    }}
    data={sampleData}
  />
</VictoryChart>

type: array[object]

VictoryBar uses the standard data prop. Read about it here

See the Data Accessors Guide for more detail on formatting and processing data.

In addition to svg style properties and label, VictoryBar will also preferentially use width properties supplied via data objects

<VictoryBar
  data={[
    { x: 1, y: 2, y0: 1 },
    { x: 2, y: 3, y0: 2 },
    { x: 3, y: 5, y0: 2 },
    { x: 4, y: 4, y0: 3 },
    { x: 5, y: 6, y0: 3 }
  ]}
/>

type: element

VictoryBar uses the standard dataComponent prop. Read about it here

VictoryBar supplies the following props to its dataComponent: data, datum, horizontal, index, padding, polar, origin, scale, style, width, height, x, y, y0, x0

See the Custom Components Guide for more detail on creating your own dataComponents

default: <Bar/>

dataComponent={<Bar events={{ onClick: handleClick }}/>}

type: array[low, high] || { x: [low, high], y: [low, high] }

VictoryBar uses the standard domain prop. Read about it here

domain={{x: [0, 100], y: [0, 1]}}

type: number || array[left, right] || { x: [left, right], y: [bottom, top] }

VictoryBar uses the standard domainPadding prop. Read about it here

domainPadding={{x: [10, -10], y: 5}}

type: string || integer || array[string] || function

VictoryBar uses the standard eventKey prop to specify how event targets are addressed. This prop is not commonly used. Read about the eventKey prop in more detail here

eventKey = "x";

type: array[object]

VictoryBar uses the standard events prop. Read about it here

See the Events Guide for more information on defining events.

<div>
  <h3>Click Me</h3>
  <VictoryBar
    style={{
      data: { fill: "#c43a31" }
    }}
    events={[{
      target: "data",
      eventHandlers: {
        onClick: () => {
          return [
            {
              target: "data",
              mutation: (props) => {
                const fill = props.style && props.style.fill;
                return fill === "black" ? null : { style: { fill: "black" } };
              }
            }
          ];
        }
      }
    }]}
    data={sampleData}
  />
</div>

type: array[object]

VictoryBar uses the standard externalEventMutations prop. Read about it in detail

type: element

VictoryBar uses the standard groupComponent prop. Read about it here

default: <g/>

groupComponent={<g transform="translate(10, 10)" />}

type: number

VictoryBar uses the standard height prop. Read about it here

default (provided by default theme): height={300}

height={400}

type: boolean

The horizontal prop determines whether the bars will be laid vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true.

default: horizontal={false}

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={{ x: 10 }}
>
  <VictoryBar horizontal
    style={{
      data: { fill: "#c43a31" }
    }}
    data={sampleData}
  />
</VictoryChart>

type: element

VictoryBar uses the standard labelComponent prop. Read about it here

default: <VictoryLabel/>

<VictoryBar
  data={sampleData}
  labels={({ datum }) => datum.y}
  style={{ labels: { fill: "white" } }}
  labelComponent={<VictoryLabel dy={30}/>}
/>

type: array || function

VictoryBar uses the standard labels prop. Read about it here

<VictoryBar
  data={sampleData}
  labels={({ datum }) => `y: ${datum.y}`}
/>

type: number || { x: number, y: number }

VictoryBar uses the standard maxDomain prop. Read about it in detail

<VictoryChart maxDomain={{ x: 3 }}>
  <VictoryBar data={sampleData}/>
</VictoryChart>

type: number || { x: number, y: number }

VictoryBar uses the standard minDomain prop. Read about it in detail

<VictoryChart minDomain={{ x: 2 }}>
  <VictoryBar data={sampleData}/>
</VictoryChart>

type: string

The name prop is used to reference a component instance when defining shared events.

name = "series-1";

type: { x: number, y: number }

The origin prop is only used by polar charts, and is usually controlled by VictoryChart. It will not typically be necessary to set an origin prop manually

Read about the origin prop in detail

type: number || { top: number, bottom: number, left: number, right: number }

VictoryBar uses the standard padding prop. Read about it here

default (provided by default theme): padding={50}

padding={{ top: 20, bottom: 60 }}

type: boolean

VictoryBar uses the standard polar prop. Read about it here

<VictoryChart polar
  theme={VictoryTheme.material}
>
  <VictoryPolarAxis dependentAxis
    style={{ axis: { stroke: "none" } }}
    tickFormat={() => null}
  />
  <VictoryPolarAxis/>
  <VictoryBar
    data={sampleData}
    style={{
      data: { fill: "#c43a31", stroke: "black", strokeWidth: 2 }
    }}
  />
</VictoryChart>

type: array[low, high] || { x: [low, high], y: [low, high] }

The range prop is usually controlled by VictoryChart. It will not typically be necessary to set a range prop manually

Read about the range prop in detail

type: number

VictoryBar uses the standard samples prop. Read about it here

default: samples={50}

samples={100}

type: scale || { x: scale, y: scale }

VictoryBar uses the standard scale prop. Read about it here Options for scale include "linear", "time", "log", "sqrt" and the d3-scale functions that correspond to these options.

default: scale="linear"

scale={{x: "linear", y: "log"}}

The sharedEvents prop is used internally to coordinate events between components. It should not be set manually.

type: boolean || { x: boolean, y: boolean }

VictoryBar uses the standard singleQuadrantDomainPadding prop. Read about it here

type: string || integer || array[string] || function

VictoryBar uses the standard sortKey prop. Read about it here

See the Data Accessors Guide for more detail on formatting and processing data.

sortKey = "x";

type: "ascending" || "descending"

The sortOrder prop specifies whether sorted data should be returned in ascending or descending order.

default: sortOrder="ascending"

type: boolean

VictoryBar uses the standard standalone prop. Read about it here

note: When VictoryBar is nested within a component like VictoryChart, this prop will be set to false

default: standalone={true}

<svg width={300} height={300}>
  <circle cx={150} cy={150} r={150} fill="#c43a31"/>
  <VictoryBar
    standalone={false}
    width={300} height={300} padding={{left: 10, right: 10}}
    data={sampleData}
  />
</svg>

type: { parent: object, data: object, labels: object }

VictoryBar uses the standard style prop. Read about it here

default (provided by default theme): See grayscale theme for more detail

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

type: object

VictoryBar uses the standard theme prop. Read about it here

See the Themes Guide for information about creating custom themes.

default: theme={VictoryTheme.grayscale}

theme={VictoryTheme.material}

type: number

VictoryBar uses the standard width prop. Read about it here

default (provided by default theme): width={450}

width={400}

type: string || integer || array[string] || function

VictoryBar uses the standard x data accessor prop. Read about it here

See the Data Accessors Guide for more detail on formatting and processing data.

x = "employee.name";

type: string || integer || array[string] || function

VictoryBar uses the standard y data accessor prop. Read about it here

See the Data Accessors Guide for more detail on formatting and processing data.

y={(d) => d.value + d.error}

type: string || integer || array[string] || function

VictoryBar uses the standard y0 data accessor prop to set a baseline. Read about it here

See the Data Accessors Guide for more detail on formatting and processing data.

<VictoryChart domainPadding={30}>
  <VictoryBar
    data={sampleData}
    y0={(d) => d.y - 1}
  />
</VictoryChart>