Highcharts Demo

author(s): Torstein Hønsi

by Hugo Carneiro

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://blacklabel.github.io/projections/js/projections.js"></script>
<div id="containerDots" style="height: 400px"></div>

CSS

#container {
  height: 400px;
  min-width: 310px;
  max-width: 800px;
  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, Highcharts.Color(color).brighten(-0.2).get('rgb')]
      ]
    };
  });

  // Set up the chart
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'containerDots',
      margin: 100,
      type: 'scatter',
      options3d: {
        enabled: true,
        alpha: 10,
        beta: 30,
        depth: 250,
        viewDistance: 5,
        fitToPlot: false,
        frame: {
          bottom: {
            size: 1,
            color: 'rgba(0,0,0,0.02)'
          },
          back: {
            size: 1,
            color: 'rgba(0,0,0,0.04)'
          },
          side: {
            size: 1,
            color: 'rgba(0,0,0,0.06)'
          }
        }
      }
    },
    title: {
      text: 'Draggable box'
    },
    subtitle: {
      text: 'Click and drag the plot area to rotate in space'
    },
    plotOptions: {
      scatter: {
        width: 10,
        height: 10,
        depth: 10
      }
    },
    yAxis: {
      min: 0,
      max: 10,
      title: null
    },
    xAxis: {
      min: 0,
      max: 10,
      gridLineWidth: 1
    },
    zAxis: {
      min: 0,
      max: 10,
      showFirstLabel: false
    },
    legend: {
      enabled: false
    },
    series: [{
      planeProjection: {
        enabled: false,
      },
      lineProjection: {
        enabled: 'hover',
        colorByPoint: true
      },
      name: 'Reading',
      colorByPoint: true,
      data: [
        [1, 6, 5],
        [8, 7, 9],
        [1, 3, 4],
        [4, 6, 8],
        [5, 7, 7],
        [6, 9, 6],
        [7, 0, 5],
        [2, 3, 3],
        [3, 9, 8],
        [3, 6, 5],
        [4, 9, 4],
        [2, 3, 3],
        [6, 9, 9],
        [0, 7, 0],
        [7, 7, 9],
...