Highcharts

The 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.

Links

• Official website: www.highcharts.com
• Demos: www.highcharts.com/demo
• Download: www.highcharts.com/download
• License: www.highcharts.com/license
• Documentation: www.highcharts.com/docs
• Support: www.highcharts.com/support
• Issues: Working repo

Why Highcharts?

Lightweight & Performant

Despite the comprehensive feature set, Highcharts has a small core library optimized for performance, with zero dependencies. With ES6 module support and tree shaking, you only load what you need, keeping your bundle size minimal and your applications fast. WebGL/WebGPU features boost the rendering of millions of data points if necessary.

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.

Comprehensive Chart Library

From area to x-range, all major chart types and more are included. Whether you need basic visualizations or complex financial charts, we've got you covered.

Accessibility First

Built-in accessibility features like keyboard navigation, screen reader support, and audio charts help you reach the widest audience possible. We actively contribute to research in the field of accessible data visualization, and strive to make data more accessible to all.

Highly Customizable

Choose whether to style your charts via code configuration or CSS. Any visual element can be customized, and let you create on-brand visualizations that render crisp and clear at any resolution. Customizability also goes beyond the visual, allowing deep nested interactions if your use-case requires it.

Vibrant Community

We love to learn how you are using Highcharts, and what you would like to see from us in the future. Join our significant developer community on GitHub, Stack Overflow, Discord, and Highcharts Forums.

Works with Your Stack

Highcharts is front-end tech that works with any back-end database or server stack, and is available for popular frameworks and technologies including React, Angular, Vue, Svelte, Node.js, Flutter, and Python.

License

SEE LICENSE IN LICENSE.md.

Installation

There are many ways to use Highcharts. Below are some basic snippets, and our Installation docs can be consulted for more details.

Install from npm

npm install --save highcharts

For server-side chart generation, use the Highcharts Export Server instead.

Nightly builds

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.

Install with PNPM

pnpm add highcharts

Use our CDN

<script src="https://code.highcharts.com/highcharts.js"></script>

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.

Load as ES6 module (Recommended for Tree Shaking)

ES6 modules allow tree shaking to minimize your bundle size by including only the features you use.

With TypeScript

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

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
});

Load as CommonJS module

// 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.