Chart.js - always show donut tips?

Question

When using the Chart.js library, I can add several donuts to my page without any problems.

http://www.chartjs.org/docs/#doughnut-pie-chart

But I can't find a way to always show tooltips - not just when you hover over a donut. Does anyone know if this is possible?

Answer 1

I had the same problem today and solved it quite simply by adding the onAnimationComplte and tooltipevents options.

onAnitmationComplete calls a method to display tooltips, as the hover event does. Usually you define events in tooltipevents to display tooltips, but we need to remove them and pass an empty array.

Note :( http://www.chartjs.org/docs/#doughnut-pie-chart ).

JavaScript:

var options = { tooltipTemplate: "<%= value %>", onAnimationComplete: function() { this.showTooltip(this.segments, true); //Show tooltips in bar chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/) //this.showTooltip(this.datasets[0].bars, true); //Show tooltips in line chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/) //this.showTooltip(this.datasets[0].points, true); }, tooltipEvents: [], showTooltips: true } var context = $('#chart').get(0).getContext('2d'); var chart = new Chart(context).Pie(data, options); 

HTML:

 <div id="chartContainer"> <canvas id="chart" width="200" height="200"></canvas> </div> 

Sample data:

 var data = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1" }, { value: 100, color: "#FDB45C", highlight: "#FFC870" } ] 

JSFiddle PIE: http://jsfiddle.net/5gyfykka/

JSFiddle BAR / LINE: http://jsfiddle.net/5gyfykka/14/

Answer 2

I extended the Kapi method, so when you hover over it, you can still use the default functionality, such as changing colors, and when you hover over a section, it will hide the rest. I think it looks better.

 var options = { onAnimationComplete: function () { this.showTooltip(this.segments, true); }, } var ctx = document.getElementById("Chart").getContext("2d"); var myPieChart = new Chart(ctx).Pie(data, options); $("#Chart").on('mouseleave', function (){ myPieChart.showTooltip(myPieChart.segments, true); }); 

Answer 3

You can do this by writing your own plugin that supports ChartJS version> 2.1.5.

Include the following code in the script:

 // Show tooltips always even the stats are zero 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.tooltips, _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; } } }); // Show tooltips always even the stats are zero 

And then just use the following line in the settings of any chart on which you want to show all the tooltips.

 showAllTooltips: true 

The working script is given below

 // Show tooltips always even the stats are zero 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.tooltips, _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; } } }); // Show tooltips always even the stats are zero var canvas = $('#myCanvas2').get(0).getContext('2d'); var doughnutChart = new Chart(canvas, { type: 'doughnut', data: { labels: [ "Success", "Failure" ], datasets: [{ data: [45, 9], backgroundColor: [ "#1ABC9C", "#566573" ], hoverBackgroundColor: [ "#148F77", "#273746" ] }] }, options: { // In options, just use the following line to show all the tooltips showAllTooltips: true } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <canvas id="myCanvas2" width="350" height="296"></canvas> </div> 

Working JSFIDDLE here.

Answer 4

If someone is trying to hide some segment tooltips; do it in tooltipTemplate:

 tooltipTemplate : "<% var percentage = Math.round(circumference / 6.283 * 100); if (percentage >8)%><%= percentage %>%"; 

for example, this code checks the value of% and displays only values ​​greater than 8% to reduce interference

Answer 5

If you want to display only one tooltip, you should use this code. Here is an example for the first segment.

 chart.showTooltip([chart.segments[0]], true); 

The showTooltip function accepts only 2-dimensional arrays for the first parameter.