Try Highcharts now

Use the Highcharts CDN

Use the Highcharts CDN to access files directly

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

Install with NPM

The official Highcharts NPM package comes with support for CommonJS and contains Highcharts, and its Stock, Maps and Gantt packages. Read more about how to install Highcharts with NPM.

npm install highcharts --save

Highcharts comes with TypeScript support.

Highcharts in your favorite TypeScript-Editor provides auto-completion, integrated documentation, and type checking.

Use Highcharts in your TypeScript project

Install Highcharts from the NPM registry to use the latest TypeScript definitions.

npm install highcharts

Extend the Highcharts definitions for customizations

If you do customization on Highcharts code, you can also extend the TypeScript definitions.

declare module `highcharts` {
	interface Options {
		myCustomOption: Record;
	}
}

Install

By using NPM

npm install highcharts-react-official

Or try this new beta

npm install @highcharts/react

By using yarn

yarn add highcharts-react-official

Import

Import highcharts and the wrapper

Javascript
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

Ready to use in JSX

JavaScript
<HighchartsReact
	highcharts={Highcharts}
	options={options}
/>

Documentation: https://github.com/highcharts/highcharts-react

Install

By using npm

npm install highcharts-angular

Make sure the Highcharts library is added by installing it

npm install highcharts

Add HighchartsChartModule to your app.module.ts imports

TypeScript
import { HighchartsChartModule } from 'highcharts-angular';
@NgModule({
	imports: [
		...
		HighchartsChartModule

Import

In the component where you like to add the chart import the Highcharts library like

TypeScript
import * as Highcharts from 'highcharts';

Usage

In HTML file, add highcharts-chart component and use property binding to assign the Highcharts library and your chartOptions

The charts options can be stored in your component TS file

TypeScript
export class YourComponent {
	Highcharts: typeof Highcharts = Highcharts;
	chartOptions: Highcharts.Options = {
		series: [{
			data: [1, 2, 3]
		}]
	};

Documentation: https://github.com/highcharts/highcharts-angular

Install

By using npm

npm install highcharts-vue

By using yarn

yarn add highcharts-vue

Add using a script tag

<script
src="https://cdn.jsdelivr.net/npm/highcharts-vue/dist/highcharts-vue.min.js">
</script>>

Live demo: https://jsfiddle.net/BlackLabel/21nb5u98/

Import and register

Javascript
import HighchartsVue from 'highcharts-vue'
// Vue 2
Vue.use(HighchartsVue)
// Vue 3
createApp(App).use(HighchartsVue)

Usage

Use the highcharts component with your options

JavaScript
<highcharts
	:options="chartOptions"
/>

Documentation: https://github.com/highcharts/highcharts-react

The readme on this GitHub repository contains all the essential information required to utilize this wrapper. Follow the provided link for further details. Feel free to post feature requests or report bugs on this repository.

Installing Highcharts in your Flutter project is a straightforward process and typically involves just a single command. This quick guide will walk you through the basic steps of adding the Flutter package to your project.

Use pub.dev

This is the official Flutter way of installing additional packages.

Run the following command in your project folder to install the latest Highcharts for Flutter:

flutter pub add highcharts_flutter

You can also limit the process to a specific version of the Flutter integration

flutter pub add highcharts_flutter:0.1.0

More information about the Highcharts for Flutter package can be found on [our pub.dev profile]

Use GitHub

Use the following command, to test out an experimental version of Highcharts for Flutter:

dart pub add 'highcharts_flutter:{"git":"https://github.com/highcharts/highcharts_flutter.git"}'

You can also add a specific version (tag):

dart pub add 'highcharts_flutter:{"git":{"url":"https://github.com/highcharts/highcharts_flutter.git","tag":"v0.1.0"}}'

Or use an experimental branch:

dart pub add 'highcharts_flutter:{"git":{"url":"https://github.com/highcharts/highcharts_flutter.git","ref":"main"}}'

Install

By using NPM

npm install @highcharts/svelte

By using yarn

yarn add @highcharts/svelte

Usage

<script>
import Chart from ‘@highcharts/svelte’;
									 
// these options are reactive
let options = {
	series: [{
		type: ‘line’,
		data: [1, 2, 3]
	}]
}
</script>

Highcharts modules

In order to use different charts (stock, map, gantt), you can import the appropriate component:

import { StockChart, MapChart, GanttChart } from ‘@highcharts/svelte’;

You can also import & apply other Highcharts modules:

import Highcharts from ‘highcharts’;
import Exporting from ‘highcharts/modules/exporting’;
		
Exporting(Highcharts);

Documentation

For all the possible props and options, refer to the documentation: https://github.com/highcharts/highcharts-svelte

Install

Highcharts Core for Python

To install Highcharts Core for Python, just execute:

$ pip install highcharts-core

Highcharts Stock for Python

To install Highcharts Stock for Python, just execute:

$ pip install highcharts-stock

Highcharts Maps for Python

To install Highcharts Maps for Python, just execute:

$ pip install highcharts-maps

Highcharts Gantt for Python

To install Highcharts Gantt for Python, just execute:

$ pip install highcharts-gantt

Documentation

Documentation: https://highchartspython.com/documentation/

Installing Highcharts Dashboards

Highcharts Dashboards is a development library pre-loaded with time-saving features that will save you hours of development time on your dashboard projects.

Use the Highcharts CDN

Instead of downloading, feel free to use the Highcharts CDN to access files directly.

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

Install with NPM

The official Highcharts Dashboards NPM package comes with support for CommonJS. Read more about how to install Highcharts Dashboards with NPM.

npm install @highcharts/dashboards --save

Load as modules or create your own build

Highcharts can also be loaded as ECMAScript modules from our CDN, as AMD modules, as UMD modules or as TypeScript. You can also create your own tailored build to include only the features you need.

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid.css"></link> 

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css"></link>

npm install @highcharts/grid-lite

npm install @highcharts/grid-pro

Load as modules or create your own build

Highcharts can also be loaded as ECMAScript modules from our CDN, as AMD modules, as UMD modules or as TypeScript. You can also create your own tailored build to include only the features you need.

Download Our Libaries

The zip archive contains Javascript files and examples. Unzip the zip package and open index.html in your browser to see the examples.

Need more help getting started? Check out these resources.

Highcharts has the most significant developer community of any premium charting library. Our community members are eager to offer additional assistance, platform-specific implementation advice and inspiration when you need it.