VictoryCandlestick
For examples of VictoryCandlestick in action, visit the Candlestick examples.
Inherited Props
Component Props
candleColors
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.
<VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 25 }} > <VictoryCandlestick candleColors={{ positive: "#5f5c5b", negative: "#c43a31", }} data={sampleDataDates} /> </VictoryChart>
candleRatio
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.
<VictoryCandlestick candleRatio={0.8} data={sampleDataDates} />
candleWidth
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.
It is still possible to define candle width via the style prop with the width attribute, but candleWidth will take precedence.
<VictoryCandlestick candleWidth={55} data={sampleDataDates} />
close
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
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.
<VictoryCandlestick data={sampleDataDates} closeLabels closeLabelComponent={ <VictoryLabel dx={-30} textAnchor="middle" /> } />
closeLabels
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:
closeLabelscloseLabels={["first", "second", "third"]}closeLabels={({ datum }) => Math.round(datum.close)}
data
This property is not currently typed, but requires a specific data format. We are working on adding more specific types to this prop.
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.
<VictoryCandlestick data={[ { x: new Date(2016, 6, 1), open: 5, close: 10, high: 15, low: 0, }, { x: new Date(2016, 6, 2), open: 10, close: 15, high: 20, low: 5, }, { x: new Date(2016, 6, 3), open: 15, close: 20, high: 22, low: 10, }, { x: new Date(2016, 6, 4), open: 20, close: 10, high: 25, low: 7, }, { x: new Date(2016, 6, 5), open: 10, close: 8, high: 15, low: 5, }, ]} />
eventKey
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
events
VictoryCandlestick uses the standard events prop. Read about it here
See the [Events Guide][] for more information on defining events.
<div> <h3>Click Me</h3> <VictoryCandlestick events={[ { target: "data", eventHandlers: { onClick: () => { return [ { target: "data", mutation: (props) => { const fill = props.style && props.style.fill; return fill === "#c43a31" ? null : { style: { fill: "#c43a31", }, }; }, }, ]; }, }, }, ]} data={sampleDataDates} /> </div>
high
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
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
highLabelComponent={<VictoryLabel dy={20}/>}
<VictoryChart theme={VictoryTheme.clean} > <VictoryCandlestick data={sampleDataDates} highLabels highLabelComponent={ <VictoryLabel dx={-10} textAnchor="middle" /> } /> </VictoryChart>
highLabels
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:
highLabelshighLabels={["first", "second", "third"]}highLabels={({ datum }) => Math.round(datum.high)}
labelOrientation
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.
<VictoryCandlestick data={sampleDataDates} closeLabels={() => "close"} highLabels={() => "high"} lowLabels={() => "low"} openLabels={() => "open"} style={{ labels: { padding: 4 } }} labelOrientation={{ close: "right", open: "right", high: "top", low: "bottom", }} />
labels
The labels prop defines the label associated with the candle. This prop is typically given as a function.
<VictoryCandlestick data={sampleDataDates} labels={({ datum }) => `open: ${datum.open}` } theme={VictoryTheme.clean} />
low
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
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.
<VictoryCandlestick data={sampleDataDates} lowLabels lowLabelComponent={ <VictoryTooltip pointerLength={0} /> } events={[ { target: "data", eventHandlers: { onMouseOver: () => ({ target: "lowLabels", mutation: () => ({ active: true, }), }), onMouseOut: () => ({ target: "lowLabels", mutation: () => ({ active: false, }), }), }, }, ]} />
lowLabels
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:
lowLabelslowLabels={["first", "second", "third"]}lowLabels={({ datum }) => Math.round(datum.low)}
open
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 an open value
examples: open={() => 10}
array index: specify which index of an array should be used as an 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 an open value
examples: open="bonds.open", open={["bonds", "open"]}
openLabelComponent
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.
<VictoryCandlestick data={sampleDataDates} openLabels openLabelComponent={ <VictoryLabel dx={-30} textAnchor="middle" /> } />
openLabels
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:
openLabelsopenLabels={["first", "second", "third"]}openLabels={({ datum }) => Math.round(datum.open)}
style
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.
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>.
<VictoryCandlestick data={sampleDataDates} labels={() => "labels"} closeLabels={() => "close"} highLabels={() => "high"} lowLabels={() => "low"} openLabels={() => "open"} style={{ data: { fill: "#c43a31", fillOpacity: 0.7, stroke: "#c43a31", strokeWidth: 3, }, labels: { fill: "tomato", padding: 2, }, closeLabels: { fill: "orange", padding: 2, }, highLabels: { fill: "blue", padding: 2, }, lowLabels: { fill: "teal", padding: 2, }, openLabels: { fill: "green", padding: 2, }, }} />
wickStrokeWidth
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.