Integration that allows easy Highcharts use in Vue 3.
The official Highcharts integration with Vue.
> ❗ _IMPORTANT NOTE:_ From highcharts-vue@2.0.0, this package offers support for Vue >= 3.0.0. If you'd like to use this package with Vue 2, you should stay with the latest versions of highcharts-vue@1.x.x (Note: Vue2 is getting officially deprecated❗
1. Getting started
1. Requirements
2. Installation
2. Usage
1. Registering globally as a plugin
2. Registering locally in your component
3. Implementing stockChart, mapChart and ganttChart
4. Loading maps
5. Changing global component tag name
6. Chart callback parameter
7. Chart object reference
8. Using a specific Highcharts instance
3. Demo apps
4. Online demos
5. Component Properties
6. Useful links
- 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.
Install highcharts-vue package by:
``cli`
npm install highcharts-vue$3
There are two ways of adding the Highcharts-Vue package to your project:
#### Registering globally as a plugin
The way described below is recommended when wanted to make the HighchartsVue component available from everywhere in your app. In your main app file should have Vue and Highcharts-Vue packages imported:
`js`
import Vue from 'vue';
import HighchartsVue from 'highcharts-vue';
Next, you can register it as a plugin (depending on the version of Vue):js
// for Vue 2
Vue.use(HighchartsVue)
// for Vue 3
app.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 highcharts-vue package in your component file:
`js`
import { Chart } from 'highcharts-vue'
Then, you can use the component in your Vue components.
NOTE:
If you would like to use Highcharts-Vue integration by attaching it using