This React Stock Chart example visualizes the AAPL stock price with Candle chart. Tooltip and crosshair show the information about the data and period.
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.