Highcharts Demo

author(s): Torstein Hønsi

by rhavelka

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 chart = Highcharts.chart('container', {
    chart: {
      type: 'column',
      options3d: {
        enabled: true,
        alpha: 20,
        beta: 30,
        viewDistance: 5,
        fitToPlot: false,
        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: {
      gridLineWidth: 1
    },
    zAxis: {
      min: 0,
      max: 8,
      categories: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
      labels: {
        y: 5,
        rotation: 18
      }
    },
    plotOptions: {
      column: {
        depth: 100
      },
      series: {
      	pointPadding: 0.1,
        groupZPadding: 10,
        groupPadding: 0,
        grouping: false,
      }
    },
    series: [ {
      data: [[0,10], [1,1]]
      }, {
      data: [[2,2], [3,9], [4,3]]
      }, {
      data: [[4,8], [5,3]]
      }, {
      data: [[0,1], [1,10]]
      },{
      data: [[1,1], [2,9], [3,2]]
      }, {
      data: [[2,2], [3,9], [4,3]]
      }, {
      data: [[2,2], [3,9], [4,3]]
      }, {
      data: [[2,2], [3,9], [4,3]]
      }

    ]
  });


  // 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;
       ...