How to add footer for each series stacked horizontal bars in highcharts?

问题

i have generated something like.

with this code for highchart option:

    Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    colors: [ '#ff058d', '#9696b2'],
    title: {
        text: null
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
        labels: {
                align: 'left',
                x: 0,
                y: -20,
                fontsize: '1em',
                color: 'black'
              }
    },
    yAxis: {
            visible: false,
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    },
    legend: {
        visible: false,
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'Compliant',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Non-Compliant',
        data: [2, 2, 3, 2, 1]
    }]
});

but i want something like below. according to above code, how can i generate below image? i want the footer and also the title in front of every chart.

回答1:

You should be able to achieve it by using the stackLabels and dataLabels feature and their formatter callback function to customize them.

Demo: https://jsfiddle.net/BlackLabel/m1skyt9g/

Code to show the percent value (I'm not sure if this is the correct value to show, but you should be able to easily change it to your requirments) next to the bar:

stackLabels: {
  enabled: true,
  x: 6,
  formatter() {
    let output = Math.round(this.total / this.points[0][0] * 100) / 100;
    return output + '%'
  }
}

To show the 'footer' as a dataLabel:

  dataLabels: {
    enabled: true,
    align: 'left',
    allowOverlap: true,
    y: 23,
    formatter() {
        let output = Math.round(this.total / this.y * 100) / 100
      if (!this.colorIndex) {
        return '';
      } else {
        return 'Previous Non-Compliance of ' + output + '%'
      }
    }
  }

API: https://api.highcharts.com/highcharts/yAxis.stackLabels.format

API: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels

Let me know if it is what you had in mind.

来源：https://stackoverflow.com/questions/59924211/how-to-add-footer-for-each-series-stacked-horizontal-bars-in-highcharts

标签

javascript

angular

Highcharts