HighCharts - 如何设置最大值为 100%

Question

I have a bar graph with values converted to a percentage with a loop. When my values are returned it seems to be displaying the data exactly how I expect it to but the graph extends past 100% with empty values. I tried to set a max: 100 on my yaxis but I am unable to set it 100%.

When adding max:100 it displays one bar in my graph which is why I believe it is focusing on the value 100 and not 100%.

Is there a way to handle this in Highcharts?

Here is a jsfiddle

As seen in the photo it seems to only calculate 100% but the graph ends at 104%.

My expected outcome is to have the percentage at the end of the graph to be at 100%. I'm not sure what is causing this.

Here is my code:

let data = [10, 31, 13, 19, 21, 50, 10]

let dataSum = 0

for (let i = 0; i < data.length; i++) {
dataSum += data[i]
}

console.log(dataSum, "dataSum")

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: "Bar Graph"
  },
  xAxis: {

  },
  yAxis: {
    min: 0,
               labels: {
            formatter: function () {
                var pcnt = (this.value / dataSum) * 100;
                return Highcharts.numberFormat(pcnt, 0, ',') + '%';
            }
        },

    title: {
      text: '% of Total'
    }
  },
  legend: {
    reversed: false
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'Low',
    index: 4,
    color: '#0D6302',
    data: [data[0]],
    showInLegend: true,
  }, {
    name: 'Medium-Low',
    index: 3,
    color: '#0B7070',
    data: [data[2]]
  }, {
    name: 'Medium',
    index: 2,
    color: '#DC9603',
    data: [data[3]]
  },{
    name: 'Low',
    index: 5,
    color: '#0D6302',
    data: [data[1]],
    showInLegend: false
  }, 
  {
    name: 'Medium-High',
    index: 1,
    color: '#DD5F0C',
    data: [data[4]]
  }, {
    name: 'High',
    index: 0,
    color: '#C50710',
    data: [data[5]]
  }]
});

Answer 1

In this, as the ticks are made by default by the highcharts, that is why you get extra values even without percentage. see. fiddle with the issue.

so what you can do is you can use tickPositioner function to render the click according to your data. and then convert the Value for the label in the formatter to the percentage. Apart from this, I can not find any other way to do this as of now. see. fiddle with the proposed solution.

align your data so that the percentage looks inline with data.

some other suggestions/corrections are most welcome

Answer 2

You have converted only axis labels, not an axis scale. (Max - dataSum is 154, not 100).

As a solution you can convert your data to percentage values before creating a chart:

let data = [10, 31, 13, 19, 21, 50, 10]
let dataSum = 0

for (let i = 0; i < data.length; i++) {
    dataSum += data[i]
}

let percentageData = data.map((el) => (el / dataSum * 100));

Highcharts.chart('container', {
    ...,
    yAxis: {
        min: 0,
        max: 100,
        labels: {
            format: '{value}%'
        },
        ...
    },
    series: [{
            ...,
            data: [percentageData[0]],
        }, {
            ...,
            data: [percentageData[2]]
        }, {
            ...,
            data: [percentageData[3]]
        }, {
            ...,
            data: [percentageData[1]]
        }, {
            ...,
            data: [percentageData[4]]
        }, {
            ...,
            data: [percentageData[5]]
        }
    ]
});

---

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5002/

API Reference: https://api.highcharts.com/highcharts/yAxis.labels.format