Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.src.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts-draggable-3d@latest"></script>
<div id="container"></div>

CSS

#container {
    width: 500px; 
    margin: 0 auto;
}

JavaScript

$(function () {
  // Give the points a 3D feel by adding a radial gradient
  Highcharts.getOptions().colors = $.map(
    Highcharts.getOptions().colors,
    function (color) {
      return {
        radialGradient: {
          cx: 0.4,
          cy: 0.3,
          r: 0.5,
        },
        stops: [
          [0, color],
          [1, new Highcharts.Color(color).brighten(-0.2).get("rgb")],
        ],
      }
    },
  )

  // Set up the chart
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: "container",
      type: "scatter",
      width: 500,
      height: 500,
      margin: 100,
      options3d: {
        enabled: true,
        axisLabelPosition: 'auto',
        drag: {
          enabled: true,
          flipAxes: true,
          snap: 15,
          animateSnap: true,
          minBeta: Number.NEGATIVE_INFINITY,
          maxBeta: Number.POSITIVE_INFINITY,
        },
        alpha: 15,
        beta: 30,
        depth: 300,
        viewDistance: 5,
        fitToPlot: false,
        frame: { size: 1, color: "rgba(0,0,0,0.02)", visible: "auto" },
      },
    },
    title: {
      text: "3D Draggable Chart",
    },
    plotOptions: {
      scatter: {
        width: 10,
        height: 10,
        depth: 10,
      },
    },
    yAxis: {
      title: { text: "Y Axis" },
      min: 0,
      max: 10,
      labels: {
        skew3d: true,
        position3d: "flap",
      },
    },
    xAxis: {
      title: { text: "X Axis" },
      min: 0,
      max: 10,
      showFirstLabel: false,
      showLastLabel: false,
      labels: {
        skew3d: true,
        position3d: "flap",
      },
    },
    zAxis: {
      title: { text: "Z Axis" },
      min: 0,
      max: 10,
      showFirstLabel: false,
      showLastLabel: false,
      labels: {
        skew3d: true,
        position3d: "flap",
      },
    },
    legend: {
      enabled: false,
    },
    series: [
     ...