How can I get every bar in different colour using Highchart?

Question

The Highchart graph code is shown below I want every bar label color is different. Currently, I'm getting the same color in bar

 Highcharts.chart('container', {
            chart: {
                type: 'column',
            },
            title: {
                text: 'Popular '
            },
            credits:{
                enabled:false
            },
            xAxis: {
                max: 20,
                type: 'category',
                style:{
                    fontSize: '12px'
                }
            },
            yAxis: {
                min: 0,
                allowDecimals:false,
                title: {
                    text: 'Number of applications',
                    style:{
                       fontSize: '12px'
                    }
                },
                gridLineWidth:0,
                minorGridLineWidth: 0,
                tickLength: 5,
                tickWidth: 1,
                tickPosition: 'inside',
                lineWidth:1
            },
            scrollbar: {
                enabled: true
            },
            legend: {
                enabled: false
            },

            tooltip: {
                pointFormat: 'hi'
            },
            series: [{
                name: Stats',
                data: data,
                color:'#2ecc71',
                pointWidth: 25,
            }],

Data format is : [ [ "Qualcom", 17 ], [ "The ram", 12 ], [ "Aoperty", 8 ], [ "Ob.", 8 ], [ "Sugh", 8 ], ]

The output is shown in the picture I want every bar is in a different color can you help me?

Answer 1

Referring to comments you can set a specific color to a single point by adding a color property programmatically to its object like that:

  series: [{
    data: [
      ["Qualcom", 17],
      {
        name: "The ram",
        y: 12,
        color: 'red'
      },
      ["Aoperty", 8],
      ["Ob.", 8],
      ["Sugh", 8]
    ],
    color: '#2ecc71'
  }]

API reference:

• https://api.highcharts.com/highcharts/series.column.data.color

Demo:

• https://jsfiddle.net/BlackLabel/craqy1sv/1/

---

If you want to add a specific color to a point when a condition is matched you can loop through each series point in chart load event and update a matched point:

  chart: {
    type: 'column',
    events: {
        load: function() {
        var chart = this,
            series = chart.series[0];

        series.points.forEach(function(point) {
          if (point.name === 'The ram') {
            point.update({
                color: 'red'
            })
          }
        });
      }
    }
  }

API reference:

• https://api.highcharts.com/highcharts/chart.events.load
• https://api.highcharts.com/class-reference/Highcharts.Point#update

Demo:

• https://jsfiddle.net/BlackLabel/jmuoevz1/

Answer 2

You need to set colorByPoint :true to use different colors like that

  series: [{
    name: 'Stats',
    data: [
      [
        "Qualcom",
        17
      ],
      [
        "The ram",
        12
      ],
      [
        "Aoperty",
        8
      ],
      [
        "Ob.",
        8
      ],
      [
        "Sugh",
        8
      ]
    ],
    colorByPoint: true,
    pointWidth: 25,
  }]

Fiddle