vue-highcharts

vue-highcharts

Highcharts component for Vue.

Installation

npm i vue-highcharts -S

Usage

You 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 add-ons, you should pass in the Highcharts object which included the corresponding modules.

// Use Highstock
import Vue from 'vue';
import VueHighcharts from 'vue-highcharts';
import Highcharts from 'highcharts/highstock';

Vue.use(VueHighcharts, { Highcharts });

// Use Highstock and Highmaps
import Vue from 'vue';
import VueHighcharts from 'vue-highcharts';
import Highcharts from 'highcharts/highstock';
import loadMap from 'highcharts/modules/map';

loadMap(Highcharts);

Vue.use(VueHighcharts, { Highcharts });

Then you can use the component in your template. And you can access the Highcharts object via vm.Highcharts.

<highcharts :options="options"></highcharts>
<highstock :options="options"></highstock>
<highmaps :options="options"></highmaps>

The options object can be found in Highcharts API Reference, Highstock API Reference and Highmaps API Reference.