VictoryErrorBar

info

For examples of VictoryErrorBar in action, visit the Error Bar examples.

Inherited Props

VictoryDatableProps

• categories
• dataoverridden
• 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
• polarnot-implemented
• range
• scale
• sharedEvents
• singleQuadrantDomainPadding
• standalone
• theme
• width

VictoryEventProps

• eventKey
• events

Component Props

---

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}

---

data

type: {x: number, y: number, errorX: number, errorY: number}[]

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.

---

errorX

type: string | integer | 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 an errorX value

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

---

errorY

type: string | integer | 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 an errorY value

examples: errorY={() => 10}

array index: specify which index of an array should be used as an 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 an errorY value

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

---

eventKey

type: string | integer | 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: object[]

VictoryErrorBar uses the standard events prop. Read about it here

See the [Events Guide][] for more information on defining events.

Live View

Loading...

Live Editor

<div>
  <h3>Click an error bar below</h3>
  <VictoryErrorBar
    style={{
      data: { strokeWidth: 5 },
    }}
    events={[
      {
        target: "data",
        eventHandlers: {
          onClick: () => {
            return [
              {
                target: "data",
                mutation: (props) => {
                  const stroke =
                    props.style &&
                    props.style.stroke;
                  return stroke ===
                    "#c43a31"
                    ? null
                    : {
                        style: {
                          stroke:
                            "#c43a31",
                          strokeWidth: 7,
                        },
                      };
                },
              },
            ];
          },
        },
      },
    ]}
    data={[
      {
        x: 15,
        y: 35,
        errorX: 1,
        errorY: 3,
      },
      {
        x: 20,
        y: 42,
        errorX: 3,
        errorY: 2,
      },
      {
        x: 25,
        y: 30,
        errorX: 5,
        errorY: 5,
      },
      {
        x: 30,
        y: 35,
        errorX: 5,
        errorY: 3,
      },
      {
        x: 35,
        y: 22,
        errorX: 8,
        errorY: 2,
      },
    ]}
  />
</div>

---

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

Live View

Loading...

Live Editor

<VictoryErrorBar
  style={{
    data: {
      stroke: "#c43a31",
      strokeWidth: 5,
    },
    labels: {
      fontSize: 15,
      fill: "#c43a31",
    },
  }}
  data={sampleErrorData}
  labels={({ datum }) => datum.x}
/>