How to use networkgraph in vue-highcharts

[JeongYunLee]

when i run this code, I have Error: Highcharts error #17: errors. I think import part in script setup has some problem, but i don't know how to fix. does vue-highcharts not support networkgraph??

<template>
    <vue-highcharts :options="chartOptions" @render="onRender" />
</template>

<script setup>
import Highcharts from 'highcharts';
import VueHighcharts from 'vue3-highcharts';
import HighchartsNetworkgraph from 'highcharts/modules/networkgraph';

HighchartsNetworkgraph(Highcharts);

const chartOptions = {
    chart: {
        type: 'networkgraph',
        marginTop: 80
    },
    title: {
        text: 'Network graph'
    },
    plotOptions: {
        networkgraph: {
            keys: ['from', 'to'],
        }
    },
    series: [{
        marker: {
            radius: 30
        },
        dataLabels: {
            enabled: true,
            linkFormat: '',
            allowOverlap: true
        },
        data: [
            ['Node 1', 'Node 2'],
            ['Node 1', 'Node 3'],
            ['Node 1', 'Node 4'],
            ['Node 4', 'Node 5'],
            ['Node 2', 'Node 5']
        ]
    }]
};

const onRender = () => {
    console.log('Chart rendered');
};

const props = defineProps({
    sendTotalSelected: {
        type: Object,
        required: true
    }
});
</script>

[jszuminski]

Hi,

Thanks for the question! However, you're not using our wrapper, but vue3-highcharts which we have nothing in common with.

I see you're using Vue3 with Composition API. We're currently working on publishing the Composition API support to the npmjs, but for now the code with support is available on our GitHub. The updated package will be deployed by the end of this week so you can wait for it and get the official Vue wrapper for Highcharts with full support.

As I am unable to give you any information on why it doesn't work in your case I can only tell you that all Highcharts series work normally with our highcharts-vue wrapper.

Take a look here: https://codesandbox.io/s/highcharts-vue-demo-forked-mj3jz0

I'll let you know when we publish Composition API so you can switch to our officially supported wrapper.

[jszuminski]

Hi @JeongYunLee,

Just wanted to let you know that we've just published the 1.4.1 version of the highcharts-vue package which offers full support for Composition API so there's no need anymore to use unofficial plugins.

You can take a look at the demo-v3 folder in this repository to see an example of usage with Composition API.

Let me know if that works for you! All suggestions highly appreciated.