JavaScript charting framework
npm install highchartsThe only charting library you need. Highcharts is a pure JavaScript/TypeScript charting library, built from scratch that makes it easy to create responsive, interactive, and accessible charts for web and mobile platforms.
Trusted by 80 out of the world's 100 largest companies, Highcharts offers a comprehensive suite including Highcharts Core, Stock (financial charting), Maps (geo maps), and Gantt.
Also note the related packages for Highcharts Dashboards, Highcharts Grid Lite, and Highcharts Grid Pro.
Note:
This package is intended for supporting client-side JavaScript charting through bundlers like Parcel, Vite or Webpack, and development environments like Babel or TypeScript. If you intend to generate static charts on the server side, use the Highcharts node.js Export Server instead.
Note on package size: The npm package includes all additional modules, typescript typing, various module loading options, and additional packages. However, the actual library you bundle is lightweight. We always strive to keep the core highcharts.js minified & gzipped at <100kB, with zero dependencies.
There are many ways to use Highcharts. Below are some basic snippets, and our Installation docs can be consulted for more details.
bash
npm install --save highcharts
`For server-side chart generation, use the Highcharts Export Server instead.
#### Nightly builds
`bash
npm install --save highcharts/highcharts-dist#nightly
`
Note: Nightly builds are not recommended for production as they may contain bugs and are not considered stable.$3
`bash
pnpm add highcharts
`$3
`html
`
Browse all available files at code.highcharts.com.Note: The CDN is not recommended for at-scale production, and may be rate limited to maintain
availability according to our fair usage policy.
Usage
Here are a few quick start samples. Visit our Getting started tutorials to learn more.
$3
ES6 modules allow tree shaking to minimize your bundle size by including only the features you use.#### With TypeScript
`ts
import Highcharts from 'highcharts/esm/highcharts.js';
// Or load Stock, Maps, or Gantt
// import Highcharts from 'highcharts/esm/highstock.js';// Load additional modules as needed
import 'highcharts/esm/modules/exporting.js';
// Create your chart
Highcharts.chart('container', {
// options - see https://api.highcharts.com/highcharts
});
`#### With Babel
`js
import Highcharts from 'highcharts/esm/highcharts';
// Or load Stock, Maps, or Gantt
// import Highcharts from 'highcharts/esm/highstock';// Load additional modules as needed
import 'highcharts/esm/modules/exporting';
// Create your chart
Highcharts.chart('container', {
// options - see https://api.highcharts.com/highcharts
});
`$3
`js
// Load Highcharts
var Highcharts = require('highcharts');
// Or load Stock, Maps, or Gantt
// var Highcharts = require('highcharts/highstock');// Load and initialize modules
require('highcharts/modules/exporting')(Highcharts);
// Create your chart
Highcharts.chart('container', {
// options - see https://api.highcharts.com/highcharts
});
``---
Built with passion by Highsoft.