27

I want to make a chart which has percentage values on y-axis but I'm not able to find any options in document. Please suggest some answers

Apostolos
  • 10,033
  • 5
  • 24
  • 39
Manjunath Gk
  • 412
  • 1
  • 4
  • 13

6 Answers6

27

You could do something like this:

If you know the absolute value that represents 100% in your dataset, you can pass this to your options object:

    scales: {
  yAxes: [
    {
      ticks: {
        min: 0,
        max: this.max,// Your absolute max value
        callback: function (value) {
          return (value / this.max * 100).toFixed(0) + '%'; // convert it to percentage
        },
      },
      scaleLabel: {
        display: true,
        labelString: 'Percentage',
      },
    },
  ],
},
Théo T. Carranza
  • 7,813
  • 1
  • 21
  • 14
16

With Chart.js 3 you can do this:

const options = {
    scales: {
        y: {
            ticks: {
                format: {
                    style: 'percent'
                }
            }
        }
    }
};
Ben McCann
  • 18,548
  • 25
  • 83
  • 101
  • Nice solution, where did you find it? Under https://www.chartjs.org/docs/latest/axes/#tick-configuration it is not mentioned!? – Marc Schmid Oct 13 '22 at 14:54
  • 1
    That's great. Tx a lot. But I get my YAxes with 2 decimals pct while having my data truncated at 0 decimal percent. any idea on how to fix this with yxes 0 decimals pct and values 2 decimals oct? – Je Je May 01 '23 at 11:47
6

If you have a static total...say a max value of 800, you can just show custom ticks like this:

ticks: {
    //.. Other settings
    stepSize: 200, /* total/4 shows 0, 25%, 50%, 75%, 100% */             
    callback: function(value, index, values) {
        return ((value / 800) * 100) + '%';
    }
}
Wayne F. Kaskie
  • 3,257
  • 5
  • 33
  • 43
5

Don't think there is a out of the box version of that yet. You might have to do it a bit manually by calculating the percentages before setting the chart up and e.g. follow this example to create the graph: https://stackoverflow.com/a/40438511/6638478

Community
  • 1
  • 1
Tom Glover
  • 2,996
  • 23
  • 23
3

I used these options to add percentage to yAxes:

const options = {
  showLines: true,
  scales: {
    yAxes: [
        {
          ticks: {
            min: 0,
            max: 100,
            stepSize: 20,
            callback: function (value) {
              return (value / this.max * 100).toFixed(0) + '%'; // convert it to percentage
              },
          },
          type: "linear",
          display: true,
          position: "left",
          id: "y-axis-1",
          gridLines: {
            drawOnArea: false,
          },
        },
    ],
  },
};
DaveL17
  • 1,673
  • 7
  • 24
  • 38
jyotishman saikia
  • 2,079
  • 1
  • 15
  • 11
2

Of using the toLocaleString function

scales: {
  yAxes: [
    {
      ticks: {
        callback: function (value) {
          return value.toLocaleString('de-DE', {style:'percent'});
        },
      }
    },
  ],
},
olidem
  • 1,961
  • 2
  • 20
  • 45