> ## 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 > 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](https://www.highcharts.com/docs/dashboards/installation) guide. ## 1. Install from npm The recommended way to install Highcharts for modern web applications. Install Highcharts as a dependency in your project: ```bash theme={null} npm install highcharts --save ``` The npm package includes Highcharts Core, Stock, Maps, Gantt, and all modules. Load Highcharts using CommonJS require: ```javascript theme={null} 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: ```javascript theme={null} 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: ```javascript CommonJS - Stock theme={null} var Highcharts = require('highcharts/highstock'); // Load Maps as a module to get both Stock and Maps require('highcharts/modules/map'); ``` ```javascript CommonJS - Maps theme={null} var Highcharts = require('highcharts/highmaps'); ``` ```javascript ES6 - Stock theme={null} import Highcharts from 'highcharts/highstock'; import 'highcharts/modules/exporting'; ``` ```javascript ES6 - Gantt theme={null} import Highcharts from 'highcharts/highcharts-gantt'; ``` 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: ```bash theme={null} 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: ```bash theme={null} npm uninstall highcharts && npm install --save highcharts/highcharts-dist#nightly ``` ## 2. Load from CDN The fastest way to get started without installation. Include Highcharts in the `` section of your HTML: ```html theme={null} ``` Load additional modules as needed: ```html theme={null} ``` ### Version-Specific CDN URLs Load a specific version or latest minor version: ```html Latest v12 theme={null} ``` ```html Specific Version theme={null} ``` ```html Stock Chart theme={null} ``` ```html Maps theme={null} ``` Browse all available files at [code.highcharts.com](https://code.highcharts.com). ## 3. ES6 Modules from CDN Load Highcharts as ECMAScript modules for modern browsers. ```html theme={null} ``` ### Dynamic Imports with Lazy Loading Load Highcharts on demand: ```javascript theme={null} 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. ```javascript theme={null} 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] }] }); ``` Create a webpack config: ```javascript theme={null} // webpack.config.js module.exports = { entry: './mychart.js', mode: 'production', output: { filename: 'mybundle.js' } }; ``` Build the bundle: ```bash theme={null} 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. Get the latest version from [highcharts.com/download](https://www.highcharts.com/download/) Upload the files to your web server (e.g., `/js/highcharts.js`) ```html theme={null} ``` ## Loading Multiple Products To use Stock, Maps, and Gantt on the same page, load them as modules: ```html theme={null} ``` 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: ```html theme={null} ``` 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: ```javascript theme={null} import Highcharts from 'highcharts'; import 'highcharts/css/highcharts.css'; ``` Or with HTML: ```css theme={null} @import url("/css/highcharts.css"); @import url("/css/themes/dark-unica.css"); ``` ## Next Steps Create your first chart in minutes Step-by-step tutorial for beginners Build custom Highcharts files to reduce size Detailed guide on ES6 modules and tree shaking This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.