Highcharts is a standalone library, which means that it does not require any additional frameworks or plugins to work. It is individually based on native browser technologies, and all core functionality runs in the browser. As it is a front-end library, Highcharts can be practiced with any server that can serve static files. It requires only the core highcharts.js script to run. Highcharts works on all modern browsers and mobile devices. Legacy browsers – primarily IE 6-8 – are supported using polyfills and the oldIE module. Highcharts wrappers are available for frameworks such as React and Vue, as well as for native iOS and Android development.

Requirements

• Node.JS, NPM installed globally in your OS.
• Vue, Highcharts libraries (updated) installed in your project.
• Highcharts package version should be at least v5.0.11, but it is always better to keep it updated.

Installation

You can install the highcharts-vue package via Npm:

npm install highcharts-vue

Usage

There are two ways of adding Highcharts-Vue wrapper to your project:

Registering globally as a plugin

The way described below is recommended when wanted to make a wrapper component available from everywhere in your app. In your main app file should have Vue and Highcharts-Vue packages imported:

import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'
Next, you can register it as a plugin in your Vue object:
Vue.use(HighchartsVue)

Registering locally in your component

This option is recommended for direct use in specific components of your app. First, you should import the Chart component object from the Highcharts-Vue package in your component
file:

import {Chart} from 'highcharts-vue'
Then, you've to register it in your Vue instance configuration, namely in the components section:
{
  components: {
    highcharts: Chart 
  }
}

NOTE: If you would like to use Highcharts-Vue wrapper by attaching it using script tag in your head section of HTML document, of course, it is possible and you should use one of the .js files from dist of this package directory. After that, the HighchartsVue object should be available from the window scope. Here is the example with this way of implementation: JSFiddle example

Configuration

Options parameter

If you’ve done one of the above (importing and registering the wrapper), it allows you to use the Highcharts-Vue component in your app, just by adding HTML element, and passing chart configuration object by its :options parameter, which is required:

<highcharts :options="chartOptions"></highcharts>

for example:

new Vue({
  data() {
    return {
      chartOptions: {
        series: [{
          data: [1,2,3] // sample data
        }]
      }
    }
  }
})

Importing Highcharts modules

To use any of the Highcharts modules, you’re obligated to import that module to your file, as well as the Highcharts package itself, and add that module by passing Highcharts to it, for example:

import Highcharts from 'highcharts'
import exporting unit from 'highcharts/modules/exporting'

exportingInit(Highcharts)
Demo: https://codesandbox.io/s/highcharts-vue-demo-fv7m6

Implementing stockChart, mapChart and ganttChart

The highcharts-vue wrapper utilizes chart constructor by default, so if you need to implement stockChart, mapChart, or ganttChart, just add stock, map, or gantt module as described above and use :constructor-type parameter in your HTML component element:

import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'

stockInit(Highcharts)

<highcharts :constructor-type="'stockChart'" :options="chartOptions"></highcharts>

Stock demo: https://codesandbox.io/s/highcharts-vue-demo-qkf43

Map demo: https://codesandbox.io/s/highcharts-vue-demo-cop9z

Gantt demo: https://codesandbox.io/s/highcharts-vue-demo-s8gcg

Loading maps

There are two ways of loading maps and using them with the wrapper. You can install the @highcharts/map-collection npm package with all maps included, and then import the maps which you would like to use in your project:

import Highcharts from 'highcharts'
import HighchartsMapModule from 'highcharts/modules/map'
import mapData from '@highcharts/map-collection/custom/world.geo.json'

HighchartsMapModule(Highcharts)

Highcharts.maps['myMapName'] = mapData

If you won’t install a package with all maps, there is an option to choose a necessary map from Highmaps collection and copy map data into a new file in your project. Then just import it wherever you want, and use it in the same way as above.

The Demo app included in this repository shows the second approach.

Map demo: https://codesandbox.io/s/highcharts-vue-demo-cop9z

Changing global component tag name

If you wanted to utilize a global component tag name other than . You could accomplish that by passing an object with tagName: [TAG_NAME] pair as an option argument when registering the plugin, for example:

import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'

Vue.use(HighchartsVue, {tagName: 'charts'})

It allows you to use:

<charts :options="chartOptions"></charts>

Using Highcharts setOptions() method

If you would like to use Highcharts.setOptions() method to define some parameters which would be set globally on all of the charts, we recommend you to use it in the main file of your app, although there should be a Highcharts package imported before.

import Highcharts from 'highcharts';

Highcharts.setOptions({
  // options here
})

Online demos

• Basic line: https://codesandbox.io/s/highcharts-vue-demo-ttner
• Stock: https://codesandbox.io/s/highcharts-vue-demo-qkf43
• Map: https://codesandbox.io/s/highcharts-vue-demo-cop9z
• Gantt: https://codesandbox.io/s/highcharts-vue-demo-s8gcg
• Store: https://codesandbox.io/s/highcharts-vue-demo-zrok6
• NuxtJS (with SSR): https://codesandbox.io/s/z8jovxx04
• Portals: https://codesandbox.io/s/highcharts-vue-demo-voo9m
• Synchronized charts: https://codesandbox.io/s/vue-template-jyp7o

You can visit its documentation here.