get different colors for every column in a 3D stacked column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

get different colors for every column in a 3D stacked column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {//from  w  w w  . j av  a 2 s .  c  o m
    $('#container').highcharts({
        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                viewDistance: 25,
                depth: 40
            },
            marginTop: 80,
            marginRight: 40
        },
        title: {
            text: 'Total fruit consumption, grouped by gender'
        },
        xAxis: {
            categories: ['A', 'B', 'C', 'D']
        },
        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            },
              labels: {
              formatter: function(){
                return 100 * this.value / $(this.axis.tickPositions).last()[0] + '%';
              }
            }
        },
           legend:{
           enabled:false
        },
        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'percent',
                depth:30,
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
    series: [{
      index: 1,
      data: [
        {y: 30, color:'green'},
        {y: 20, color: 'blue'},
            {y: 18, color: 'red'},
        {y: 17, color: 'black'}
      ]
    }, {
      index: 2,
       data: [
        {y: 70, color:'lightgreen'},
        {y: 80, color: 'lightblue'},
            {y: 82, color: 'pink'},
        {y: 83, color: 'lightgray'}
      ]
    }]
    });
});

      </script> 
   </head> 
   <body> 
      <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> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials