vue-highcharts

vue-highcharts

Highcharts component for Vue.

Requirements

• Vue >= 2.0.0
• Highcharts >= 4.2.0

Installation

npm i -S vue-highcharts

If you use Vue v1, you should npm i -S vue-highcharts@0.0.

Usage

You can simply import it and use it.

import Vue from 'vue';
import VueHighcharts from 'vue-highcharts';

Vue.use(VueHighcharts);

If you want to use Highstock, Highmaps, Gantt or any other add-ons, you should load them as 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.js';
import loadMap from 'highcharts/modules/map.js';
import loadGantt from 'highcharts/modules/gantt.js';
import loadDrilldown from 'highcharts/modules/drilldown.js';
// some charts like solid gauge require `highcharts-more.js`, you can find it in official document.
import loadHighchartsMore from 'highcharts/highcharts-more.js';
import loadSolidGauge from 'highcharts/modules/solid-gauge.js';

loadStock(Highcharts);
loadMap(Highcharts);
loadGantt(Highcharts);
loadDrilldown(Highcharts);
loadHighchartsMore(Highcharts);
loadSolidGauge(Highcharts);

Vue.use(VueHighcharts, { Highcharts });
// now you can use Highstock, Highmaps, Gantt, drilldown and solid gauge.

If you don't want to install vue-highcharts global, you can:

import Highcharts from 'highcharts';
import loadMap from 'highcharts/modules/map.js';
import { genComponent } from 'vue-highcharts';

loadMap(Highcharts);

export default {
  name: 'MyComponent',
  component: {
    Highcharts: genComponent('Highcharts', Highcharts),
    Highmaps: genComponent('Highmaps', Highcharts),
    // Highstock: genComponent('Highstock', Highcharts),
    // HighchartsGantt: genComponent('HighchartsGantt', Highcharts),
  },
};

/**
 * @param {String} name   Available values: 'Highcharts', 'Highstock', 'Highmaps', 'HighchartsGantt'
 * @param {Object} Highcharts   The `Highcharts` object
 * @returns {VueComponent|null}
 */
function genComponent(name, Highcharts) {}

Then you can use these components in the template.

<template>
  <div>
    <Highcharts :options="options" />
    <Highstock :options="options" />
    <Highmaps :options="options" />
    <HighchartsGantt :options="options" />
  </div>
</template>

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.

If you want to access the chart instance, you can use child component refs:

<Highcharts ref="highcharts" :options="options" />

const { chart } = vm.$refs.highcharts;

Demo

• Access chart instance via refs
• Use Highmaps
• Synchronized charts