vue-highcharts

vue-highcharts

Highcharts component for Vue.

Requirements

• Vue >= 1.0.0 (support both v1 and v2)
• 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.

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;

Demo

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