Edit this page

VictoryBar

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

            

Props

animate

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

categories

VictoryBar uses the standard categories prop. Read about it here

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

containerComponent

VictoryBar uses the standard containerComponent prop. Read about it here

containerComponent={<VictoryVoronoiContainer dimension="x"/>}

data

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

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

VictoryBar uses the standard domain prop. Read about it here

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

domainPadding

VictoryBar uses the standard domainPadding prop. Read about it here

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

eventKey

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

VictoryBar uses the standard events prop. Read about it here

See the Events Guide for more information on defining events.

            

groupComponent

VictoryBar uses the standard groupComponent prop. Read about it here

default: <g/>

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

height

VictoryBar uses the standard height prop. Read about it here

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

height={400}

horizontal

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

VictoryBar uses the standard labelComponent prop. Read about it here

default: <VictoryLabel/>

            

labels

VictoryBar uses the standard labels prop. Read about it here

            

name

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

name="series-1"

origin

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

VictoryBar uses the standard padding prop. Read about it here

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

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

polar

VictoryBar uses the standard polar prop. Read about it here

            

range

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

VictoryBar uses the standard samples prop. Read about it here

default: samples={50}

samples={100}

scale

VictoryBar uses the standard scale prop. Read about it here

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.

sortKey

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"

standalone

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

VictoryBar uses the standard style prop. Read about it here

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

            

theme

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

VictoryBar uses the standard width prop. Read about it here

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

width={400}

x

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

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

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.