Overview
React Stock Chart visualizes stock price movements over selected time periods using chart types such as Candlestick, OHLC, and HiLo, along with range tools. Zooming, panning, tooltips, crosshair, trackball, period selection, range selection, and events support detailed exploration of financial data.
React Stock Chart Code Example
Get started with the React Stock Chart using the TSX code example below. Also explore demo that shows how to render the React Stock Chart.
import { CandleSeries, DateTimeCategory, Inject, SplineSeries, StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective } from "@syncfusion/ej2-react-charts";
import { defaultData } from "./stockdata";
function App() {
return (
<StockChartComponent id='stockchartdefault' enablePeriodSelector={false} primaryXAxis={{ valueType: 'DateTimeCategory' }} title='AAPL Stock Price'>
<Inject services={[DateTimeCategory, SplineSeries, CandleSeries]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={defaultData} xName='x' type='Candle' />
</StockChartSeriesCollectionDirective>
</StockChartComponent>
);
}
export default App;const rawData: number[][] = [
[1632960000000, 169.08, 171.58, 168.34, 171.18], [1633046400000, 172.13, 175.96, 170.7, 175.08],
[1633334400000, 174.91, 176.75, 173.92, 174.56], [1633411200000, 175.21, 179.63, 174.69, 179.45],
[1633497600000, 181.12, 182.13, 175.53, 175.74], [1633584000000, 175.25, 177.74, 172.21, 174.33],
[1633670400000, 175.11, 179.5, 172.31, 179.3], [1633920000000, 179.28, 181.14, 170.75, 172.26],
[1634006400000, 169.93, 173.47, 169.69, 171.14], [1634092800000, 168.28, 170.58, 167.46, 169.75],
[1634179200000, 171.56, 173.2, 169.12, 172.99], [1634265600000, 177.52, 179.63, 177.13, 179.07],
[1634524800000, 175.85, 176.85, 175.27, 176.28], [1634611200000, 177.09, 180.42, 177.07, 180.33],
[1634697600000, 180.16, 181.33, 178.53, 179.29],
];Interactive chart
Interactive features such as zooming, panning, crosshairs, trackballs, events, and selection support detailed financial data exploration.
Candlestick with volume
Displays price action and trading volume within a single financial visualization.
Multiple series
Plot multiple series in a single chart to compare different stock values. Enabling a legend and a tooltip gives more information about an individual series.
Plot band
Draw special attention to any region of the chart or graph with the help of plot bands.
Range selector
Use the range selector to filter a date range for data that needs to be visualized.
Period selector
Use the period selector to choose a range of data points at predetermined intervals with a single click.
Series type
Visualize data using different series types like candle, OHLC, HiLo, line, spline, area, and spline area. The series type can be changed using the series options in the period selector.
- What is the Syncfusion React Stock Chart?
Legend
Legends provide additional information helpful in identifying individual data or series in a Stock Chart.
Indicators
Technical indicators analyze historical price, volume, or open-interest data and can be added through the period selector. Suitable for evaluating trend direction, momentum, volatility, and other market patterns from historical data.
Trendlines
Trendlines analyze existing data to show underlying direction and patterns and can be added through the period selector. Suitable for evaluating historical trends and projecting possible movement based on observed data.
Print and export
Export React Stock Chart to PDF documents or to image formats such as SVG, PNG, and JPEG as well as export chart data to XLSX and CSV files in the client-side. Print the rendered Stock Charts and graphs directly from the browser.
Axis type
Visualize data using different axis types like numeric, logarithmic, date-time, and date-time category. Axis customization options improve readability and presentation.
Accessibility
Keyboard navigation
Keyboard navigation supports access to major interactive features such as tooltips, trackball, legends, collapse controls, zooming, and panning. Suitable for accessibility-focused interfaces and keyboard-based chart interaction.
Screen reader
WAI-ARIA attributes provide descriptive information that assistive technologies such as screen readers can interpret. High-contrast visual elements support visibility and accessibility across chart interactions.
Right to left (RTL)
Right-to-left rendering displays text and layout elements from right to left. Suitable for applications that support RTL languages such as Arabic and Hebrew.
Not sure how to create your first React Stock Chart? Our tutorial videos and documentation can help.
I’d love to watch it now I’d love to read it nowFrequently Asked Questions
What capabilities does Syncfusion React Stock Chart provide?
Visualize and analyze stock data with candlestick, OHLC, HiLo Chart.
Interact and explore Stock Charts with features such as period selector, range selector, zoom and pan, crosshair, tooltip, trackball, and more.
- Flexible UI customization of period and range selector with fluent APIs.
- A React Stock Chart that offers interactive features such as zooming, panning, and period and range selectors to explore stock data.
10 Technical indicators and 7 series types including candle, OHLC, and HiLo, with animation.
Configuration through component properties and a documented API.
- Supports modern browsers such as Chrome, Firefox, Opera, Microsoft Edge, and Safari.
- Mobile-touch friendly and responsive.
Expansive learning resources such as demos and documentation to learn quickly and get started with React Stock Chart.
Where is the Syncfusion React Stock Chart demo available?
The React Stock Chart demo, which demonstrates how to render and configure the Stock Chart.
Is Syncfusion React Stock Chart available for free?
No, the React Stock Chart is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
How can developers get started with Syncfusion React Stock Chart?
A good place to start would be our comprehensive getting started documentation.
Trusted by the world’s leading companies
Our Customers Love Us
Here are some of their experiences.
Transform your applications today by downloading our free evaluation version
No credit card required | 1.8M+ downloads
Syncfusion React Stock Chart Resources
Figma Download
Explore all Syncfusion React components
Explore over 140+ React UI components featuring established, and production-ready controls built for modern web app development.
- SMART COMPONENTSDATA VISUALIZATIONDROPDOWNSFILE VIEWERS & EDITORSBUTTONSINTERACTIVE CHATINPUTSNAVIGATIONNOTIFICATIONS
Standalone UI SDKs
Integrate the DataGrid, Chart, Scheduler, Gantt, Rich Text Editor, File Manager, and Diagram UI components into applications to enable rich interaction and visualization, delivering a seamless user experience.
Document Solutions
Integrate the PDF Viewer, DOCX Editor, Spreadsheet Editor, and document-processing libraries into the React applications to enable a smooth user experience.
