Highcharts Demo

author(s): Torstein Hønsi

by Black Label

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/highcharts-more.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<button id="polar3d" class="chartbuttons">Polar</button>
<div id="container" style="height: 400px"></div>

CSS

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

JavaScript

(function(H) {
  H.addEvent(H.Series, 'afterRender', function() {
    var chart = this.chart;
    if (chart.polar && chart.pane && chart.pane[0]) {
      chart.pane[0].updateCenter(this.xAxis);
      chart.pane[0].updateCenter(this.yAxis);
    }
  });
})(Highcharts);


var chartbase3d = Highcharts.chart('container', {
  chart: {
    type: 'column',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      viewDistance: 25,
      depth: 40
    }
  },

  title: {
    text: 'Total fruit consumption, grouped by gender'
  },

  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    labels: {
      skew3d: true,
      style: {
        fontSize: '16px'
      }
    }
  },

  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Number of fruits',
      skew3d: true
    }
  },

  tooltip: {
    headerFormat: '<b>{point.key}</b><br>',
    pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
  },

  plotOptions: {
    column: {
      stacking: 'normal',
      depth: 40
    }
  },

  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    stack: 'male'
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    stack: 'male'
  }, {
    name: 'Jane',
    data: [2, 5, 6, 2, 1],
    stack: 'female'
  }, {
    name: 'Janet',
    data: [3, 0, 4, 4, 3],
    stack: 'female'
  }]
});

$('#polar3d').click(function() {


  chartbase3d.update({
    chart: {
      inverted: false,
      polar: true,
      options3d: {
        enabled: false
      }
    },
    subtitle: {
      text: 'Polar'
    }
  });


});