I am trying to show the values of the pie slices inside the pie chart with Chart.JS v2.3
I've tried various ones to see if I could get them to work
Chart.js v2: How to make tooltips always appear on pie chart?
When I try this, the tooltips are still hover over.
Tried this as well and this did not work.
options: {
events: false,
animation: {
duration: 0
},
onAnimationComplete: function () {
var self = this;
var elementsArray = [];
Chart.helpers.each(self.data.datasets, function (dataset, datasetIndex) {
Chart.helpers.each(dataset.metaData, function (element, index) {
var tooltip = new Chart.Tooltip({
_chart: self.chart,
_data: self.data,
_options: self.options,
_active: [element]
}, self);
tooltip.update();
tooltip.transition(Chart.helpers.easingEffects.linear).draw();
}, self);
}, self);
}
},
If I try one of the resolutions that use a plugin service it fails with the following error:
Uncaught TypeError: Cannot read property 'register' of undefined
Here is the full code I'm trying to work with:
var data = {
labels: ["People", "Process", "Technology"],
datasets: [
{
data: [10,20,30],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}
]
};
// render chart
Chart.pluginService.register({
beforeRender: function(chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function(dataset, i) {
chart.getDatasetMeta(i)
.data.forEach(function(sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options,
_active: [sector]
},
chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function(chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips,
function(tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
var ctx = document.getElementById("pieChart").getContext("2d");
var myPieChart = new Chart(ctx,
{
type: 'pie',
data: data,
options: {
showAllTooltips: true
}
});
I'm also trying to avoid having to use chartNEW.js
Also if it matters this is being done in Asp.Net with MVC.