Victory
Victory

About Docs Gallery Support GitHub FAQs

#
VictoryCandlestick

VictoryCandlestick renders a dataset as a series of candlesticks. VictoryCandlestick can be composed with `VictoryChart` to create candlestick charts.

##
animate

`type: boolean || object`

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

##
candleColors

`type: { positive: string, negative: string }`

Candle colors are significant in candlestick charts, with colors indicating whether a market closed higher than it opened (positive), or closed lower than it opened (negative). The `candleColors` prop should be given as an object with color strings specified for positive and negative.

default (provided by default theme): `candleColors={{positive: "white", negative: "black"}}`

##
candleRatio

`type: number`

The `candleRatio` prop specifies an approximate ratio between candle widths and spaces between candles. When width is not specified via the `candleWidth` prop or in candle styles, the `candleRatio` prop will be used to calculate a default width for each candle given the total number of candles in the data series and the overall width of the chart.

##
candleWidth

`type: number || function`

The `candleWidth` prop is used to specify the width of each candle. 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 with a single argument: an object containing all the props passed to the `Candle` component. When this value is not given, a default value will be calculated based on the overall dimensions of the chart, and the number of candles.

Note: It is still possible to define candle width via the style prop with the `width` attribute, but `candleWidth` will take precedence.

##
categories

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

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

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

##
close

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

Use `close` data accessor prop to define the close value of a candle.

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

examples: `close="closing_value"`

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

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

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

examples: `close={1}`

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

examples: `close="bonds.close"`, `close={["bonds", "close"]}`

##
closeLabelComponent

`type: element`

The `closeLabelComponent` prop takes a component instance which will be used to render the label corresponding to the close value for each candle. The new element created from the passed `closeLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `closeLabelComponent` is omitted, a new `VictoryLabel` will be created with props described above.

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

default: `closeLabelComponent={<VictoryLabel/>}`

    closeLabelComponent={<VictoryLabel dy={20}/>}

##
closeLabels

`type: array || function || boolean`

The `closeLabels` prop defines the labels that will correspond to the close value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.

examples:

- `closeLabels`
- `closeLabels={["first", "second", "third"]}`
- `closeLabels={({ datum }) => Math.round(datum.close)}`

##
containerComponent

`type: element`

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

    containerComponent={<VictoryVoronoiContainer/>}

##
data

`type: array[object]`

Specify data via the `data` prop. By default, `VictoryCandlestick` expects data as an array of objects with `x`, `open`, `close`, `high`, and `low` keys. Use the `x`, `open`, `close`, `high`, and `low` data accessor props to specify custom data formats. Refer to the Data Accessors Guide for more detail.

##
dataComponent

`type: element`

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

`VictoryCandlestick` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `padding`, `polar`, `origin`, `scale`, `style`, `candleHeight`, `x1`, `y1`, `y2`, `x2`

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

default: `<Candle/>`

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

##
domain

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

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

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

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

##
eventKey

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

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

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

See the Events Guide for more information on defining events.

##
groupComponent

`type: element`

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

default: `<g/>`

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

##
height

`type: number`

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

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

    height={400}

##
high

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

Use `high` data accessor prop to define the high value of a candle.

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

examples: `high="highest_value"`

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

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

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

examples: `high={1}`

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

examples: `high="bonds.high"`, `high={["bonds", "high"]}`

##
highLabelComponent

`type: element`

The `highLabelComponent` prop takes a component instance which will be used to render the label corresponding to the highest value for each candle. The new element created from the passed `highLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `highLabelComponent` is omitted, a new `VictoryLabel` will be created with props described above.

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

default: `highLabelComponent={<VictoryLabel/>}`

    highLabelComponent={<VictoryLabel dy={20}/>}

##
highLabels

`type: array || function || boolean`

The `highLabels` prop defines the labels that will correspond to the high value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.

examples:

- `highLabels`
- `highLabels={["first", "second", "third"]}`
- `highLabels={({ datum }) => Math.round(datum.high)}`

##
horizontal

`type: boolean`

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

##
labelComponent

`type: element`

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

default: `<VictoryLabel/>`

##
labelOrientation

`type: "top", "bottom", "left", "right" || { open, close, low, high }`

The `labelOrientation` prop determines where a label should be placed in relation to the candle it corresponds to. This prop may be given as "top", "bottom", "left", "right", or as an object with an option defined for some or all of the labels.

##
labels

`type: array || function`

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

##
low

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

Use `low` data accessor prop to define the low value of a candle.

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

examples: `low="lowest_value"`

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

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

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

examples: `low={1}`

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

examples: `low="bonds.low"`, `low={["bonds", "low"]}`

##
lowLabelComponent

`type: element`

The `lowLabelComponent` prop takes a component instance which will be used to render the label corresponding to the lowest value for each candle. The new element created from the passed `lowLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `lowLabelComponent` is omitted, a new `VictoryLabel` will be created with props described above.

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

default: `lowLabelComponent={<VictoryLabel/>}`

    lowLabelComponent={<VictoryLabel dy={20}/>}

##
lowLabels

`type: array || function || boolean`

The `lowLabels` prop defines the labels that will correspond to the low value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.

examples:

- `lowLabels`
- `lowLabels={["first", "second", "third"]}`
- `lowLabels={({ datum }) => Math.round(datum.low)}`

##
maxDomain

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

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

##
minDomain

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

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

##
open

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

Use `open` data accessor prop to define the open value of a candle.

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

examples: `open="opening_value"`

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

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

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

examples: `open={1}`

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

examples: `open="bonds.open"`, `open={["bonds", "open"]}`

##
openLabelComponent

`type: element`

The `openLabelComponent` prop takes a component instance which will be used to render the label corresponding to the open value for each candle. The new element created from the passed `openLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `openLabelComponent` is omitted, a new `VictoryLabel` will be created with props described above.

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

default: `openLabelComponent={<VictoryLabel/>}`

    openLabelComponent={<VictoryLabel dy={20}/>}

##
openLabels

`type: array || function || boolean`

The `openLabels` prop defines the labels that will correspond to the open value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.

examples:

- `openLabels`
- `openLabels={["first", "second", "third"]}`
- `openLabels={({ datum }) => Math.round(datum.open)}`

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

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

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

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

##
polar

`type: boolean`

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

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

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

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

default: `samples={50}`

    samples={100}

##
scale

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

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

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

##
sortKey

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

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

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

note: When `VictoryCandlestick` 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,
      closeLabels: object,
      highLabels: object,
      lowLabels: object,
      openLabels: object
    }

The `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `data`, `labels`, `closeLabels`, `highLabels`,`lowLabels`, and `openLabels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for style properties, and they will be evaluated with the props corresponding to each element.

note: When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.

note: custom `angle` and `verticalAnchor` properties may be included in `labels` styles.

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

##
theme

`type: object`

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

##
wickStrokeWidth

`type: number`

When the `wickStrokeWidth` prop is set, this value will be used to determine the stroke width for the candle wick. When this prop is not set, the `strokeWidth` set by the `style` prop will apply to both the candle and the wick.

##
width

`type: number`

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

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