Problem rendering a scatter3d chart

[Rami]

Hi!

Awesome project, I love the work done and I find the documentation good as well :)
I am having some problems rendering the chart below in a Vue3 project. It works if I change the type to column, but with the scatter3d option I get the error below. Any idea what I might be doing wrong?

Note that the chartOption below work properly when used in this example.

Thanks

highcharts.src.js?e0d1:35914 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')
    at eval (highcharts.src.js?e0d1:35914:1)
    at Array.forEach (<anonymous>)
    at d.eval (highcharts.src.js?e0d1:35911:1)
    at y (highcharts.src.js?e0d1:1660:1)
    at d.a.bindAxes (highcharts.src.js?e0d1:35909:1)
    at d.a.init (highcharts.src.js?e0d1:35775:1)
    at a.initSeries (highcharts.src.js?e0d1:30455:1)
    at a.eval (highcharts.src.js?e0d1:32224:1)
    at y (highcharts.src.js?e0d1:1660:1)
    at a.addSeries (highcharts.src.js?e0d1:32221:1)

import Highcharts from "highcharts";
import Highcharts3d from "highcharts/highcharts-3d";
import HighchartsVue from "highcharts-vue";

Highcharts3d(Highcharts);

      this.chartOptions = {
        chart: {
          renderTo: "container",
          type: "scatter3d",
          options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25,
          },
        },
        title: {
          text: "Chart rotation demo",
        },
        subtitle: {
          text: "Test options by dragging the sliders below",
        },
        plotOptions: {
          column: {
            depth: 25,
          },
        },
        series: [
          {
            data: [
              [0, 0, 0],
              [0, 5, 0],
              [0.03, 34.13, -0.14]
            ]
          },
        ],
      };

[Daniel Studencki]

Hi @ramihoudroge ,

Thank you for contacting us. It's really amazing to hear so good words about this package :)
First of all, attached example is little bit outdated, as it is using the older version of Vue (v2) and also older version of this wrapper, which does not work with Vue v3.

I've just checked your chart options with the latest wrapper version, produced the demo, and looks like everything works correctly, so it's hard to deduce what is happening with your project. Could you try to reproduce the problem by creating some minimal repository so that I would be able to investigate it much deeper?

Mentioned example: https://codesandbox.io/s/muddy-glitter-td8y2e

Kind regards!

[Rami]

Hi again,
This looks like it is related to loading data in a reactive framework. The snippet works with static data, but when I invoke axios and wait for the response, I get that error. It must be something in my code, probably rendering on empty data.
Thanks
Rami

[Daniel Studencki]

Thank you for letting us know. Have you tried to update your dependencies, or produce the example, so that I could take a look on it?