Formatting Highchart bar charts axis labels

Question

I am trying to set custom x axis labels for bar charts in HighChart. I used formatter to add % and milestone dates to the labels. I can see the expected result when I print in the console, but the bar charts labels are not reflecting this value.

Please find the attached fiddle of what I have tried.

https://jsfiddle.net/mt74opnu/2/

Code:

/* public milestonedata: MilestoneDetailsSchedule = {
    tickInterval: 30,
    milestonedetails: [{
      percentage: 30,
      milestonedate: "May 1, 2019"
    }, {
      percentage: 60,
      milestonedate: "May 25, 2019"
    }]
}; // this the object that I am trying to access for labels */

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  xAxis: {
    categories: ['My Goal', 'My Progress', 'My Branch', 'My Region']
  },
  yAxis: {
    min: 0,
    max: 100,
    tickInterval: 30,
    labels: {
      overflow: 'justify',
      formatter: function() {
        //console.log('In charts');
        //console.log(this.value);
        var milestonedata = {
          tickInterval: 30,
          milestonedetails: [{
            percentage: 30,
            milestonedate: "May 1, 2019"
          }, {
            percentage: 60,
            milestonedate: "May 25, 2019"
          }]
        };
        var result;
        milestonedata.milestonedetails.forEach((milestone) => {
          //console.log(milestone); 
          //would like the labels to be 30% by date1, 60% by date 2
          if (milestone.percentage == this.value && milestone.milestonedate) {
            result = this.value + "% by <br>" + milestone.milestonedate;
            console.log(result);
          } else {
            result = this.value;
          }
          return result;
        });
      }
    }
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  series: [{
    data: [{
      y: 25
    }, {
      y: 50
    }, {
      y: 75
    }, {
      y: 100
    }]
  }]
});

I would like to see x axis labels: value + % + milestone date for that value. for ex: 30% by May 1 2019 etc.

Is this possible? Thanks in advance!

Answer 1

You were very close... a few things which i did to make it work...

• you had an else clause inside the forEach, so unless the values match for the very last item of the array, you're gonna see just the this.value being printed
• to return the results inside the forEach, you could break and return or wait for the forEach to complete before you return your label value

Here is the updated relevant code for the TS file:

Highcharts.chart('container', {
      chart: {
        type: 'bar'
      },
      xAxis: {
        categories: ['My Goal', 'My Progress', 'My Branch', 'My Region']
      },
      yAxis: {
        min: 0,
        max: 100,
        tickInterval: 30,
        labels: {
          overflow: 'justify',
          formatter: function () {
            //console.log('In charts');
            //console.log('this.value',this.value);
            var milestonedata = {
              tickInterval: 30,
              milestonedetails: [{
                percentage: 30,
                milestonedate: "May 1, 2019"
              }, {
                percentage: 60,
                milestonedate: "May 25, 2019"
              }, {
                percentage: 90,
                milestonedate: "July 12, 2019"
              }]
            };
            var result;
            milestonedata.milestonedetails.forEach((milestone) => {
              //console.log(milestone); 
              //would like the labels to be 30% by date1, 60% by date 2
              if (milestone.percentage == this.value && milestone.milestonedate) {
                result = this.value + "% by <br>" + milestone.milestonedate;
                console.log('printing:',result);
              }/* else {
                result = this.value;
              }*/
            });
              return result;
          }
        }
      },
      plotOptions: {
        bar: {
          dataLabels: {
            enabled: true
          }
        }
      },
      series: [{
        data: [{
          y: 25
        }, {
          y: 50
        }, {
          y: 75
        }, {
          y: 100
        }]
      }]
    });

check the complete working demo here