Skip to main content

Candlestick

Candlesticks are used to visualize the movement of data over a time period by plotting the open, close, high, and low values of a dataset.

Basic

See the full API here. Typically composed with VictoryChart to create full charts.

Live View
Loading...
Live Editor

Candlestick - Horizontal

Candlestick charts can be rendered horizontally by setting the horizontal prop to true. This prop can be applied to either VictoryChart or VictoryBoxPlot.

Live View
Loading...
Live Editor

Candlestick - Labels

Candlestick charts can be labeled by setting the labels prop to true. By default this will show all labels.

It's also possible to control each label individually by using the specific label properties defined in the VictoryCandlestick API.

Live View
Loading...
Live Editor

Candlestick - Label Functions

The labels prop can also accept a function to customize the candlestick label. When using a function, the other labels will need to be set using their specific props in the VictoryCandlestick API.

Live View
Loading...
Live Editor

Candlestick - Time Scales

Candlestick charts can leverage d3-scale to handle time scales. The x prop can be set to a Date Object.

Live View
Loading...
Live Editor

Candlestick - Styles

Chart styling can be customized by using the theme or overriding the style prop on the component.

Live View
Loading...
Live Editor

Candlestick - Events

Events can be handled by passing an array of event objects to the events prop on the component. Each event object should specify a target and an eventHandlers object. See the events guide for more information.

Live View
Loading...
Live Editor

Standalone Rendering

Box Plot charts can be rendered outside a VictoryChart.

Live View
Loading...
Live Editor

They can also be embeded in other SVG components by using the standalone prop.

Live View
Loading...
Live Editor