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,
        depth: 200,
        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: [1,2],
      labels: {
        y: 5,
        rotation: 18
      }
    },
    plotOptions: {
      series: {
      pointPadding: 0.3,
        groupZPadding: 10,
        depth: 10,
        groupPadding: 0,
        grouping: false,
      }
    },
    series: [ {
      data: [[0,10], [1,1], [2,9], [3,2], [4,8], [5,3], [6,7], [7,4], [8,6], [9,5], [10,5], [11,6], [12,4], [13,7], [14,3], [15,8], [16,2], [17,9], [18, 1], [19, 10]]
      }, {
      data: [[0,1], [1,10], [2,2], [3,9], [4,3], [5,8], [6,4], [7,7], [8,5], [9,6], [10,6], [11,5], [12,7], [13,4], [14,8], [15,3], [16,9], [17,2], [18, 10], [19, 1]]
      }, {
      data: [[0,10], [1,1], [2,9], [3,2], [4,8], [5,3], [6,7], [7,4], [8,6], [9,5], [10,5], [11,6], [12,4], [13,7], [14,3], [15,8], [16,2], [17,9], [18, 1], [19, 10]]
      }, {
      data: [[0,1], [1,10], [2,2], [3,9], [4,3], [5,8], [6,4], [7,7], [8,5], [9,6], [10,6], [11,5], [12,7], [13,4], [14,8], [15,3], [16,9], [17,2], [18, 10], [19, 1]]
      },{
      data: [[0,10], [1,1], [2,9], [3,2], [4,8], [5,3], [6,7], [7,4], [8,6], [9,5], [10,5], [11,6], [12,4], [13,7], [14,3], [15,8], [16,2], [17,9], [18, 1], [19, 10]]
      }, {
      data: [[0,1], [1,10], [2,2], [3,9], [4,3], [5,8], [6,4], [7,7], [8,5], [9,6], [10,6], [11,5], [12,7], [13,4], [14,8], [15,3], [16,9], [17,2], [18, 10], [19, 1]]
      },{
      data: [[0,10],...