Vue 3 - Highcharts JS

A simple, fast, Vue 3 component for rendering Highcharts.js Charts written using the composition API.

Demos https://smithalan92.github.io/vue3-highcharts/

Note: This package is not maintained

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.

highcharts-vue

Minimum Requirements

[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.

Usage

Install with npm

npm i --save vue3-highcharts

You can register the component in 2 ways.

Register as a global component.

import { createApp } from 'vue';
import VueHighcharts from 'vue3-highcharts';

const app = createApp(..options);
app.use(VueHighcharts);

Register as a local component

import VueHighcharts from 'vue3-highcharts';

export default {
  name: 'MyChart',
  components: {
    VueHighcharts,
  },
};

Props

The following props can be passed to the component. Options is the only required one.

Events

The following events are emitted from the component. No data is provided with any event.

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.

Simple Example

<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>

Using Stock/Map charts

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"/>

Local Dev Issues.

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'));
  },
};

License

See License.md