Posted in Uncategorized

showing percent values on Pie Chart SOLVED

   February 24, 2021  4 Comments on showing percent values on Pie Chart SOLVED

Hello again, im drawing a pie chart,, and i want to show in the tooltip not the amount or the value but the percent of the pie.. i know that , theres a value called “total” but how can i show it in the tooltip tooltipTemplate, i can do the math like this #### * 100 / “total” and it should work but i dont know how to make the tooltip take it

Thanks.

Author: Fantashit

4 thoughts on “showing percent values on Pie Chart SOLVED”

  1. For Ionic, the tooltipTemplate can be modified in JavaScript as follows:

    .run( function( $ionicPlatform ) {
  $ionicPlatform.ready( function() {
    // ... set up code ...

    // Show percentages.
    Chart.defaults.global.tooltipTemplate =
      "<%%=label%%>: <%%= Math.round(circumference / 6.283 * 100) %%>%%"
    ;
  });
})

    This will avoid the issue of nesting double and single quotes.

  3. From @deframe‘s site (via archive.org):

    Everyone loves Chart.js, but as with any library it’s interface is always subject to change.

    One such change is in the handling of the tooltips that appear when you mouse over a datapoint in your chart. By default these tooltips display the data label, e.g. “Blue: ” followed by the data value, e.g. “50“. Simple stuff, and fortunately Chart.js provides a way of customizing these tooltips should you ever need something a little different. A quick Google search will produce plenty of guides on how to do so but many of them are outdated, using older template-based methods that no longer work in more recent versions of the library.

    To that end I’d like to present a simple example of how to customize the tooltips of a pie chart by having them display the percentage of each data point as well as its value. To keep things familiar I’ll base this around the example pie chart usage/data configuration provided in the Chart.js documentation.

    var chart = new Chart(ctx, {
	type: 'pie',
	data: {
		labels: [
			"Red",
			"Blue",
			"Yellow"
		],
		datasets: [
			{
				data: [300, 50, 100],
				backgroundColor: [
					"#FF6384",
					"#36A2EB",
					"#FFCE56"
				],
				hoverBackgroundColor: [
					"#FF6384",
					"#36A2EB",
					"#FFCE56"
				]
			}
		]
	},
	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 + ': ' + tooltipData + ' (' + tooltipPercentage + '%%)';
				}
			}
		}
	}
});

    The main thing to note here is the chart.options.tooltips.callbacks.label callback function. This is what ultimately determines the content of each tooltip via the return value.

    The first parameter of the callback – tooltipItem – is a structure representing the tooltip we are operating on, and we make use of two of its properties: datasetIndex and index. You might have noticed in the example that chart.data.datasets is an array, therefore datasetIndex represents the index of the dataset associated with the tooltip (in this case 0, since we only have one!). Subsequently the index property is simply the index of the associated data item within that dataset.

    The second callback parameter – data – contains nothing more that our chart.data configuration, i.e. the labels and datasets themselves.

    By making use of these two parameters we total up all of the chart data and use this total to calculate the percentage of each data point. This percentage is then used to form the tooltip content along with the label and original data. Job done!

  4. @DaveJarvis your solution work’s fine for me, but I have to do a parseFloat() in the add of total, because it take the item like a string. I leave the code below:

    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 += parseFloat(allData[i]);
                                }
                                var tooltipPercentage = Math.round((tooltipData / total) * 100);
                                return tooltipLabel + ': ' + tooltipData + ' (' + tooltipPercentage + '%%)';
                            }
                        }
                    }
                }

    Grettings.

Comments are closed.