Framework Integrations

Learn how to integrate Highcharts with React, Vue, Angular, and other popular frameworks

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

npm install highcharts @highcharts/react

Basic Example

JSX Component

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

With Options Object

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;

With State

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

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

Options API

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

Dynamic Data

<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

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

With Chart Reference

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

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

Nuxt.js

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

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

Next Steps

Basic Charts

Explore basic chart examples and patterns

API Reference

Browse the complete API documentation