Remove data text from Chart.js on hover

Question

I'm using Chart.js for a Doughnut chart. On hover in a Doughnut section I'm trying to display 'People 40%' however it displays the data in the 'datasets' object showing 'People 40%: 40'. If you hover the navy part of the Doughnut you will see the data display. I've tried javascript split and splice on the data array but couldn't get it to remove the : 40 . My question is how do I display: 'People 40%' instead of 'People 40%: 40', and so on for each label?

https://codepen.io/zepzia/pen/WdrWww

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


.wrapper {
  height: 200px;
  width: 200px;
  margin: 0 auto;
}


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 (40%)",
        "Aliens (32%)",
        "Dogs (13%)",
        "Whales (15%)"
    ],
    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: chartOptions
});

Great post here, and I replaced your "options" with the one in the blog post and got pretty close, Showed "People 15 (15%)". blog.cryst.co.uk/2016/06/03/…. And my edited codepen here, I removed "tooltipData" from the end of options where it prints the result to the tooltip: codepen.io/anon/pen/WdZWZr?editors=0010 — Nathaniel Flick
@NathanielFlick THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! — Tripp
Awesome I'll add the updated codepen js as the answer to your question. :) — Nathaniel Flick

Nathaniel Flick Nathaniel Flick · Accepted Answer · 2018-01-09T05:29:32

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>

Remove data text from Chart.js on hover

1 Answers