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