Skip to content
master
Go to file
Code

README.md

vue-highcharts

Build status Coverage Dependencies NPM version License File size Download jsDelivr

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

When vue-highcharts is included by <script>, it will be installed automatically if window.Vue and window.Highcharts exists, ohterwise you should to install it manually by calling Vue.use(window.VueHighcharts['default']);.

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',
  components: {
    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

You can’t perform that action at this time.