Example of Candlestick and volume in React Stock Chart Component


This React Stock Chart example visualizes the AAPL stock price with Candle chart. Tooltip and crosshair show the information about the data and period.

More Details...


In this example, you can see how to render and configure a stock chart for AAPL data, as well as how to use column charts to display data volume. The Period Selector and Range Selector can be used to select a range with specified periods.

The legend is enabled, and you can use it to toggle the visibility of series in the stock chart. To customize the legend in the stock chart, use the stockChartLegendSettings property.

Injecting Module

The Stock chart component features are segregated into individual feature-wise modules. To use date-time axis, inject the DateTime module using the StockChart.Inject(DateTime) method. To use the CandleSeries, inject the CandleSeries module using the StockChart.Inject(CandleSeries) method.