Getting started with Highcharts Stock

Highcharts Stock allows to create stock or general timeline charts for your web and mobile apps. Features sophisticated navigation for high-volume data, user annotations and over 40 built-in Technical Indicators.

Find demos of Highcharts Stock charts here to quickly get an overview of Highcharts Stock’s capabilities.

Get started

Load Highcharts Stock as a standalone library when there is no need for other Highcharts dependencies.

Example of loading Highcharts Stock into a webpage

<script src="https://code.highcharts.com/stock/highstock.js"></script>

Load Highcharts Stock as a module when a project needs both Highcharts and Highcharts Stock loaded at the same time. Place the script tag or import statement after loading the main library.

Example of loading both libraries in a webpage

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/stock/modules/stock.js"></script>

For alternative loading and bundling patterns, for UMD, AMD, CommonJS or ES6 modules, find more information here. Highcharts Stock follows the same patterns as described for Highcharts.

Constructor

Run the stockChart constructor for initializing a Stock chart visualization. The constructor takes two required parameters and a third optional parameter.

Highcharts.stockChart('container', {
    // configuration options
}, myCallback);
  1. id: The id of the HTML element used for rendering the chart.
  2. config: An object with configuration options for defining the Stock chart.
  3. callback: Optional, a callback for getting a handle on the chart, after rendering.

See also explained here in Stock API

Simple example

See below the simple live example of a Stock chart

Edit this page