Skip to content Skip to sidebar Skip to footer

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, o

Solution 1:

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.

Solution 2:

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/

Post a Comment for "Put Different Names To Each Bar In Highcharts"