Error when using a property "more"

[zavodptica]

I want to use a graph "arearange", but when using the "more" property, an error appears TypeError: Cannot read properties of undefined (reading 'addEvent').

reproduction link https://stackblitz.com/edit/nuxt-3-windicss-zawmxl?file=app.vue

Please help me fix the code.

<template>
  <div>
    <highchart :options="chartOptions" more />
  </div>
</template>

<script setup>
const chartOptions = reactive({
  // chart: {
  //   type: 'arearange',
  // },
  title: {
    text: 'Chart Arearange',
  },
  series: [
    {
      type: 'arearange',
      name: 'Product',
      data: [
        [3, 5],
        [5, 12],
        [4, 6],
        [1, 8],
        [4, 8],
        [5, 12],
      ],

      color: '#7cb5ec',
      marker: {
        symbol: 'circle',
        fillColor: '#fede86',
        lineWidth: 2,
        lineColor: null,
      },
    },
  ],
  xAxis: {
    categories: ['A', 'B', 'C', 'D', 'E', 'F'],
  },
  yAxis: {
    minTickInterval: 1,
    min: 0,
    crosshair: true,
  },
  credits: {
    enabled: false,
  },
});
</script>

[richardeschloss]

I just updated one example that uses highcharts-more to use the composition-api: (working example)
https://github.com/richardeschloss/nuxt-highcharts/blob/feat/composition-api/components/charts/BubbleChart.vue

I'll try again with the AreaRange chart. I think the chart type needs to be specified (uncommented)

[richardeschloss]

Working example with AreaRange and "more" feature:
https://github.com/richardeschloss/nuxt-highcharts/blob/feat/composition-api/components/charts/AreaRange.vue

[zavodptica]

The error appears in development mode. If you build the project, everything works. Apparently this is a typescript error.

[richardeschloss]

Hi, thanks for bringing this to my attention.

I've only tested locally not in Stackblitz. Hmm.. but when I try right now in Stackblitz, I see another error
"vue.js?v=d3e9413e:1383 [Vue warn]: Unhandled error during execution of mounted hook " and it's bit tough to troubleshoot that in Stackblitz because I can't inspect the node_modules. But I'll see what I can do when I get the time.

[richardeschloss]

I believe the issue stems from here:

nuxt-highcharts/lib/components.js

Line 207 in f125a72

More(HC)

Where for some reason in Stackblitz, HC is undefined but it shouldn't be because it's being imported at the top.

Nonetheless, I am able to get an example working by importing highcharts and highcharts-more at the component level. It's only a few lines of boilerplate.

Working with both the Composition and Options API:
https://stackblitz.com/edit/nuxt-highcharts-area-range-nj8xzd?file=components%2FAreaRangeChart2.vue,components%2FAreaRangeChart.vue,app.vue

[namvvo]

Cannot read properties of undefined (reading 'Core/Chart/Chart.js') your stackblitz causes error. It works if I just load your lib instead of using the npm module

[richardeschloss]

It appears to be due to the fact that Highcharts is primarily a client-only library (requiring a browser). Setting ssr mode to false (or making the components run client-only) seem to work:
https://stackblitz.com/edit/nuxt-highcharts-area-range-8yvdao?file=components%2FAreaRangeChart2.vue,components%2FAreaRangeChart.vue,nuxt.config.ts