/vue-highcharts

:bar_chart: Highcharts component for Vue

Primary LanguageJavaScriptMIT LicenseMIT

vue-highcharts

Build status Coverage Dependencies Download NPM version License File size

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

import loadStock from 'highcharts/modules/stock';
import loadMap from 'highcharts/modules/map';
import loadDrilldown from 'highcharts/modules/drilldown';

loadStock(Highcharts);
loadMap(Highcharts);
loadDrillDown(Highcharts);

Vue.use(VueHighcharts, { Highcharts });
// Now you can use Highstock, Highmaps and drilldown.

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