Formatting Chart.js Chart

Question

Good day - I have a chart that I am displaying on my page, and it displays perfect, I just need to make two small customizations to it, and for the life of me, whenever I make a syntax change the chart no longer displays. I am wanting to

1) Remove the Percentages from the right side
2) On the line chart have the "hover value" display as a number NOT a percent

This is the syntax I currently have - how should it be edited in order to accommodate those changes?

    <script>
var labelsarr = ["Jan 15", "Feb 15", "Mar 15", "Apr 15", "May 15", "Jun 15", "Jul 15", "Aug 15", "Sep 15", "Oct 15", "Nov 15", "Dec 15"];
var ctx = document.getElementById('canvasOfTestPortion').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelsarr,
        datasets: [{
                type: 'line',
                fill: false,
                label: 'Metric 1',
                backgroundColor: 'rgba(255,0,0,1)',
                borderColor: 'rgba(255,0,0,1)',
                data: val1,
                yAxisID: 'y-axis-1'
            }, {
                label: 'Metric 2,
                backgroundColor: 'rgba(0, 129, 214, 0.8)',
                data: val2
            }]
    },
    options: {
        tooltips: {
            callbacks: {
                label: function (t, d) {
                    if (t.datasetIndex === 0) {
                        var xLabel = d.datasets[t.datasetIndex].label;
                        var yLabel = t.yLabel;
                        return xLabel + ': ' + yLabel + '%';
                    } else {
                        var xLabel = d.datasets[t.datasetIndex].label;
                        var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                        return xLabel + ': ' + yLabel;
                    }
                }
            }
        },
        legend: {
            display: false,
            position: 'top',
        },
        scales: {
            yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        callback: function (value, index, values) {
                            if (parseInt(value) >= 1000) {
                                return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                                return '$' + value;
                            }
                        }
                    }
                }, {
                    id: 'y-axis-1',
                    position: 'right',
                    ticks: {
                        beginAtZero: true,
                        callback: function (value, index, values) {
                            return value + '%';
                        }
                    }
                }]
        }
    }
});
</script>

Answer 1

Remove the Percentages from the right side

remove yAxisID: 'y-axis-1' from your first dataset, along with second object from yAxes array ..

{
   id: 'y-axis-1',
   position: 'right',
   ticks: {
      beginAtZero: true,
      callback: function(value, index, values) {
         return value + '%';
      }
   }
}

On the line chart have the "hover value" display as a number NOT a percent

replace this line of code (in tooltips label callback) :

return xLabel + ': ' + yLabel + '%';

with the following :

return xLabel + ': ' + yLabel;

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

var labelsarr = ["Jan 15", "Feb 15", "Mar 15", "Apr 15", "May 15", "Jun 15", "Jul 15", "Aug 15", "Sep 15", "Oct 15", "Nov 15", "Dec 15"];
var ctx = document.getElementById('canvasOfTestPortion').getContext('2d');
var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Jan', 'Feb', 'Mar'], //labelsarr,
      datasets: [{
         type: 'line',
         fill: false,
         label: 'Metric 1',
         backgroundColor: 'rgba(255,0,0,1)',
         borderColor: 'rgba(255,0,0,1)',
         data: [3, 2, 4], //val1
      }, {
         label: 'Metric 2',
         backgroundColor: 'rgba(0, 129, 214, 0.8)',
         data: [50, 30, 40], //val2
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(t, d) {
               if (t.datasetIndex === 0) {
                  var xLabel = d.datasets[t.datasetIndex].label;
                  var yLabel = t.yLabel;
                  return xLabel + ': ' + yLabel;
               } else {
                  var xLabel = d.datasets[t.datasetIndex].label;
                  var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                  return xLabel + ': ' + yLabel;
               }
            }
         }
      },
      legend: {
         display: false,
         position: 'top',
      },
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               callback: function(value, index, values) {
                  if (parseInt(value) >= 1000) {
                     return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  } else {
                     return '$' + value;
                  }
               }
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="canvasOfTestPortion"></canvas>