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

Install

By Visual Studio – use “Manage Nuget packages” from context menu.

Import

Import highcharts and modules (in this case: exporting.js) and the wrapper in cshtml file.

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

@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering;

Usage

in cshtml file for MVC project.

@{
var chartOptions = new Highcharts{...};
var renderer = new HighchartsRenderer(chartOptions);

}

@Html.Raw(renderer.RenderHtml())

Documentation: https://dotnet.highcharts.com/

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 iOS

Install

By using Swift Package Manager:

https://github.com/highcharts/highcharts-ios

By using Cocoapods:

pod 'Highcharts'

or by direct download:

https://github.com/highcharts/highcharts-ios/tree/master/Highcharts.xcframework

Import and preload

In your AppDelegate.swift import ‘Highcharts’ at the top:

import Highcharts

Add this line to your application:didFinishLaunchingWithOptions method:

HIChartView.preload()

Usage

• Create and add a ‘HIChartView‘ to your view hierarchy;
• Create and configure ‘HIOptions‘ object and set it into your ‘HIChartView‘:

let options = HIOptions()
...
chartView.options = options

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

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

Highcharts for Android

Install

By using Jitpack:

dependencies {
implementation 'com.github.highcharts:highcharts-android:10.3.
}

Or by direct download:

https://github.com/highcharts/highcharts-android/blob/master/highcharts-android.aar

Import

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

Java
import com.highsoft.highcharts.core.*;
import com.highsoft.highcharts.common.HIChartsClasses.*;

Usage

• Create and add a `HIChartView` to your view hierarchy;
• Create and configure `HIOptions` object and set it into your `HIChartView`:

Java
HIOptions options = new HIOptions();
...
chartView.setOptions(options);

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