Highcharts component for Vue.
- Vue >= 3.0.0
- Highcharts >= 4.2.0
npm i -S vue-highchartsFor Vue 2, please run npm i -S vue-highcharts@0.1, and checkout document here.
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 <Highcharts /> is available in componentsDirect <script> include
<script src="/path/to/vue/dist/vue.global.prod.js"></script>
<script src="/path/to/highcharts/highcharts.js"></script>
<script src="/path/to/vue-highcharts/dist/vue-highcharts.js"></script>
<script>
const { createApp } = window.Vue;
const app = createApp();
app.use(window.VueHighcharts['default'], { Highcharts: window.Highcharts });
</script>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 <Highcharts />, <Highstock />, <Highmaps />, <HighchartsGantt /> is available in components
// drilldown and solid gauge are work with <Highcharts /><template>
<Highcharts />
<Highmaps />
</template>
<script>
import Highcharts from 'highcharts';
import { createHighcharts } from 'vue-highcharts';
import loadMap from 'highcharts/modules/map.js';
loadMap(Highcharts);
export default {
components: {
Highcharts: createHighcharts('Highcharts', Highcharts),
Highmaps: createHighcharts('Highmaps', Highcharts),
// Highstock: createHighcharts('Highstock', Highcharts),
// HighchartsGantt: createHighcharts('HighchartsGantt', Highcharts),
},
};
</script>Typing:
type ChartName = 'Highcharts' | 'Highstock' | 'Highmaps' | 'HighchartsGantt';
function createHighcharts(name: ChartName, Highcharts: Highcharts): VueComponent | null<template>
<Highcharts ref="highchartsRef" :options="chartOptions" />
<Highstock :options="stockOptions" />
<Highmaps :options="mapsOptions" />
<HighchartsGantt :options="ganttOptions" />
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const highchartsRef = ref(null);
onMounted(() => {
// access the `chart` instance with template refs
const { chart } = highchartsRef.value;
});
return {
highchartsRef,
chartOptions: {},
stockOptions: {},
mapsOptions: {},
ganttOptions: {},
};
},
};
</script>The options object can be found in Highcharts API Reference.
The chart instance can be accessed with template refs.