CODEWITHSUNDEEP
javascripthighchartshighcharts-ng
user5013616
user5013616

Reputation:

put different names to each bar in Highcharts

How I can rename each bar, I want to have different names. always it appears "bar1", "bar2", etc. this is the name of the series. but I want it to appear in place of those texts, others I want to customize. this is what I do. put different names, if there are 9 bars I want to put different names to the bars, bar1, bar2, bar3, Bar4, Bar5, Bar6, Bar7, Bar8, Bar9. I do not want to repeat in my example.

enter image description here

series: [{
  name: 'bar1',
  data: [1000, 950, 920, 0, 850],
  color: "#FF0000"
}, {
  name: 'bar2',
  data: [800, 770, 750, 0, 730],
  color: "#000000"

}, {
  name: 'bar3',
  data: [600, 540, 535, 500, 30],
  color: "#00FF00"

},
 {
  name: 'bar4',
  data: [28, 28, 28, 28, 28],
  color: "#00FF00"

}]

http://jsfiddle.net/05L1n3wb/

Upvotes: 1

Views: 207

Answers (2)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

As you can read in previous answer, you can use dataLabels formatter for changing string you are displaying for your columns: http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.formatter

You can add custom parameter to your points, like name:

 series: [{
      name: 'bar1',
      data: [{
        y: 1000,
        name: 'bar1'
      }, {
        y: 950,
        name: 'bar5'
      }, {
        y: 920,
        name: 'bar9'
      }, {
        y: 0,
        name: 'bar13'
      }, {
        y: 850,
        name: 'bar17'
      }],
      color: "#FF0000"
    }]

and inside your dataLabels formatter you can display this parameter:

  formatter: function() {
    var string = this.point.name + ' ';
    if (this.y <= 30) {
      string += this.y;
    }
    return string;
  }

example: http://jsfiddle.net/05L1n3wb/2/

Upvotes: 0

wergeld
wergeld

Reputation: 14442

This is done by changing name: 'bar1' to something you want. If you still need series.name to be 'bar1' then you should really think harder about your data model. If you want to change the text displayed based on the contents of series.name you can do that with the label formatter or dataLabel formatter.

Upvotes: 1

Related Questions