vue-highcharts

vue-highcharts

Highcharts component for Vue.

Requirements

• Vue >= 3.0.0
• Highcharts >= 4.2.0

Installation

npm i -S vue-highcharts

For Vue 2, please run npm i -S vue-highcharts@0.1, and checkout document here.

Usage

Registering globally

import { createApp } from 'vue';
import Highcharts from 'highcharts';
import VueHighcharts from 'vue-highcharts';

import App from './App.vue';

const app = createApp(App);
app.use(VueHighcharts, { Highcharts });
// now <Highcharts /> is available in components

Direct <script> include

<script src="/path/to/vue/dist/vue.global.prod.js"></script>
<script src="/path/to/highcharts/highcharts.js"></script>
<script src="/path/to/vue-highcharts/dist/vue-highcharts.js"></script>
<script>
const { createApp } = window.Vue;
const app = createApp();
app.use(window.VueHighcharts['default'], { Highcharts: window.Highcharts });
</script>

Highstock, Highmaps and any other add-ons

import { createApp } from 'vue';
import Highcharts from 'highcharts';
import VueHighcharts from 'vue-highcharts';

import App from './App.vue';

// load these modules as your need
import loadStock from 'highcharts/modules/stock.js';
import loadMap from 'highcharts/modules/map.js';
import loadGantt from 'highcharts/modules/gantt.js';
import loadDrilldown from 'highcharts/modules/drilldown.js';
// some charts like solid gauge require `highcharts-more.js`, you can find it in official document.
import loadHighchartsMore from 'highcharts/highcharts-more.js';
import loadSolidGauge from 'highcharts/modules/solid-gauge.js';

loadStock(Highcharts);
loadMap(Highcharts);
loadGantt(Highcharts);
loadDrilldown(Highcharts);
loadHighchartsMore(Highcharts);
loadSolidGauge(Highcharts);

const app = createApp(App);
app.use(VueHighcharts, { Highcharts });
// now <Highcharts />, <Highstock />, <Highmaps />, <HighchartsGantt /> is available in components
// drilldown and solid gauge are work with <Highcharts />

Registering in components

<template>
  <Highcharts />
  <Highmaps />
</template>

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

import loadMap from 'highcharts/modules/map.js';

loadMap(Highcharts);

export default {
  components: {
    Highcharts: createHighcharts('Highcharts', Highcharts),
    Highmaps: createHighcharts('Highmaps', Highcharts),
    // Highstock: createHighcharts('Highstock', Highcharts),
    // HighchartsGantt: createHighcharts('HighchartsGantt', Highcharts),
  },
};
</script>

Typing:

type ChartName = 'Highcharts' | 'Highstock' | 'Highmaps' | 'HighchartsGantt';
function createHighcharts(name: ChartName, Highcharts: Highcharts): VueComponent | null

Configuration options and the chart instance

<template>
  <Highcharts ref="highchartsRef" :options="chartOptions" />
  <Highstock :options="stockOptions" />
  <Highmaps :options="mapsOptions" />
  <HighchartsGantt :options="ganttOptions" />
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const highchartsRef = ref(null);
    onMounted(() => {
      // access the `chart` instance with template refs
      const { chart } = highchartsRef.value;
    });
    return {
      highchartsRef,
      chartOptions: {},
      stockOptions: {},
      mapsOptions: {},
      ganttOptions: {},
    };
  },
};
</script>

The options object can be found in Highcharts API Reference.

The chart instance can be accessed with template refs.

Demo

• Access chart instance via template refs
• Synchronized charts
• Use Highmaps