Skip to content

weizhenye/vue-highcharts

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vue-highcharts

GitHub Action Coverage NPM version License File size Download jsDelivr

Highcharts component for Vue.

Requirements

  • Vue >= 3.0.0
  • Highcharts >= 4.2.0

Installation

npm i -S vue-highcharts

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

Usage

Registering globally

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

Highstock, Highmaps and any other add-ons

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

Registering in components

<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

Configuration options and the chart instance

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

Demo