[v2.9.4 -> v3.x.x] tooltip: callbacks: label - calculations from dataset in same stacks

[jonyrh]

Hello, friends!

In v2.9.4 make it, but in v3.x.x not.
In v3.x.x tooltipItems in function not array any more ((( Stack "print" not calculated in v3.x.x
I need help, please!

/* v2.9.4 */
var ctx = document.getElementById("printChart").getContext("2d");
var printChart = new Chart(ctx, {
	type: "bar",
	data: {
		labels: ["02.06.21", "03.06.21", "04.06.21", "05.06.21"],
		datasets: [{
			label: "BlackAndWhite",
			stack: "print",
			data: [107, 268, 2, 98],
			borderWidth: 0,
			hoverBorderWidth: 0,
			borderColor: "rgba(47, 146, 237, 1)",
			backgroundColor: "rgba(47, 146, 237, 1)",
			hoverBorderColor: "rgba(47, 146, 237, 1)",
			hoverBackgroundColor: "rgba(47, 146, 237, 1)"
		}, {
			label: "Color",
			stack: "print",
			data: [58, 156, 2, 77],
			borderWidth: 0,
			hoverBorderWidth: 0,
			borderColor: "rgba(255, 128, 128, 1)",
			backgroundColor: "rgba(255, 128, 128, 1)",
			hoverBorderColor: "rgba(255, 128, 128, 1)",
			hoverBackgroundColor: "rgba(255, 128, 128, 1)"
		}, {
			label: "Scans",
			stack: "scan",
			data: [213, 54, 2, 22],
			borderWidth: 0,
			hoverBorderWidth: 0,
			borderColor: "rgba(115, 170, 70, 1)",
			backgroundColor: "rgba(115, 170, 70, 1)",
			hoverBorderColor: "rgba(115, 170, 70, 1)",
			hoverBackgroundColor: "rgba(115, 170, 70, 1)"
		}]
	},
	options: {
		responsive: true,
		layout: {
			padding: {
				left: 0,
				right: 0,
				top: 0,
				bottom: 0
			}
		},
		title: {
			display: false
		},
		tooltips: {
			mode: "label",
			callbacks: {
				afterTitle: function(tooltipItem, data) {
					var total = 0;
					for(var i = 0; i < data.datasets.length; i++) {
						if(data.datasets[i].stack === "print") {
							total += data.datasets[i].data[tooltipItem[0].index];
						}
					}
					return "Print All: " + total.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, " ");
				},
				label: function(tooltipItem, data) {
					var type = data.datasets[tooltipItem.datasetIndex].label;
					var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
					var total = 0;
					for(var i = 0; i < data.datasets.length; i++) {
						if(data.datasets[i].stack === "print") {
							total += data.datasets[i].data[tooltipItem.index];
						}
					}
					let percentage = " (" + (value * 100 / total).toFixed(0) + "%)";
					if(data.datasets[tooltipItem.datasetIndex].stack !== "print") {
						percentage = "";
					}
					if(tooltipItem.datasetIndex !== data.datasets.length - 1) {
						return type + ": " + value.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, " ") + percentage;
					} else {
						return [type + ": " + value.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, " ") + percentage];
					}
				}
			}
		},
		maintainAspectRatio: false,
		scales: {
			xAxes: [{
				stacked: true,
				display: true,
				gridLines: {
					display: false
				}
			}],
			yAxes: [{
				stacked: true,
				display: true,
				gridLines: {
					display: true
				},
				ticks: {
					beginAtZero: true,
					callback: function(value, index, values) {
						return value.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, " ");
					}
				}
			}]
		}
	}
});

[kurkle]

All the changes needed should be listed in the migration guide: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

[jonyrh]

yes, I read this and tried to redo it, but context is no longer an array and it fails to do the calculation.

[v3.x.x]
               plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {           /* context -  NOT ARRAY ANY MORE, not have length  */
					var type = context.label;
					var value = context.raw;
					var total = 0;
					.....
				}
        }
      }
    }

[kurkle]

Looks like you are looking for the data array. Its accessible through context.dataset.data

Edit: And if you need all the datasets, they can be accessed at context.chart.data.dataset

[jonyrh]

Now it works! I used context.chart.data.datasetS as array
Thank you and with love from Russia! :)

var ctx = document.getElementById("printChart").getContext("2d");
var printChart = new Chart(ctx, {
	type: "bar",
	data: {
		labels: ["02.06.21", "03.06.21", "04.06.21", "05.06.21"],
		datasets: [{
			label: "ЧБ",
			stack: "print",
			data: [1000, 268, 2, 98],
			borderWidth: 0,
			hoverBorderWidth: 0,
			borderColor: "rgba(47, 146, 237, 1)",
			backgroundColor: "rgba(47, 146, 237, 1)",
			hoverBorderColor: "rgba(47, 146, 237, 1)",
			hoverBackgroundColor: "rgba(47, 146, 237, 1)"
		}, {
			label: "Цвет",
			stack: "print",
			data: [50, 156, 2, 77],
			borderWidth: 0,
			hoverBorderWidth: 0,
			borderColor: "rgba(255, 128, 128, 1)",
			backgroundColor: "rgba(255, 128, 128, 1)",
			hoverBorderColor: "rgba(255, 128, 128, 1)",
			hoverBackgroundColor: "rgba(255, 128, 128, 1)"
		}, {
			label: "АПД",
			stack: "adf",
			data: [213, 54, 2, 22],
			borderWidth: 0,
			hoverBorderWidth: 0,
			borderColor: "rgba(115, 170, 70, 1)",
			backgroundColor: "rgba(115, 170, 70, 1)",
			hoverBorderColor: "rgba(115, 170, 70, 1)",
			hoverBackgroundColor: "rgba(115, 170, 70, 1)"
		}]
	},
	options: {
		responsive: true,
		maintainAspectRatio: false,
		layout: {
			padding: {
				left: 0,
				right: 0,
				top: 0,
				bottom: 0
			}
		},
		scales: {
			x: {
				grid: {
					display: false
				}
			},
			y: {
				ticks: {
					beginAtZero: true
				}
			}
		},
		plugins: {
			tooltip: {
				callbacks: {
					afterTitle: function(tooltipItems) {
						var total = 0;
						var printstaсks = 0;
						for(var i = 0; i < tooltipItems.length; i++) {
							if(tooltipItems[i].dataset.stack === "print") {
								total += tooltipItems[i].raw;
								printstaсks += 1;
							}
						}
						if(printstaсks === 2) {
							return "Печать всего: " + total.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, " ");
						} else {
							return "";
						}
					},
					label: function(context) {
						var total = 0;
						var printstaсks = 0;
						var percentage = "";
						for(var i = 0; i < context.chart.data.datasets.length; i++) {
							if(context.chart.data.datasets[i].stack === "print") {
								total += context.chart.data.datasets[i].data[context.dataIndex];
								printstaсks += 1;
							}
						}
						if(printstaсks === 2 && context.chart.data.datasets[context.datasetIndex].stack === "print") {
							percentage = " (" + (context.chart.data.datasets[context.datasetIndex].data[context.dataIndex] * 100 / total).toFixed(0) + "%)";
						}
						return [" " + context.dataset.label + ": " + context.formattedValue + percentage];
					}
				}
			}
		}
	}
});