Highcharts component for Vue
npm install vue-highcharts






Highcharts component for Vue.
* Vue >= 3.0.0
* Highcharts >= 4.2.0
``bash`
npm i -S vue-highcharts
For Vue 2, please run npm i -S vue-highcharts@0.1, and checkout document here.
`js
import { createApp } from 'vue';
import Highcharts from 'highcharts';
import VueHighcharts from 'vue-highcharts';
import App from './App.vue';
const app = createApp(App);
app.use(VueHighcharts, { Highcharts });
// now
`
Direct
<script> include
`html`
`js
import { createApp } from 'vue';
import Highcharts from 'highcharts';
import VueHighcharts from 'vue-highcharts';
import App from './App.vue';
// 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);
const app = createApp(App);
app.use(VueHighcharts, { Highcharts });
// now
// drilldown and solid gauge are work with
`
`vue
`
Typing:
`ts`
type ChartName = 'Highcharts' | 'Highstock' | 'Highmaps' | 'HighchartsGantt';
function createHighcharts(name: ChartName, Highcharts: Highcharts): VueComponent | null
`vue
`
The options object can be found in Highcharts API Reference.
The chart instance can be accessed with template refs.
* Access chart` instance via template refs
* Synchronized charts
* Use Highmaps