jquery - Chart.js - Doughnut show tooltips always?

Question

When using the Chart.js library, I can add multiple doughnuts on my page without a problem.

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

But I cannot find a way to always show the tooltips - not only when hovering the mouse over the doughnut. Does anybody know if this is possible?

Answer 1

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

onAnitmationComplete calls the method to show the tooltips like a hover event does. Normally you define the events in tooltipevents to display the 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>

Example 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/