How to create a canonical 3d plot in Highcharts?

How to create a canonical 3d plot in Highcharts?,highcharts,scatter3d,Highcharts,Scatter3d,How would I go ahead and create a something like the JMP Canonical 3D Plot in Highcharts to display three-dimensional spheres of various sizes, with some transparency, while still being able to plot singular values (like the small dots in the image below)? I imagine 3D Scatter Plot would be a way to go, but I don't see a possibility to have various sizes on individual spheres. Sample of Canonical 3D plot from https://www.jmp.com/support/help/en/15.1/index.shtml#page/jmp/example-of-a-canonical-3

How would I go ahead and create a something like the JMP Canonical 3D Plot in Highcharts to display three-dimensional spheres of various sizes, with some transparency, while still being able to plot singular values (like the small dots in the image below)? I imagine 3D Scatter Plot would be a way to go, but I don't see a possibility to have various sizes on individual spheres.

Sample of Canonical 3D plot

Sample of Canonical 3D plot from https://www.jmp.com/support/help/en/15.1/index.shtml#page/jmp/example-of-a-canonical-3d-plot.shtml


#1

You can change a size of individual scatter point by marker.radius. Example:

    data: [
        { x: 1, y: 6, z: 5, marker: { radius: 10 } },
        { x: 8, y: 7, z: 9, marker: { radius: 50 } },
        ...
    ]

Live demo: https://jsfiddle.net/BlackLabel/0fnx5ued/

API Reference: https://api.highcharts.com/highcharts/series.scatter3d.data.marker.radius


#2

I am trying to implement similar functionality in Vue.js. I'm using the Vue wrapper for Highcharts, and have managed to show the 3D scatter plot, but I do not understand how to implement the rotation functionality. Do you have an example of that with the Vue wrapper?

#3

Hi @Julle, yes we have, here is it: codesandbox.io/s/highcharts-vue-demo-forked-wyxxt