I am using Chart.js along with a Chart.js plugin, chart-labels. I am wanting to show the labels at the top of the bar chart, and in the label show the percentage of the x value in relation to the y value (e.g., 16 is 94% of 17), but the label values are always 100% (which it seems like it is calculating 16y by 16x = 100).

I haven't found a way to do this without the plugin, so I'm not sure if the plugin is the issue or not, or if the chart configuration is wrong.

Any advice/help is appreciated! Here is a JSBin with the code: ,js,output

HTML and JS:

<div style="width: 100%;"><canvas id="myChart"></canvas></div>

var colors = '#cd1127';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
                labels: ["Asset Taxes", "Excluded Assets", "Personal Injury and Property Damage", "Offsite Disposal", "Royalties", "Litigation", "Employment", "Operating Expenses"],
                datasets: [{
                        data: [16, 14, 17, 13, 15, 12, 9, 11],
                        backgroundColor: '#cd1127',
                        borderColor: '#cd1127',
                        borderWidth: 1
                }]
        },
        options: {
            responsive: true,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        max: 18,
                        beginAtZero:true
                    }
                }]
            },
            plugins: {
                labels: {
                    render: 'percentage',
                    showActualPercentages: true
                }
            }
        }
});

Here's a screenshot illustrating what I'm going for:

I am using Chart.js along with a Chart.js plugin, chart-labels. I am wanting to show the labels at the top of the bar chart, and in the label show the percentage of the x value in relation to the y value (e.g., 16 is 94% of 17), but the label values are always 100% (which it seems like it is calculating 16y by 16x = 100).

I haven't found a way to do this without the plugin, so I'm not sure if the plugin is the issue or not, or if the chart configuration is wrong.

Any advice/help is appreciated! Here is a JSBin with the code: https://jsbin./dawenetuya/edit?html,js,output

HTML and JS:

<div style="width: 100%;"><canvas id="myChart"></canvas></div>

var colors = '#cd1127';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
                labels: ["Asset Taxes", "Excluded Assets", "Personal Injury and Property Damage", "Offsite Disposal", "Royalties", "Litigation", "Employment", "Operating Expenses"],
                datasets: [{
                        data: [16, 14, 17, 13, 15, 12, 9, 11],
                        backgroundColor: '#cd1127',
                        borderColor: '#cd1127',
                        borderWidth: 1
                }]
        },
        options: {
            responsive: true,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        max: 18,
                        beginAtZero:true
                    }
                }]
            },
            plugins: {
                labels: {
                    render: 'percentage',
                    showActualPercentages: true
                }
            }
        }
});

Here's a screenshot illustrating what I'm going for:

• javascript
• chart.js
• percentage
• chart.js2

• The JSBin is not working, could you please correct it so that we see your current progress? – adelriosantiago Commented Feb 28, 2019 at 0:23
• I just checked the JSBin and it is working - I added an annotated screenshot to the main question to help illustrate what I'm going for. – Joyrex Commented Feb 28, 2019 at 16:38
• I checked JSBin again, and you're right - I hadn't saved the final changes to it. It's now fixed. Sorry! – Joyrex Commented Feb 28, 2019 at 20:50

2 Answers 2

You can create your own render function like this:

...

render: function (args) {  
  let max = 17; //This is the default 100% that will be used if no Max value is found
  try {
    //Try to get the actual 100% and overwrite the old max value
    max = Object.values(args.dataset.data).map((num) => {
      return +num; //Convert num to integer
    });
    max = Math.max.apply(null, max);
  } catch (e) {}
  return Math.round(args.value * 100 / max);
}

...

Here is the example code: https://jsbin./hihexutuyu/1/edit

You can actually erase the try/catch block and define only max value and it will work. It would look like this:

...

render: function (args) {  
  let max = 17; //Custom maximum value

  return Math.round(args.value * 100 / max);
}

...

The try/catch block is only to automatically get the maximum value from the dataset.

The plugin documentation, with all other possible settings that can be added to render is here: https://github./emn178/chartjs-plugin-labels.

I'm not sure I have a plete grasp of what you're trying to achieve, but you could use a callback function to generate the desired result along the yAxes, similar to this:

yAxes:[{
    ticks:{
        callback:function(value,index,values){
            return ((value / index) * 100)+'% ';
        }
    }
}]