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?

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
@Cassio, But my data format is different from this. data: [ [ "Qualcom", 17 ], [ "The ram", 12 ], [ "Aoperty", 8 ], [ "Ob.", 8 ], [ "Sugh", 8 ] ]. In this format my x-axis value is qualcom, sugh etc and y-axis value is count which is 8 or 4 etc. — vikash, Feb 15 '19 at 18:14

score 1 · Accepted Answer · answered Feb 18 '19 at 08:26

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:

Demo:

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

score 0 · Answer 2 · answered Feb 15 '19 at 16:29

0

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

answered Feb 15 '19 at 16:29

Core972

4,065
3
31
45

@Corre972 I want specific color in a single bar or may be in more than one bar here is the small data given bye me but I have large set of data like size of aaray is 100 or greater. – vikash Feb 15 '19 at 18:08
Suppose if name is The Ram then I want to change the bar color in red and left all is in same color – vikash Feb 15 '19 at 18:22
@vikash, as long as the colors to used are defined you can do what ever you want [Documentation](https://api.highcharts.com/highcharts/colors). – Core972 Feb 15 '19 at 18:23
@Corre972, But how can I assign a color to the bar if my condition is matched? Thanks – vikash Feb 15 '19 at 18:25

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

2 Answers2