Highcharts change colour of individual bar

Question

For the last few hours I've been trying to get this to work but I can't seem to find the solution. I've already tried different solutions that I found on Google or StackOverflow.

Right now it only grabs the first color and applies that to all the bars.

$(function () {
$('#container').highcharts({
    colors: ['yellow', 'red', 'green', 'purple', 'black']
    , chart: {
        type: 'bar'
    }
    , title: {
        text: ''
    }
    , subtitle: {
        enabled: false
    }
    , exporting: {
        enabled: false
    }
    , xAxis: {
        categories: ['<?php echo $Product_1; ?>', '<?php echo $Product_2; ?>', '<?php echo $Product_3; ?>', '<?php echo $Product_4; ?>', '<?php echo $Product_5; ?>', '<?php echo $Product_6; ?>', '<?php echo $Product_7; ?>', '<?php echo $Product_8; ?>', '<?php echo $Product_9; ?>', '<?php echo $Product_10; ?>', '<?php echo $Product_11; ?>']
        , title: {
            text: null
        }
    }
    , yAxis: {
        max: 100
        , min: 0
        , title: {
            enabled: false
        }
        , labels: {
            overflow: 'justify'
        }
    }
    , tooltip: {
        enabled: false
    }
    , plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    }
    , legend: {
        enabled: false
    }
    , credits: {
        enabled: false
    }
    , series: [{
        name: 'Year 1800'
        , data: [<?php echo $Score_1; ?>, <?php echo $Score_2; ?>, <?php echo $Score_3; ?>, <?php echo $Score_4; ?>, <?php echo $Score_5; ?>, <?php echo $Score_6; ?>, <?php echo $Score_7; ?>, <?php echo $Score_8; ?>, <?php echo $Score_9; ?>, <?php echo $Score_10; ?>, <?php echo $Score_11; ?>]
      }]
    });
});

Thanks for your help.

Possible duplicate of [How do you change the colour of each category within a highcharts column chart?](https://stackoverflow.com/questions/7414287/how-do-you-change-the-colour-of-each-category-within-a-highcharts-column-chart) — cassiomolin, Feb 15 '19 at 16:29

score 1 · Answer 1 · edited May 23 '17 at 12:32

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            margin: [ 50, 50, 100, 80]
        },
        plotOptions: {
            column: {
                colorByPoint: true
            }
        },
        colors: [
            '#ff0000',
            '#00ff00',
            '#0000ff'
        ],
        title: {
            text: 'World\'s largest cities per 2008'
        },
        xAxis: {
            categories: [
                'Tokyo',
                'Jakarta',
                'New York',
                'Seoul',
                'Manila',
                'Mumbai',
                'Sao Paulo',
                'Mexico City',
                'Dehli',
                'Osaka',
                'Cairo',
                'Kolkata',
                'Los Angeles',
                'Shanghai',
                'Moscow',
                'Beijing',
                'Buenos Aires',
                'Guangzhou',
                'Shenzhen',
                'Istanbul'
            ],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
                    ' millions';
            }
        },
        series: [{
            name: 'Population',
            data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
                17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
                11.7, 11.2],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});

Check here.

Also here.

Also.

Thanks for the examples. I copied the first example and changed chart type to bar. which comes up with the same problem as me. it seems like you can't have different colors in a bar graph... — J.Koppen, Jul 17 '16 at 18:50
As an addition to previous comments, you can also change your color manually in bar charts: http://jsfiddle.net/dapYa/362/ — Grzegorz Blachliński, Jul 18 '16 at 08:55

Highcharts change colour of individual bar

1 Answers1