vue-highcharts


Highcharts component for Vue.

Requirements

* Vue >= 3.0.0
* Highcharts >= 4.2.0

Installation

``bash
npm i -S vue-highcharts
`

For Vue 2, please run npm i -S vue-highcharts@0.1, and checkout document here.

Usage

$3

`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 is available in components
`

$3

`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 , , , is available in components
// drilldown and solid gauge are work with
`

$3

`vue



`

Typing:

`ts
type ChartName = 'Highcharts' | 'Highstock' | 'Highmaps' | 'HighchartsGantt';
function createHighcharts(name: ChartName, Highcharts: Highcharts): VueComponent | null
`

$3

`vue



`

The options object can be found in Highcharts API Reference.

The chart instance can be accessed with template refs.

Demo

* Access chart` instance via template refs
* Synchronized charts
* Use Highmaps