Search code examples
highchartsyaxis

Highcharts pareto charts showing more than 100% on y-axis

I am using highchart pareto chart. on right y-axis I want to show cumulative number. In my input data it would never be more than 100%. However highcharts is showing more values. Following is the sample code/configuration.

ParetoChartOptions: Highcharts.Options = {
title: {
  text: 'Pareto Chart Example'
},
xAxis: {
  categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
},
series: [{
  type: 'column',
  name: 'Frequency',
  data: [10, 20, 30, 30, 10],
}, {
  type: 'pareto',
  name: 'Cumulative Percentage',
  yAxis: 1,
  //data:[10],
  data: [10, 30, 60, 90, 100] as Highcharts.PointOptionsObject[],
  tooltip: {
    valueSuffix: '%'
  }
}],
yAxis: [{
  title: {
    text: 'Frequency'
  }
}, {
  title: {
    text: 'Cumulative Percentage'
  },
  opposite: true
}]

};

enter image description here

Can someone please tell me what is wrong with above code.

Atul

Solution

  • In order to make the secondary y-axis show values in a range of 0 to 100, you should set the minPadding and maxPadding to 0.

    yAxis: [{
    // main yAxis
}, {
    title: {
        text: 'Pareto'
    },
    minPadding: 0,
    maxPadding: 0,
    opposite: true,
    labels: {
        format: '{value}%'
    }
}]

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

    Reference: https://www.highcharts.com/docs/chart-and-series-types/pareto-chart