vue-highcharts

vue-highcharts

Highcharts component for Vue.

Requirements

• Vue >= 1.0.0
• Highcharts >= 4.2.0

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 other 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 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;

Demo

• Access chart instance via refs
• Use Highmaps
• Use independent Renderer