Highcharts component for Vue.
- Vue >= 1.0.0 (support both v1 and v2)
- Highcharts >= 4.2.0
npm i vue-highcharts -SYou should always call the Vue.use() global method:
import Vue from 'vue';
import VueHighcharts from 'vue-highcharts';
Vue.use(VueHighcharts);If you want to use Highstock, Highmaps or any other add-ons, you should pass in the Highcharts object which included the corresponding 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';
import loadMap from 'highcharts/modules/map';
import loadDrilldown from 'highcharts/modules/drilldown';
// some charts like solid gauge require `highcharts-more.js`, you can find it in official demo.
import loadHighchartsMore from 'highcharts/highcharts-more';
import loadSolidGauge from 'highcharts/modules/solid-gauge';
loadStock(Highcharts);
loadMap(Highcharts);
loadDrilldown(Highcharts);
loadHighchartsMore(Highcharts);
loadSolidGauge(Highcharts);
Vue.use(VueHighcharts, { Highcharts });
// Now you can use Highstock, Highmaps, drilldown and solid gauge.Then you can use the components in your template.
<highcharts :options="options"></highcharts>
<highstock :options="options"></highstock>
<highmaps :options="options"></highmaps>
<highcharts-renderer :width="width" :height="height"></highcharts-renderer>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.
<highcharts-renderer> creates an independent renderer.
The Highcharts object is available at vm.Highcharts. If you want to access the chart or renderer instance, you can use child component refs:
<highcharts :options="options" ref="highcharts"></highcharts>
<highcharts-renderer :width="width" :height="height" ref="highchartsRenderer"></highcharts-renderer>const { chart } = vm.$refs.highcharts;
const { renderer } = vm.$refs.highchartsRenderer;