Overview
The JavaScript Stock Chart is a well-crafted, easy-to-use financial charting package. Track and visualize the stock price of any company over a specific period of time using charting and range tools. The component comes with a lot of features such as zooming, panning, tooltip, crosshair, trackball, period selector, range selector, and events to make the stock charts more interactive.
Why choose Syncfusion Essential Studio® JavaScript Stock Chart?
High performance
Several data rendering optimizations have been used to achieve the best possible efficiency when plotting large amounts of data and managing high-frequency, real-time data.
Elegant animation
The Stock Chart for JavaScript provides fluid animation to present data with smooth transitions.
Interactive stock chart
The tooltip and crosshair cursor allow users to interact with the chart and obtain detailed information about data points.
Stock events
Visualize stock events to display many types of market events on the chart.
Admirable feature set
The JavaScript Stock Chart supports zooming and panning, multiple series, period selector, range selector, trendlines, and indicators.
Adapts to any resolution
Stock Chart has a highly responsive layout and an optimized design for desktops, touchscreens, and phones. It works well on all mobile phones that use iOS, Android, or Windows OS.
Attractive, customizable themes
Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the online Theme Studio tool to customize themes of Stock Chart easily.
Globalization and localization
Enable users from different locales to use the control by formatting dates, currency, and numbering to suit preferences.
JavaScript Stock Chart Code Example
Easily get started with the JavaScript Stock Chart using a few simple lines of HTML and TS code as demonstrated below. Also explore our JavaScript Stock Chart Example that shows you how to render and configure the Stock Chart in JavaScript.
<div class="control-section">
<div id="container"></div>
</div>import { StockChart } from '@syncfusion/ej2-charts';
import { chartData } from './indicator-data';
import { DateTime, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, SplineSeries } from '@syncfusion/ej2-charts';
import { AccumulationDistributionIndicator, AtrIndicator, BollingerBands, EmaIndicator, MomentumIndicator } from '@syncfusion/ej2-charts';
import { MacdIndicator, RsiIndicator, Trendlines, SmaIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-charts';
import { TmaIndicator, RangeTooltip, Tooltip, Crosshair, ITooltipRenderEventArgs, IStockChartEventArgs, ChartTheme }
from '@syncfusion/ej2-charts';
StockChart.Inject(DateTime, AreaSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, LineSeries, SplineSeries);
StockChart.Inject(AccumulationDistributionIndicator, AtrIndicator, BollingerBands, EmaIndicator, MomentumIndicator);
StockChart.Inject(MacdIndicator, RsiIndicator, SmaIndicator, StochasticIndicator);
StockChart.Inject(Trendlines, TmaIndicator, RangeTooltip, Tooltip, Crosshair, Export);
let stockChart: StockChart = new StockChart({
chartArea: { border: { width: 0 } },
primaryYAxis: {
lineStyle: { color: 'transparent' },
majorTickLines: { color: 'transparent', width: 0 },
},
primaryXAxis: { majorGridLines: { color: 'transparent' }, crosshairTooltip: { enable: true } },
series: [
{
dataSource: chartData,
type: 'Candle'
}
],
tooltipRender : (args: ITooltipRenderEventArgs) => {
if (args.text.split('<br/>')[4]) {
let target : number = parseFloat(args.text.split('<br/>')[4].split('<b>')[1].split('</b>')[0]);
let value : string = (target / 100000000).toFixed(1) + 'B';
args.text = args.text.replace(args.text.split('<br/>')[4].split('<b>')[1].split('</b>')[0], value);
}
},
tooltip: {
enable: true
},
crosshair: {
enable: true
},
title: