CODEWITHSUNDEEP
javascriptdata-visualizationhighcharts
flaggalagga
flaggalagga

Reputation: 493

How to get different colors for every column in a stacked column chart

I'm trying to do a stacked percentage column chart, however I'm stuck with the layout.

The first picture below shows what I'm trying to achieve with different colors for every column.

Highcharts

enter image description here The second picture above shows the chart that I managed to do.

Upvotes: 0

Views: 234

Answers (1)

Charles Clayton
Charles Clayton

Reputation: 17946

You can assign the color of each individual bar like so: {y: 30, color:'green'}. This is the same in a non-3D graph as it is a 3D graph except that when it's 3D, it colors the entire bar so you lose that distinguishing shading on the top and side. It looks better just to have it non-3D in my opinion.

But anyway, I created what you were hoping for:

enter image description here

Using the following code:

    $('#container').highcharts({

        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                viewDistance: 30,
                depth: 40
            }
        },
        xAxis: {
            categories: ['A', 'B', 'C', 'D']
        },
        yAxis: {
           labels: {
              formatter: function(){
                return 100 * this.value / $(this.axis.tickPositions).last()[0] + '%';
              }
           }
        },
        legend:{
            enabled:false
        },
        plotOptions: {
            column: {
                stacking: 'percent',
                depth:30,
                dataLabels: {
                    enabled: true,
                    color: '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'}
             ]
         }]
    });
});

JSFiddle

Upvotes: 1

Related Questions