Create 3d column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

Create 3d column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script> 
      <style id="compiled-css" type="text/css">

#container {/* w w w . j av a2  s. co  m*/
   height: 400px;
   min-width: 310px;
   max-width: 600px;
   margin: 0 auto;
}


      </style> 
      <script type="text/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}]
    }]
  });
  // 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() {
        $(document).off('.hc');
      }
    });
  });
});

      </script> 
   </head> 
   <body> 
      <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>  
   </body>
</html>

Related Tutorials