Highcharts component for Vue.
- Vue >= 3.0.0
- Highcharts >= 4.2.0
npm i -S vue-highchartsFor Vue 2, please run npm i -S vue-highcharts@0.1, and checkout document here.
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 componentsDirect <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>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 /><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<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.