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
;;; ; const app = ;app;// now <Highcharts /> is available in components
Direct <script>
include
Highstock, Highmaps and any other add-ons
;;; ; // load these modules as your need;;;;// some charts like solid gauge require `highcharts-more.js`, you can find it in official document.;; ;;;;;; const app = ;app;// 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:
;
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.