# Highcharts-Vue Official Highcharts wrapper for Vue framework ## Table of Contents 1. [Getting started](#getting-started) 1. [Requirements](#requirements) 2. [Installation](#installation) 2. [Using](#using) 1. [Registering globally as a plugin](#registering-globally-as-a-plugin) 2. [Registering locally in your component](#registering-locally-in-your-component) 3. [Implementing stockChart and mapChart](#implementing-stockchart-and-mapchart) 4. [Changing global component tag name](#changing-global-component-tag-name) 5. [Chart callback parameter](#chart-callback-parameter) 6. [Chart object reference](#chart-object-reference) 3. [Demo app](#demo-app) 4. [Component Parameters](#component-parameters) 5. [Useful links](#useful-links) ## Getting started ### Requirements - **Node.JS**, **NPM** installed globally in your OS - **Vue**, **Highcharts** libraries (updated) installed in your project ### Installation Install `highcharts-vue` package by: ```cli npm install highcharts-vue ``` ### Using There are two ways of adding Highcharts-Vue wrapper to your project: #### Registering globally as a plugin That way is recommended when making the wrapper 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 in your Vue object: ```js 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 Highcharts-Vue package in your component file: ```js import {Chart} from 'highcharts-vue' ``` Then, you've to register it in your Vue instance configuration, namely in `components` section: ```js { components: { highcharts: Chart } } ``` *NOTE:* *If you would like to use Highcharts-Vue wrapper by attaching it using `