Financial OHLC candlestick chart
CandlestickChart is a financial chart that displays open, high, low and close (OHLC) values as candles. Each candle is colored based on its direction: candles with close >= open (price went up) use upColor , candles with close < open (price went down) use downColor . The thin line (wick) shows the high–low range, the thick body shows the open–close range.
CandlestickChart requires an array of objects as the data prop. Set the dataKey prop to the key that is used for the x-axis (category) values. By default, the chart reads OHLC values from the open , high , low and close keys of each data object:
Unlike other charts, the y-axis is not anchored to zero – its domain is calculated from the minimum low and maximum high values in the data with a small padding, so that candles fill the available vertical space. To control the domain manually, pass domain through yAxisProps .
If your data uses keys other than open / high / low / close , map them with the dataKeys prop:
Use upColor and downColor props to change the colors of rising and falling candles. Colors are referenced from theme the same way as in other components, for example, blue , red.5 , orange.7 , etc. Any valid CSS color value is also accepted.
By default, candles take up the available category width. Use the maxCandleWidth prop to limit the maximum candle width in px:
To format values on the y-axis and inside the tooltip, use the valueFormatter prop. It accepts a function that takes a number value as an argument and returns a formatted value:
The tooltip displays open, high, low and close values with English labels by default. Use the labels prop to change them:
Use xAxisLabel and yAxisLabel props to display axis labels:
Use the referenceLines prop to render reference lines. Reference lines are useful for highlighting support and resistance levels. Each line is positioned by its y data value and supports a theme color and a label :