Installation

Learn how to install and load Highcharts in your project using npm, CDN, ES modules, or local files.

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:

CommonJS - Stock

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:

Latest v12

<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)	Size	Savings
highcharts.js	100,509 bytes	0%
LineSeries.js	78,268 bytes	22%
ColumnSeries.js	80,046 bytes	20%
PieSeries.js	83,085 bytes	17%

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