Highcharts component for Vue.
- Vue >= 2.0.0
- Highcharts >= 4.2.0
npm i -S vue-highchartsIf you use Vue v1, you should npm i -S [email protected].
You can simply import it and use it.
import Vue from 'vue';
import VueHighcharts from 'vue-highcharts';
Vue.use(VueHighcharts);When vue-highcharts is included by <script>, it will be installed automatically if window.Vue and window.Highcharts exists, ohterwise you should to install it manually by calling Vue.use(window.VueHighcharts['default']);.
If you want to use Highstock, Highmaps, Gantt or any other add-ons, you should load them as modules.
import Vue from 'vue';
import VueHighcharts from 'vue-highcharts';
import Highcharts from 'highcharts';
// 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);
Vue.use(VueHighcharts, { Highcharts });
// now you can use Highstock, Highmaps, Gantt, drilldown and solid gauge.If you don't want to install vue-highcharts global, you can:
import Highcharts from 'highcharts';
import loadMap from 'highcharts/modules/map.js';
import { genComponent } from 'vue-highcharts';
loadMap(Highcharts);
export default {
name: 'MyComponent',
components: {
Highcharts: genComponent('Highcharts', Highcharts),
Highmaps: genComponent('Highmaps', Highcharts),
// Highstock: genComponent('Highstock', Highcharts),
// HighchartsGantt: genComponent('HighchartsGantt', Highcharts),
},
};/**
* @param {String} name Available values: 'Highcharts', 'Highstock', 'Highmaps', 'HighchartsGantt'
* @param {Object} Highcharts The `Highcharts` object
* @returns {VueComponent|null}
*/
function genComponent(name, Highcharts) {}Then you can use these components in the template.
<template>
<div>
<Highcharts :options="options" />
<Highstock :options="options" />
<Highmaps :options="options" />
<HighchartsGantt :options="options" />
</div>
</template>The options object can be found in Highcharts API Reference. Note you should never pass in chart.renderTo for watching it may cause stack overflow.
If you want to access the chart instance, you can use child component refs:
<Highcharts ref="highcharts" :options="options" />const { chart } = vm.$refs.highcharts;