Search code examples
highchartsscatter3d

How to create a canonical 3d plot in Highcharts?


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


Solution

  • 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