A simple, fast, Vue 3 component for rendering Highcharts.js Charts written using the composition API.
Demos https://smithalan92.github.io/vue3-highcharts/
This package was originally created when Vue 3 was first released as there was no component to use Vue 3 with highcharts. Since then the official highcharts package has been updated to support Vue 3. I recommend existing users switch to using the official package.
Vue@3.0.0 Highcharts@8.0.0 ( older versions may work but not tested )
Vue and Highcharts are not bundled with the module and need to be included in your projects dependencies.
Install with npm
npm i --save vue3-highcharts You can register the component in 2 ways.
import { createApp } from 'vue'; import VueHighcharts from 'vue3-highcharts'; const app = createApp(..options); app.use(VueHighcharts);import VueHighcharts from 'vue3-highcharts'; export default { name: 'MyChart', components: { VueHighcharts, }, };The following props can be passed to the component. Options is the only required one.
| Name | Type | Required | Default | Notes |
|---|---|---|---|---|
| type | String | no | 'chart' | This should be the constructor type you'd use with highcharts. If you import the stock chat, you can pass 'stockChart' as this option for example. |
| options | Object | yes | - | This should be a Highcharts chart options object |
| redrawOnUpdate | Boolean | no | true | If the chart should be redrawn when options update. |
| oneToOneUpdate | Boolean | no | false | If the certain collections should be updated one to one. See here. |
| animateOnUpdate | Boolean | no | true | If the redraw should be animated. |
The following events are emitted from the component. No data is provided with any event.
| Name | Notes |
|---|---|
| rendered | Emitted when the chart has been rendered on the dom |
| updated | Emitted when the chart options have been updated and the chart has been updated |
| destroyed | Emitted when the Highcharts chart instance has been destroyed ( happens when the component unmounts ) |
The Highcharts chart object is also exposed on the component instance as chart
A wrapper div is also created with a .vue-highcharts class around the actual chart.
<template> <vue-highcharts type="chart" :options="chartOptions" :redrawOnUpdate="true" :oneToOneUpdate="false" :animateOnUpdate="true" @rendered="onRender" @update="onUpdate" @destroy="onDestroy"/> </template><script> import { ref } from 'vue'; export default { name: 'chart', setup() { const data = ref([1, 2, 3]) const chartData = computed(() =>{ return { series: [{ name: 'Test Series', data: data.value, }], } }); const onRender = () => { console.log('Chart rendered'); }; const onUpdate = () => { console.log('Chart updated'); }; const onDestroy = () => { console.log('Chart destroyed'); }; return { chartData, onRender, onUpdate, onDestroy, }; } } </script><style> .vue-highcharts { width: 100%; } </style>To use the stock map charts, you need to import and register them. For example, to use the map chart
import HighCharts from 'highcharts'; import useMapCharts from 'highcharts/modules/map'; useMapCharts(HighCharts);<template> <vue-highcharts type="mapChart" :options="chartOptions"/>Since Vue and Highcharts are not bundled with the module, you may need to add some webpack aliases.
For example, the following needs to be added when using vue-cli to vue.config.js
const path = require('path'); module.exports = { chainWebpack: (config) => { config.resolve.alias.set('vue$', path.join(__dirname, 'node_modules/vue')); config.resolve.alias.set('highcharts$', path.join(__dirname, 'node_modules/highcharts')); }, };See License.md