Victory
Victory

About Docs Gallery Support GitHub FAQs

#
VictoryBar

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

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

##
animate

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

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

##
barWidth

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

##
categories

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

`VictoryBar` uses the standard `categories` prop. Read about it here

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

##
containerComponent

`type: element`

`VictoryBar` uses the standard `containerComponent` prop. Read about it here

    containerComponent={<VictoryVoronoiContainer/>}

##
cornerRadius

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

##
data

`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

##
dataComponent

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

##
domain

`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]}}

##
domainPadding

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

##
eventKey

`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";

##
events

`type: array[object]`

`VictoryBar` uses the standard `events` prop. Read about it here

See the Events Guide for more information on defining events.

##
externalEventMutations

`type: array[object]`

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

##
groupComponent

`type: element`

`VictoryBar` uses the standard `groupComponent` prop. Read about it here

default: `<g/>`

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

##
height

`type: number`

`VictoryBar` uses the standard `height` prop. Read about it here

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

    height={400}

##
horizontal

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

##
labelComponent

`type: element`

`VictoryBar` uses the standard `labelComponent` prop. Read about it here

default: `<VictoryLabel/>`

##
labels

`type: array || function`

`VictoryBar` uses the standard `labels` prop. Read about it here

##
maxDomain

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

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

##
minDomain

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

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

##
name

`type: string`

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

    name = "series-1";

##
origin

`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

##
padding

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

##
polar

`type: boolean`

`VictoryBar` uses the standard `polar` prop. Read about it here

##
range

`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

##
samples

`type: number`

`VictoryBar` uses the standard `samples` prop. Read about it here

default: `samples={50}`

    samples={100}

##
scale

`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"}}

##
sharedEvents

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

##
singleQuadrantDomainPadding

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

`VictoryBar` uses the standard `singleQuadrantDomainPadding` prop. Read about it here

##
sortKey

`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";

##
sortOrder

`type: "ascending" || "descending"`

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

default: `sortOrder="ascending"`

##
standalone

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

##
style

`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

##
theme

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

##
width

`type: number`

`VictoryBar` uses the standard `width` prop. Read about it here

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

    width={400}

##
x

`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";

##
y

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

##
y0

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