Chartjs-Is it possible to display the yAxis as a percentage without modifying my datasets for a Line chart?

by

1👍

✅

You indeed need to build a plugin to achieve something like that.

Here is a plugin I have constructed, that will get the job done …

Chart.plugins.register({
   beforeDraw: function(c) {
      let ticks = c.scales['y-axis-0'].ticks;
      let step = 100 / (ticks.length - 1);
      let tick = 0;
      ticks.forEach((e, i, a) => {
         let index = a.length - 1 - i;
         a[index] = (tick | 0) + '%';
         tick += step;
      });
   }
});

note :

You would also need to add the following option for y-axis …

afterFit: function(e) {
   e.width = 60
}

This is to resize the chart so that, the y-axis ticks fits properly to the view.

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

Chart.plugins.register({
   beforeDraw: function(c) {
      let ticks = c.scales['y-axis-0'].ticks;
      let step = 100 / (ticks.length - 1);
      let tick = 0;
      ticks.forEach((e, i, a) => {
         let index = a.length - 1 - i;
         a[index] = (tick | 0) + '%';
         tick += step;
      });
   }
});

var chartData = {
   labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
   datasets: [{
      label: "Dataset_1",
      borderColor: "yellow",
      backgroundColor: "yellow",
      data: [60, 45, 82, 100, 12, 22, 45, 56]
   }, {
      label: "Dataset_2",
      borderColor: "blue",
      backgroundColor: "blue",
      data: [15, 217, 8, 219, 4, 16, 115, 9]
   }, {
      label: "Dataset_3",
      borderColor: "green",
      backgroundColor: "green",
      data: [840, 750, 910, 874, 799, 610, 612, 839]
   }, {
      label: "Dataset_4",
      borderColor: "grey",
      backgroundColor: "grey",
      data: [15, 22, 5, 17, 32, 40, 44, 8]
   }]
};

var canvas = document.getElementById('canvas');
var myBarChart = new Chart(canvas, {
   type: "line",
   data: chartData,
   options: {
      responsive: true,
      title: {
         display: true,
         text: "sugar honey iced tea"
      },
      tooltips: {
         mode: 'label'
      },
      scales: {
         xAxes: [{
            gridLines: {
               display: false
            },
            scaleLabel: {
               display: true,
               labelString: 'Time'
            }
         }],
         yAxes: [{
            afterFit: function(e) {
               e.width = 60 //set that suits the best
            },
            stacked: true,
            scaleLabel: {
               display: true,
               labelString: 'Percentage'
            }
         }]
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Leave a comment