Chartjs-Remove data text from Chart.js on hover

by

2đź‘Ť

âś…

Here’s the answer, I’ve posted the js from the codepen here, see the updated “options”, the “return tootipLabel” part at the bottom of the snippet to get just the X% result you’re looking for.

Credit to http://blog.cryst.co.uk/2016/06/03/adding-percentages-chart-js-pie-chart-tooltips/ for pointing me in the right direction on this one: 

var oilCanvas = document.getElementById("commitments-area");

Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips;



var oilData = {
    labels: [
        "People",
        "Aliens",
        "Dogs",
        "Whales"
    ],
    datasets: [
        {

            data: [40, 32, 13, 15],
            backgroundColor: [
                "#13284a",
                "#4b9cd3",
                "#3b7ca7",
                "#99cdec",
                "#84d1ff"
            ]
        }]
};

var chartOptions = {
    legend: {
      position: 'bottom'
    },

    animation: {
      animateRotate: true,
      animateScale: true
    },


};

var pieChart = new Chart(oilCanvas, {
  type: 'doughnut',
  data: oilData,
      options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var allData = data.datasets[tooltipItem.datasetIndex].data;
                    var tooltipLabel = data.labels[tooltipItem.index];
                    var tooltipData = allData[tooltipItem.index];
                    var total = 0;
                    for (var i in allData) {
                        total += allData[i];
                    }
                    var tooltipPercentage = Math.round((tooltipData / total) * 100);
                    return tooltipLabel + ': ' + ' ' + tooltipPercentage + '%';
                }
            }
        }
    }
});
.wrapper {
  height: 200px;
  width: 200px;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div class="wrapper">
<canvas id="commitments-area" width="200" height="200"></canvas>
</div>

Leave a comment