Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/highcharts/highcharts/llms.txt

Use this file to discover all available pages before exploring further.

Highstock is a specialized charting library built on top of Highcharts, designed specifically for financial and time-series data visualization.

​
Overview

Stock charts are optimized for displaying large datasets with time-based data, featuring:
  • Navigator for browsing large datasets
  • Range selector for quick time period selection
  • Advanced data grouping
  • Technical indicators
  • OHLC and candlestick series
  • Gap handling

​
Basic Stock Chart

Highcharts.stockChart('container', {
  title: {
    text: 'AAPL Stock Price'
  },
  rangeSelector: {
    selected: 1
  },
  series: [{
    name: 'AAPL',
    data: [
      [Date.UTC(2024, 0, 1), 185.64],
      [Date.UTC(2024, 0, 2), 185.92],
      [Date.UTC(2024, 0, 3), 184.25],
      [Date.UTC(2024, 0, 4), 181.91],
      [Date.UTC(2024, 0, 5), 181.18]
    ],
    tooltip: {
      valueDecimals: 2
    }
  }]
});

​
OHLC Charts

OHLC (Open-High-Low-Close) charts display four values for each time period: 
Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'AAPL Stock Price'
  },
  series: [{
    type: 'ohlc',
    name: 'AAPL Stock Price',
    data: [
      [Date.UTC(2024, 0, 1), 180.00, 186.00, 179.50, 185.64], // date, open, high, low, close
      [Date.UTC(2024, 0, 2), 185.64, 187.00, 184.00, 185.92],
      [Date.UTC(2024, 0, 3), 185.92, 186.50, 183.00, 184.25],
      [Date.UTC(2024, 0, 4), 184.25, 184.50, 181.00, 181.91],
      [Date.UTC(2024, 0, 5), 181.91, 182.50, 180.00, 181.18]
    ],
    dataGrouping: {
      units: [[
        'week',
        [1]
      ], [
        'month',
        [1, 2, 3, 4, 6]
      ]]
    }
  }]
});

​
Candlestick Charts

Candlestick charts are similar to OHLC but use filled and hollow bodies: 
Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'Stock Price - Candlestick'
  },
  series: [{
    type: 'candlestick',
    name: 'Stock Price',
    data: [
      [Date.UTC(2024, 0, 1), 180.00, 186.00, 179.50, 185.64],
      [Date.UTC(2024, 0, 2), 185.64, 187.00, 184.00, 185.92],
      [Date.UTC(2024, 0, 3), 185.92, 186.50, 183.00, 184.25]
    ]
  }]
});

​
Technical Indicators

Add popular technical indicators to your charts: 
Highcharts.stockChart('container', {
  series: [{
    type: 'candlestick',
    id: 'aapl',
    name: 'AAPL Stock Price',
    data: data
  }, {
    type: 'sma',
    linkedTo: 'aapl',
    params: {
      period: 14
    },
    marker: {
      enabled: false
    }
  }]
});

​
Range Selector Configuration

Customize the range selector buttons: 
Highcharts.stockChart('container', {
  rangeSelector: {
    buttons: [{
      type: 'day',
      count: 1,
      text: '1d',
      title: 'View 1 day'
    }, {
      type: 'week',
      count: 1,
      text: '1w',
      title: 'View 1 week'
    }, {
      type: 'month',
      count: 1,
      text: '1m',
      title: 'View 1 month'
    }, {
      type: 'month',
      count: 3,
      text: '3m',
      title: 'View 3 months'
    }, {
      type: 'month',
      count: 6,
      text: '6m',
      title: 'View 6 months'
    }, {
      type: 'ytd',
      text: 'YTD',
      title: 'View year to date'
    }, {
      type: 'year',
      count: 1,
      text: '1y',
      title: 'View 1 year'
    }, {
      type: 'all',
      text: 'All',
      title: 'View all'
    }],
    selected: 3,
    inputEnabled: true,
    buttonTheme: {
      width: 60
    }
  },
  series: [{
    data: data
  }]
});

​
Data Grouping

Automatically group data for better performance: 
Highcharts.stockChart('container', {
  plotOptions: {
    series: {
      dataGrouping: {
        enabled: true,
        forced: true,
        units: [[
          'day',
          [1]
        ], [
          'week',
          [1]
        ], [
          'month',
          [1, 3, 6]
        ], [
          'year',
          [1]
        ]]
      }
    }
  },
  series: [{
    data: largeDataset
  }]
});

​
Flags and Events

Mark important events on the chart: 
Highcharts.stockChart('container', {
  series: [{
    id: 'dataseries',
    data: data
  }, {
    type: 'flags',
    data: [{
      x: Date.UTC(2024, 0, 15),
      title: 'Earnings',
      text: 'Q4 Earnings Report'
    }, {
      x: Date.UTC(2024, 1, 1),
      title: 'Split',
      text: '2:1 Stock Split'
    }],
    onSeries: 'dataseries',
    shape: 'squarepin',
    width: 16
  }]
});

​
Compare 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
    }
  },
  tooltip: {
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
    valueDecimals: 2,
    split: true
  },
  series: [{
    name: 'AAPL',
    data: aaplData
  }, {
    name: 'MSFT',
    data: msftData
  }, {
    name: 'GOOG',
    data: googData
  }]
});

​
Use Cases

Financial Analysis

  • Stock price tracking
  • Portfolio monitoring
  • Technical analysis
  • Forex trading

Time Series Data

  • Sensor data
  • Performance metrics
  • Resource monitoring
  • Long-term trends

​
Data Format

Stock charts use timestamp-based data: 
data: [
  [Date.UTC(2024, 0, 1), 185.64],
  [Date.UTC(2024, 0, 2), 185.92]
]
Stock charts require the Highstock library (highstock.js) instead of the standard Highcharts library.
For optimal performance with large datasets, enable data grouping and use the boost module.