Typescript

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

Highcharts for React

Install

By using npm

npm install highcharts-react-official

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

Highcharts for Angular

Install

By using npm

npm install highcharts-angular

Make sure the Highcharts library is added by installing it

npm install highcharts

Add HighchartsChartModule to you 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

Highcharts for Python

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/

Highcharts for Vue

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.

Highcharts for Flutter (Beta)

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"}}'

Highcharts for Svelte

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