Victory
Victory

About Docs Gallery Support GitHub FAQs

#
VictoryErrorBar

`VictoryErrorBar` renders a dataset as a series of error bars. `VictoryErrorBar` can be composed with other components to add x and y error bars to data.

##
animate

`type: boolean || object`

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

##
borderWidth

`type: number`

The `borderWidth` prop sets the border width of the error bars. `borderWidth` will set both x and y error bar width.

    borderWidth={10}

##
categories

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

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

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

##
containerComponent

`type: element`

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

    containerComponent={<VictoryVoronoiContainer/>}

##
data

`type: array[object]`

Specify data via the `data` prop. By default, `VictoryErrorBar` expects data as an array of objects with `x`, `y`, `errorX` and `errorY` keys. Use the `x`, `y`, `errorX` and `errorY` data accessor props to specify custom data formats. Refer to the Data Accessors Guide for more detail.

##
dataComponent

`type: element`

`VictoryErrorBar` uses the standard `dataComponent` prop. Read about it here

`VictoryErrorBar` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `padding`, `polar`, `origin`, `scale`, `style`, `borderWidth`, `x`, `y`, `errorX`, `errorY`

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

default: `<ErrorBar/>`

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

##
domain

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

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

`VictoryErrorBar` uses the standard `domainPadding` prop. Read about it here

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

##
errorX

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

Use `errorX` data accessor prop to define the x error bar.

string: specify which property in an array of data objects should be used as the errorX value

examples: `errorX="uncertainty"`

function: use a function to translate each element in a data array into a errorX value

examples: `errorX={() => 10}`

array index: specify which index of an array should be used as a errorX value when data is given as an array of arrays

examples: `errorX={1}`

path string or path array: specify which property in an array of nested data objects should be used as a errorX value

examples: `errorX="measurement.uncertainty"`, `errorX={["measurement", "uncertainty"]}`

##
errorY

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

Use `errorY` data accessor prop to define the y error bar.

string: specify which property in an array of data objects should be used as the errorY value

examples: `errorY="uncertainty"`

function: use a function to translate each element in a data array into a errorY value

examples: `errorY={() => 10}`

array index: specify which index of an array should be used as a errorY value when data is given as an array of arrays

examples: `errorY={1}`

path string or path array: specify which property in an array of nested data objects should be used as a errorY value

examples: `errorY="measurement.uncertainty"`, `errorY={["measurement", "uncertainty"]}`

##
eventKey

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

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

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

See the Events Guide for more information on defining events.

##
groupComponent

`type: element`

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

default: `<g/>`

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

##
height

`type: number`

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

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

    height={400}

##
horizontal

`type: boolean`

`VictoryErrorBar` uses the standard `horizontal` prop. Read about it in detail

    horizontal = { true };

##
labelComponent

`type: element`

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

default: `<VictoryLabel/>`

##
labels

`type: array || function`

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

##
maxDomain

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

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

##
minDomain

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

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

`VictoryErrorBar` uses the standard `padding` prop. Read about it here

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

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

##
polar

`type: boolean`

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

Note: Polar Charts are not yet supported for `VictoryErrorBar`

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

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

default: `samples={50}`

    samples={100}

##
scale

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

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

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

##
sortKey

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

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

`VictoryErrorBar` uses the standard `standalone` prop. Read about it here

note: When `VictoryErrorBar` 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 }`

`VictoryErrorBar` uses the standard `style` prop. Read about it here

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

##
theme

`type: object`

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

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

`VictoryErrorBar` 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={(datum) => new Date(datum.day)}

##
y

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

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