Chartjs-Formatting Chart.js Chart

by

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>

Leave a comment