Nerfing Powerful Megalomaniacs
    Have ideas to improve npm?Join in the discussion! »

    vue-highcharts

    0.2.0 • Public • Published

    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

    Install

    npm i vue-highcharts

    DownloadsWeekly Downloads

    3,184

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    11.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar