1

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.

Community
  • 1
  • 1
Tbooty
  • 269
  • 2
  • 14

0 Answers0