Highcharts Stock

Highcharts Stock is a specialized charting library built on top of Highcharts Core, designed for visualizing time series data and financial charts. It includes all the features of Highcharts, plus advanced functionality for stock market analysis, technical indicators, and time-based data exploration.

Overview

Highcharts Stock extends Highcharts with powerful features for financial and time series data visualization, including:

Navigator: Fine-tune the visible range and scroll through large datasets
Range Selector: Quickly select predefined time ranges or specify exact intervals
Technical Indicators: 50+ built-in indicators for financial analysis
Financial Chart Types: Candlestick, OHLC, HLC, Heikin Ashi, and more
Data Grouping: Automatic point aggregation for improved performance
Advanced Crosshairs: Track data points across multiple series

Installation

npm install highcharts

yarn add highcharts

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

ES6 Module Import

import Highcharts from 'highcharts/highstock';

// Optional: Load additional modules
import indicators from 'highcharts/indicators/indicators';
import indicatorSMA from 'highcharts/indicators/sma';

indicators(Highcharts);
indicatorSMA(Highcharts);

Getting Started

Create your first stock chart with the Highcharts.stockChart() constructor:

Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'AAPL Stock Price'
  },
  series: [{
    name: 'AAPL',
    data: [
      [1147651200000, 67.79],
      [1147737600000, 64.98],
      [1147824000000, 65.26],
      // ... more data points
    ],
    tooltip: {
      valueDecimals: 2
    }
  }]
});

Key Features

Navigator and Scrollbar

The navigator provides a small overview chart that allows users to select and scroll through different time ranges.

Navigator

The navigator appears below the main chart and shows a condensed view of the entire dataset, with handles to adjust the visible range.

Highcharts.stockChart('container', {
  navigator: {
    enabled: true,
    height: 40,
    series: {
      type: 'areaspline',
      fillOpacity: 0.05
    }
  },
  scrollbar: {
    enabled: true,
    barBackgroundColor: '#808083',
    barBorderRadius: 7,
    barBorderWidth: 0,
    buttonBackgroundColor: '#808083',
    buttonBorderWidth: 0,
    buttonBorderRadius: 7
  },
  series: [{
    data: yourData
  }]
});

Range Selector

Quickly select common time ranges or specify custom date intervals.

rangeSelector: {
  buttons: [{
    type: 'day',
    count: 1,
    text: '1d'
  }, {
    type: 'week',
    count: 1,
    text: '1w'
  }, {
    type: 'month',
    count: 1,
    text: '1m'
  }, {
    type: 'month',
    count: 3,
    text: '3m'
  }, {
    type: 'year',
    count: 1,
    text: '1y'
  }, {
    type: 'all',
    text: 'All'
  }],
  selected: 4
}

Financial Chart Types

Candlestick

Display open, high, low, and close prices with colored bodies showing price direction

OHLC

Show open, high, low, and close as vertical lines with horizontal ticks

HLC

Display high, low, and close prices without open values

Heikin Ashi

Modified candlestick chart that smooths price data to identify trends

series: [{
  type: 'candlestick',
  name: 'AAPL Stock Price',
  data: [
    [timestamp, open, high, low, close],
    [1147651200000, 67.79, 68.15, 67.35, 67.93],
    // ... more data
  ]
}]

Technical Indicators

Highcharts Stock includes 50+ technical indicators for financial analysis. Indicators are implemented as series linked to the main data.

Load the indicators module

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

Load specific indicator modules

<script src="https://code.highcharts.com/stock/indicators/ema.js"></script>
<script src="https://code.highcharts.com/stock/indicators/rsi.js"></script>

Add indicators to your chart

series: [{
  id: 'aapl',
  name: 'AAPL Stock Price',
  data: priceData
}, {
  type: 'sma',
  linkedTo: 'aapl',
  params: {
    period: 14
  }
}, {
  type: 'ema',
  linkedTo: 'aapl',
  params: {
    period: 7
  }
}]

Available Indicators

Overlays (same scale as price chart):

SMA (Simple Moving Average)
EMA (Exponential Moving Average)
Bollinger Bands
Pivot Points
VWAP (Volume Weighted Average Price)
And many more…

Oscillators (separate axis):

RSI (Relative Strength Index)
MACD (Moving Average Convergence Divergence)
Stochastic
CCI (Commodity Channel Index)
ATR (Average True Range)
And many more…

Data Grouping

Automatically aggregate data points based on zoom level for improved performance with large datasets.

plotOptions: {
  series: {
    dataGrouping: {
      enabled: true,
      approximation: 'average',
      groupPixelWidth: 10,
      units: [[
        'day',
        [1]
      ], [
        'week',
        [1]
      ], [
        'month',
        [1, 3, 6]
      ]]
    }
  }
}

Advanced Examples

Candlestick with Volume

Highcharts.stockChart('container', {
  yAxis: [{
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: 'OHLC'
    },
    height: '60%',
    lineWidth: 2
  }, {
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: 'Volume'
    },
    top: '65%',
    height: '35%',
    offset: 0,
    lineWidth: 2
  }],
  series: [{
    type: 'candlestick',
    name: 'AAPL',
    data: ohlcData,
    dataGrouping: {
      units: [['week', [1]], ['month', [1, 2, 3, 4, 6]]]
    }
  }, {
    type: 'column',
    name: 'Volume',
    data: volumeData,
    yAxis: 1,
    dataGrouping: {
      units: [['week', [1]], ['month', [1, 2, 3, 4, 6]]]
    }
  }]
});

MACD with Pivot Points

series: [{
  id: 'aapl',
  name: 'AAPL Stock Price',
  data: priceData
}, {
  type: 'pivotpoints',
  linkedTo: 'aapl',
  zIndex: 0,
  lineWidth: 1,
  dataLabels: {
    overflow: 'none',
    crop: false,
    y: 4,
    style: {
      fontSize: '9px'
    }
  }
}, {
  type: 'macd',
  yAxis: 1,
  linkedTo: 'aapl'
}]

Comparing Multiple Stocks

Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 4
  },
  yAxis: {
    labels: {
      formatter: function () {
        return (this.value > 0 ? ' + ' : '') + this.value + '%';
      }
    },
    plotLines: [{
      value: 0,
      width: 2,
      color: 'silver'
    }]
  },
  plotOptions: {
    series: {
      compare: 'percent',
      showInNavigator: true
    }
  },
  series: [{
    name: 'AAPL',
    data: aaplData
  }, {
    name: 'MSFT',
    data: msftData
  }, {
    name: 'GOOG',
    data: googData
  }]
});

Stock Tools

Stock Tools provide an advanced GUI for drawing annotations and managing indicators.

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

stockTools: {
  gui: {
    enabled: true,
    buttons: ['indicators', 'separator', 'simpleShapes', 'lines', 'crookedLines', 'measure', 'advanced', 'toggleAnnotations', 'separator', 'verticalLabels', 'flags', 'separator', 'zoomChange', 'fullScreen', 'typeChange', 'separator', 'currentPriceIndicator', 'saveChart']
  }
}

Performance Tips

Optimize Large Datasets

Enable data grouping for datasets with thousands of points
Use turboThreshold to control when optimization kicks in
Consider lazy loading data as users zoom and pan
Use appropriate approximation functions for your data type

plotOptions: {
  series: {
    turboThreshold: 5000,
    dataGrouping: {
      enabled: true
    }
  }
}

API Reference

Complete Highcharts Stock API documentation

Live Demos

Interactive examples and demos

Technical Indicators

Full list of 50+ available technical indicators

Chart Types

Explore all financial chart types available

Next Steps

Explore Technical Indicators for advanced analysis
Learn about Data Grouping for performance optimization
Check out Financial Chart Types for different visualization options
Try the Stock Tools for interactive chart annotation

Getting Started

Core Concepts

Chart Types

Features

Advanced

Products

Overview

Installation

ES6 Module Import

Getting Started

Key Features

Navigator and Scrollbar

Navigator

Range Selector

Financial Chart Types

Candlestick

OHLC

HLC

Heikin Ashi

Technical Indicators

Available Indicators

Data Grouping

Advanced Examples

Candlestick with Volume

MACD with Pivot Points

Comparing Multiple Stocks

Stock Tools

Performance Tips

Optimize Large Datasets

API Reference

Live Demos

Technical Indicators

Chart Types

Next Steps

​Overview

​Installation

​ES6 Module Import

​Getting Started

​Key Features

​Navigator and Scrollbar

Navigator

​Range Selector

​Financial Chart Types

Candlestick

OHLC

HLC

Heikin Ashi

​Technical Indicators

​Available Indicators

​Data Grouping

​Advanced Examples

​Candlestick with Volume

​MACD with Pivot Points

​Comparing Multiple Stocks

​Stock Tools

​Performance Tips

Optimize Large Datasets

​Related Resources

API Reference

Live Demos

Technical Indicators

Chart Types

​Next Steps

Overview

Installation

ES6 Module Import

Getting Started

Key Features

Navigator and Scrollbar

Range Selector

Financial Chart Types

Technical Indicators

Available Indicators

Data Grouping

Advanced Examples

Candlestick with Volume

MACD with Pivot Points

Comparing Multiple Stocks

Stock Tools

Performance Tips

Related Resources

Next Steps