Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>

<div id="container"></div>

CSS

#container {
  height: 400px;
  min-width: 310px;
  max-width: 600px;
  margin: 0 auto;
}

JavaScript

$(function() {
	const rand = function (from, to) {
  	return Math.round(from + Math.random() * (to - from));
  };
  const chart = Highcharts.chart('container', {
    chart: {
      type: 'column',
      options3d: {
        enabled: true,
        alpha: 20,
        beta: 30,
        depth: 200,
        viewDistance: 5,
        frame: {
          bottom: {
            size: 1,
            color: 'rgba(0,0,0,0.05)'
          }
        }
      }
    },
    title: {
      text: 'a 3D Scatter Chart'
    },
    subtitle: {
      text: 'with categories on the Z-Axis'
    },
    yAxis: {
      min: 0,
      max: 10
    },
    xAxis: {
      min: 0,
      max: 4,
      gridLineWidth: 1
    },
    zAxis: {
      min: 0,
      max: 3,
      categories: [1,2,3,4],
      labels: {
        y: 5,
        rotation: 18
      }
    },
    plotOptions: {
      series: {
        groupZPadding: 10,
        depth: 60,
        groupPadding: 0,
        grouping: false,
      }
    },
    series: [{
      stack: 0,
      data: [{x: 2, y: 1}, {x: 3, y: 5}]
    }, {
      stack: 1,
      data: [{x: 3, y: 2}, {x: 4, y: 4}]
    }, {
      stack: 2,
      data: [{x: 1, y: 8, z:1}]
    }]
  });


  // Add mouse events for rotation
  $(chart.container).on('mousedown.hc touchstart.hc', function(eStart) {
    eStart = chart.pointer.normalize(eStart);

    var posX = eStart.pageX,
      posY = eStart.pageY,
      alpha = chart.options.chart.options3d.alpha,
      beta = chart.options.chart.options3d.beta,
      newAlpha,
      newBeta,
      sensitivity = 5; // lower is more sensitive

    $(document).on({
      'mousemove.hc touchdrag.hc': function(e) {
        // Run beta
        newBeta = beta + (posX - e.pageX) / sensitivity;
        chart.options.chart.options3d.beta = newBeta;

        // Run alpha
        newAlpha = alpha + (e.pageY - posY) / sensitivity;
        chart.options.chart.options3d.alpha = newAlpha;

        chart.redraw(false);
      },
      'mouseup touchend': function() {
   ...