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.
[email protected] [email protected] ( 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent