Framework Integrations

Overview

Highcharts provides official wrappers and components for popular JavaScript frameworks, making it easy to create reactive, component-based charts.

React Integration

Use the official @highcharts/react wrapper for seamless React integration.

Installation

npm install highcharts @highcharts/react

yarn add highcharts @highcharts/react

pnpm add highcharts @highcharts/react

Basic Example

JSX Component
With Options Object
With State

import React from 'react';
import { Chart, Series, Title } from '@highcharts/react';

export default function ChartComponent() {
    return (
        <div>
            <Chart>
                <Title>Line chart</Title>
                <Series type="line" data={[1, 2, 3]} />
            </Chart>
        </div>
    );
}

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const ChartComponent = () => {
    const options = {
        title: {
            text: 'My Chart'
        },
        series: [{
            type: 'line',
            data: [1, 2, 3, 4, 5]
        }]
    };

    return (
        <div>
            <HighchartsReact
                highcharts={Highcharts}
                options={options}
            />
        </div>
    );
};

export default ChartComponent;

import React, { useState, useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const DynamicChart = () => {
    const [data, setData] = useState([1, 2, 3, 4, 5]);

    useEffect(() => {
        // Update data every 2 seconds
        const interval = setInterval(() => {
            setData(prevData => [...prevData.slice(1), Math.random() * 10]);
        }, 2000);

        return () => clearInterval(interval);
    }, []);

    const options = {
        title: {
            text: 'Live Data Chart'
        },
        series: [{
            type: 'line',
            data: data
        }]
    };

    return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default DynamicChart;

React Hooks Example

import React, { useRef, useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const ChartWithRef = () => {
    const chartComponentRef = useRef(null);

    useEffect(() => {
        // Access the chart instance
        const chart = chartComponentRef.current?.chart;
        
        if (chart) {
            // Perform operations on the chart
            console.log('Chart instance:', chart);
            
            // Example: Add a point after 2 seconds
            setTimeout(() => {
                chart.series[0].addPoint(Math.random() * 10);
            }, 2000);
        }
    }, []);

    const options = {
        title: { text: 'Chart with Ref' },
        series: [{ type: 'line', data: [1, 2, 3, 4, 5] }]
    };

    return (
        <HighchartsReact
            highcharts={Highcharts}
            options={options}
            ref={chartComponentRef}
        />
    );
};

export default ChartWithRef;

Use refs to access the chart instance directly and call Highcharts API methods.

Vue Integration

Integrate Highcharts with Vue 3 using the official wrapper.

Installation

npm install highcharts highcharts-vue

Basic Example

Composition API
Options API
Dynamic Data

<template>
  <div>
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Chart } from 'highcharts-vue';

const chartOptions = ref({
  title: {
    text: 'My Vue Chart'
  },
  series: [{
    type: 'line',
    data: [1, 2, 3, 4, 5]
  }]
});
</script>

<template>
  <div>
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script>
import { Chart } from 'highcharts-vue';

export default {
  components: {
    highcharts: Chart
  },
  data() {
    return {
      chartOptions: {
        title: {
          text: 'My Vue Chart'
        },
        series: [{
          type: 'line',
          data: [1, 2, 3, 4, 5]
        }]
      }
    };
  }
};
</script>

<template>
  <div>
    <highcharts :options="chartOptions"></highcharts>
    <button @click="addPoint">Add Point</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Chart } from 'highcharts-vue';

const chartOptions = ref({
  title: { text: 'Dynamic Chart' },
  series: [{
    type: 'line',
    data: [1, 2, 3, 4, 5]
  }]
});

const addPoint = () => {
  const newData = [...chartOptions.value.series[0].data, Math.random() * 10];
  chartOptions.value.series[0].data = newData;
};
</script>

Global Registration

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import Highcharts from 'highcharts';
import HighchartsVue from 'highcharts-vue';

const app = createApp(App);

app.use(HighchartsVue, { highcharts: Highcharts });
app.mount('#app');

Angular Integration

Use highcharts-angular for Angular applications.

Installation

npm install highcharts highcharts-angular

Module Setup

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HighchartsChartModule } from 'highcharts-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HighchartsChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component Example

Basic
With Chart Reference

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-chart',
  template: `
    <highcharts-chart
      [Highcharts]="Highcharts"
      [options]="chartOptions"
      style="width: 100%; height: 400px; display: block;"
    ></highcharts-chart>
  `
})
export class ChartComponent {
  Highcharts: typeof Highcharts = Highcharts;
  
  chartOptions: Highcharts.Options = {
    title: {
      text: 'My Angular Chart'
    },
    series: [{
      type: 'line',
      data: [1, 2, 3, 4, 5]
    }]
  };
}

import { Component, ViewChild } from '@angular/core';
import * as Highcharts from 'highcharts';
import { HighchartsChartComponent } from 'highcharts-angular';

@Component({
  selector: 'app-chart',
  template: `
    <highcharts-chart
      #chartRef
      [Highcharts]="Highcharts"
      [options]="chartOptions"
    ></highcharts-chart>
    <button (click)="addPoint()">Add Point</button>
  `
})
export class ChartComponent {
  @ViewChild('chartRef', { static: false }) 
  chartRef!: HighchartsChartComponent;
  
  Highcharts: typeof Highcharts = Highcharts;
  
  chartOptions: Highcharts.Options = {
    title: { text: 'Dynamic Chart' },
    series: [{
      type: 'line',
      data: [1, 2, 3, 4, 5]
    }]
  };

  addPoint(): void {
    const chart = this.chartRef.chart;
    chart.series[0].addPoint(Math.random() * 10);
  }
}

Vanilla JavaScript

For projects without a framework, use Highcharts directly.

CDN Usage

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container"></div>
    
    <script>
        Highcharts.chart('container', {
            title: {
                text: 'My Chart'
            },
            series: [{
                type: 'line',
                data: [1, 2, 3, 4, 5]
            }]
        });
    </script>
</body>
</html>

NPM/ES Modules

import Highcharts from 'highcharts';

Highcharts.chart('container', {
    title: {
        text: 'My Chart'
    },
    series: [{
        type: 'line',
        data: [1, 2, 3, 4, 5]
    }]
});

TypeScript Support

Highcharts provides comprehensive TypeScript definitions.

import * as Highcharts from 'highcharts';

const options: Highcharts.Options = {
    chart: {
        type: 'line'
    },
    title: {
        text: 'TypeScript Chart'
    },
    series: [{
        type: 'line',
        data: [1, 2, 3, 4, 5]
    }]
};

const chart: Highcharts.Chart = Highcharts.chart('container', options);

// Type-safe API calls
chart.series[0].addPoint(6);
chart.setTitle({ text: 'Updated Title' });

TypeScript provides autocomplete and type checking for all Highcharts options and API methods.

Loading Additional Modules

React

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import highcharts3d from 'highcharts/highcharts-3d';
import exporting from 'highcharts/modules/exporting';

// Initialize modules
highcharts3d(Highcharts);
exporting(Highcharts);

const ChartComponent = () => {
    const options = {
        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15
            }
        },
        series: [{ data: [1, 2, 3, 4, 5] }]
    };

    return <HighchartsReact highcharts={Highcharts} options={options} />;
};

Vue

import Highcharts from 'highcharts';
import highcharts3d from 'highcharts/highcharts-3d';
import exporting from 'highcharts/modules/exporting';

// Initialize modules
highcharts3d(Highcharts);
exporting(Highcharts);

export default {
    data() {
        return {
            chartOptions: {
                chart: {
                    type: 'column',
                    options3d: {
                        enabled: true
                    }
                },
                series: [{ data: [1, 2, 3, 4, 5] }]
            }
        };
    }
};

Angular

import * as Highcharts from 'highcharts';
import HC_3D from 'highcharts/highcharts-3d';
import HC_exporting from 'highcharts/modules/exporting';

// Initialize modules
HC_3D(Highcharts);
HC_exporting(Highcharts);

@Component({
    selector: 'app-chart',
    template: `<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"></highcharts-chart>`
})
export class ChartComponent {
    Highcharts: typeof Highcharts = Highcharts;
    chartOptions: Highcharts.Options = {
        chart: {
            type: 'column',
            options3d: { enabled: true }
        },
        series: [{ type: 'column', data: [1, 2, 3, 4, 5] }]
    };
}

Common Modules

3D Charts

import highcharts3d from 'highcharts/highcharts-3d';
highcharts3d(Highcharts);

Exporting

import exporting from 'highcharts/modules/exporting';
exporting(Highcharts);

Accessibility

import accessibility from 'highcharts/modules/accessibility';
accessibility(Highcharts);

Annotations

import annotations from 'highcharts/modules/annotations';
annotations(Highcharts);

Boost

import boost from 'highcharts/modules/boost';
boost(Highcharts);

Drilldown

import drilldown from 'highcharts/modules/drilldown';
drilldown(Highcharts);

Best Practices

Important Considerations:

Always import and initialize modules before creating charts
Use refs to access chart instances in React and Angular
Avoid recreating chart options on every render
Use memoization for complex chart options
Clean up chart instances in component unmount hooks

Performance Tips:

Lazy load Highcharts modules only when needed
Use the boost module for large datasets
Debounce chart updates when data changes frequently
Consider using web workers for data processing

Server-Side Rendering (SSR)

Next.js
Nuxt.js

'use client'; // Mark as client component

import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';

const HighchartsReact = dynamic(
  () => import('highcharts-react-official'),
  { ssr: false }
);

export default function Chart() {
  const [Highcharts, setHighcharts] = useState(null);

  useEffect(() => {
    import('highcharts').then(module => {
      setHighcharts(module.default);
    });
  }, []);

  if (!Highcharts) return <div>Loading...</div>;

  const options = {
    series: [{ data: [1, 2, 3] }]
  };

  return <HighchartsReact highcharts={Highcharts} options={options} />;
}

<template>
  <client-only>
    <highcharts :options="chartOptions"></highcharts>
  </client-only>
</template>

<script setup>
const chartOptions = {
  series: [{ data: [1, 2, 3] }]
};
</script>

Examples

Framework Integrations

Overview

React Integration

Installation

Basic Example

React Hooks Example

Vue Integration

Installation

Basic Example

Global Registration

Angular Integration

Installation

Module Setup

Component Example

Vanilla JavaScript

CDN Usage

NPM/ES Modules

TypeScript Support

Loading Additional Modules

Common Modules

3D Charts

Exporting

Accessibility

Annotations

Boost

Drilldown

Best Practices

Server-Side Rendering (SSR)

Next Steps

Basic Charts

API Reference

​Overview

​React Integration

​Installation

​Basic Example

​React Hooks Example

​Vue Integration

​Installation

​Basic Example

​Global Registration

​Angular Integration

​Installation

​Module Setup

​Component Example

​Vanilla JavaScript

​CDN Usage

​NPM/ES Modules

​TypeScript Support

​Loading Additional Modules

​Common Modules

3D Charts

Exporting

Accessibility

Annotations

Boost

Drilldown

​Best Practices

​Server-Side Rendering (SSR)

​Next Steps

Basic Charts

API Reference

Overview

React Integration

Installation

Basic Example

React Hooks Example

Vue Integration

Installation

Basic Example

Global Registration

Angular Integration

Installation

Module Setup

Component Example

Vanilla JavaScript

CDN Usage

NPM/ES Modules

TypeScript Support

Loading Additional Modules

Common Modules

Best Practices

Server-Side Rendering (SSR)

Next Steps