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.

​
Installation Methods

There are several ways to install and use Highcharts. Choose the method that best fits your project’s needs.
This guide covers Highcharts Core, Stock, Maps, and Gantt. For Highcharts Dashboards, see the Dashboards Installation guide.

​
1. Install from npm

The recommended way to install Highcharts for modern web applications.
1

Install the package

Install Highcharts as a dependency in your project:
npm install highcharts --save
The npm package includes Highcharts Core, Stock, Maps, Gantt, and all modules.
2

Import in your code

Load Highcharts using CommonJS require:
var Highcharts = require('highcharts');

// Load additional modules
require('highcharts/modules/exporting');
require('highcharts/modules/export-data');

// Create your chart
Highcharts.chart('container', {
  /* Highcharts options */
});
Or using ES6 imports:
import Highcharts from 'highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/export-data';

Highcharts.chart('container', {
  // options - see https://api.highcharts.com/highcharts
});

​
Load Stock, Maps, or Gantt

Highcharts is already included in Stock, Maps, and Gantt bundles: 
var Highcharts = require('highcharts/highstock');

// Load Maps as a module to get both Stock and Maps
require('highcharts/modules/map');
The Stock, Maps, and Gantt bundles can’t run on the same page with each other or with highcharts. If you need multiple products on one page, load them as modules instead.

​
Nightly Builds

Access the latest development version before release: 
npm install --save highcharts/highcharts-dist#nightly
Nightly builds are not recommended for production as they may contain bugs and are not considered stable.
To update from nightly: 
npm uninstall highcharts && npm install --save highcharts/highcharts-dist#nightly

​
2. Load from CDN

The fastest way to get started without installation.
1

Add script tags

Include Highcharts in the <head> section of your HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
2

Add optional modules

Load additional modules as needed:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

​
Version-Specific CDN URLs

Load a specific version or latest minor version: 
<script src="https://code.highcharts.com/12/highcharts.js"></script>
Browse all available files at code.highcharts.com.

​
3. ES6 Modules from CDN

Load Highcharts as ECMAScript modules for modern browsers. 
<script type="module">
  import Highcharts from 'https://code.highcharts.com/esm/highcharts.js';
  import 'https://code.highcharts.com/esm/modules/accessibility.js';
  
  Highcharts.chart('container', {
    chart: { type: 'bar' },
    title: { text: 'Fruit Consumption' },
    series: [{
      name: 'Sales',
      data: [1, 3, 2, 4]
    }]
  });
</script>

​
Dynamic Imports with Lazy Loading

Load Highcharts on demand: 
const loadHighchartsAndCreateChart = async () => {
  const { default: Highcharts } = 
    await import('https://code.highcharts.com/esm/highcharts.js');
  await import('https://code.highcharts.com/esm/highcharts-more.js');
  await import('https://code.highcharts.com/esm/modules/exporting.js');
  
  Highcharts.chart('container', { /* options */ });
};

​
4. Custom Builds with Tree Shaking

Reduce bundle size by importing only what you need.
1

Import core modules

import Chart from 'highcharts/es-modules/Core/Chart/Chart.js';
import LineSeries from 'highcharts/es-modules/Series/Line/LineSeries.js';

// Create a simple line chart
new Chart('container', {
  series: [{ type: 'line', data: [1, 2, 3] }]
});
2

Bundle with Webpack

Create a webpack config:
// webpack.config.js
module.exports = {
  entry: './mychart.js',
  mode: 'production',
  output: {
    filename: 'mybundle.js'
  }
};
Build the bundle:
npx webpack -c webpack.config.js

​
Size Comparison with Tree Shaking

Bundle (compiled + gzipped)SizeSavings
highcharts.js100,509 bytes0%
LineSeries.js78,268 bytes22%
ColumnSeries.js80,046 bytes20%
PieSeries.js83,085 bytes17%

​
5. Download and Self-Host

Host the files on your own server.
1

Download Highcharts

Get the latest version from highcharts.com/download
2

Place files on your server

Upload the files to your web server (e.g., /js/highcharts.js)
3

Reference in HTML

<script src="/js/highcharts.js"></script>
<script src="/js/modules/exporting.js"></script>

​
Loading Multiple Products

To use Stock, Maps, and Gantt on the same page, load them as modules: 
<script src="/js/highcharts.js"></script>
<script src="/js/modules/stock.js"></script>
<script src="/js/modules/map.js"></script>
<script src="/js/modules/gantt.js"></script>
Don’t load highstock.js, highmaps.js, or highcharts-gantt.js together on the same page. They include conflicting code. Use the module approach shown above instead.

​
Legacy Browser Support (IE 11)

For IE 11 and other legacy browsers, use the ES5 build: 
<script src="https://code.highcharts.com/es5/highcharts.js"></script>
<script src="https://code.highcharts.com/es5/modules/exporting.js"></script>
The ES5 folder is required for browsers like IE 11 and QtWeb (used by wkhtmltopdf). This version also works with modern browsers.

​
Styled Mode (CSS)

When using styled mode with npm, import the CSS files: 
import Highcharts from 'highcharts';
import 'highcharts/css/highcharts.css';
Or with HTML: 
@import url("/css/highcharts.css");
@import url("/css/themes/dark-unica.css");

​
Next Steps

Quick Start

Create your first chart in minutes

Your First Chart

Step-by-step tutorial for beginners

Custom Packages

Build custom Highcharts files to reduce size

ES Modules Guide

Detailed guide on ES6 modules and tree shaking