Highcharts-Vue Integration

2.0.1 · active · verified Sun Apr 19

highcharts-vue is the official integration package for using the Highcharts charting library within Vue.js applications. Currently at version 2.0.1, it provides first-class support exclusively for Vue 3 applications. The 2.x.x series represents a major shift, with previous 1.x.x versions supporting Vue 2. This package requires both `vue` (>=3.0.0) and `highcharts` (>=5.0.0) as peer dependencies, which must be installed separately. It facilitates declarative chart rendering, module loading, and interaction with the underlying Highcharts chart instance. The project maintains an active release cadence, with recent updates focusing on Vue 3 features and documentation. Its primary differentiator is being the official Highcharts integration, ensuring optimal compatibility and adherence to best practices for Vue developers.

Common errors

```
Cannot read properties of undefined (reading 'use')
```
cause Attempting to use `Vue.use(HighchartsVue)` with a Vue 3 `app` instance, or `app.use(HighchartsVue)` with a Vue 2 global `Vue` object.

fix For Vue 3, ensure you are using `app.use(HighchartsVue)` where `app` is the result of `createApp()`. For Vue 2, use `Vue.use(HighchartsVue)`.
```
Component is missing template or render function.
```
cause The Highcharts component (`<highcharts>` or `<Chart>`) was used without the required `:options` prop, or the prop was empty/invalid.

fix Provide a valid Highcharts configuration object to the component via the `:options` prop: `<HighchartsChart :options='chartOptions' />`. This prop is mandatory.
```
ReferenceError: Highcharts is not defined (or a module feature is missing)
```
cause The main `Highcharts` object or a specific Highcharts module was not imported or initialized correctly before being used by the `highcharts-vue` component.

fix Ensure `import Highcharts from 'highcharts'` is present. For Highcharts modules, confirm that `import moduleInit from 'highcharts/modules/modulename'` and `moduleInit(Highcharts)` are called before the chart is rendered.

Warnings

breaking Version 2.0.0 of `highcharts-vue` introduced a breaking change by dropping support for Vue 2, exclusively targeting Vue 3 and above. Applications using Vue 2 must remain on `highcharts-vue` versions 1.x.x.
Fix: For Vue 3 projects, ensure `vue` is upgraded to `^3.0.0`. For existing Vue 2 projects, pin `highcharts-vue` to `~1.x.x` (e.g., `npm install highcharts-vue@^1`).
gotcha Highcharts modules (e.g., `exporting`, `stock`, `map`, `gantt`) are not automatically included by `highcharts-vue`. They must be explicitly imported from `highcharts/modules/` and then initialized by calling the module function with the main `Highcharts` instance.
Fix: Before using a module, ensure `import Highcharts from 'highcharts'` and `import moduleInit from 'highcharts/modules/modulename'`. Then call `moduleInit(Highcharts)`.
gotcha `highcharts-vue` lists `vue` and `highcharts` as peer dependencies. These core libraries are not installed automatically with `highcharts-vue` and must be explicitly installed in your project for the integration to function correctly.
Fix: Ensure `npm install vue highcharts` (or `yarn add vue highcharts`) is executed in your project, with versions that satisfy the `highcharts-vue` peer dependency ranges (Vue >=3.0.0, Highcharts >=5.0.0 for 2.x versions).

Install

npm install highcharts-vue npm
yarn add highcharts-vue yarn
pnpm add highcharts-vue pnpm

Imports

HighchartsVue
wrong:
```
import { HighchartsVue } from 'highcharts-vue'
```
correct:
```
import HighchartsVue from 'highcharts-vue'
```
This is the default export used primarily for global plugin registration with `app.use(HighchartsVue)` in Vue 3.
Chart
wrong:
```
import Chart from 'highcharts-vue'
```
correct:
```
import { Chart } from 'highcharts-vue'
```
This is a named export used when registering the Highcharts component locally within a Vue component's `components` option.
Highcharts Modules
wrong:
```
import { exporting } from 'highcharts/modules/exporting'
```
correct:
```
import Highcharts from 'highcharts';
import exportingInit from 'highcharts/modules/exporting';
exportingInit(Highcharts);
```
Highcharts modules (e.g., `exporting`, `stock`, `map`, `gantt`) must be explicitly imported and initialized by passing the main `Highcharts` object to them. This pattern applies to all official Highcharts modules.

Quickstart

Demonstrates how to locally register the `Chart` component, render a basic line chart with a required `options` prop, and enable the exporting module.

import { createApp, defineComponent, ref } from 'vue';
import Highcharts from 'highcharts';
import { Chart } from 'highcharts-vue';
import exportingInit from 'highcharts/modules/exporting';

// Initialize the exporting module for Highcharts
exportingInit(Highcharts);

const App = defineComponent({
  components: {
    HighchartsChart: Chart // Renamed for clarity, can use 'Chart' directly
  },
  setup() {
    const chartOptions = ref({
      chart: {
        type: 'line'
      },
      title: {
        text: 'My First Highcharts Vue Chart'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
      },
      series: [{
        name: 'Sample Data',
        data: [1, 3, 2, 4, 5]
      }],
      credits: {
        enabled: false // Disable Highcharts credits
      },
      exporting: {
        enabled: true // Enable exporting functionality via the module
      }
    });

    return {
      chartOptions
    };
  },
  template: `
    <div id="app">
      <h1>Highcharts-Vue Demo</h1>
      <HighchartsChart :options="chartOptions" />
    </div>
  `,
});

createApp(App).mount('#app');

view raw JSON →