Char.js - How To Show Labels By Default In Pie Chart

I want to show the labels by default when the page loads. But default chart.js will not show any labels until we do mouseover. I am writing code like below. var ctx = document.getE

Solution 1:

Actually it is quite easy, you only have to override 2 options properties :

// Draw the tooltips when the animation is completedonAnimationComplete: function() {
    this.showTooltip(this.segments);
},

// Block the mouse tooltip events so the tooltips// won't disapear on mouse eventstooltipEvents: []

First you force to draw the tooltips when animation is completed, and then you block the mouse events to override the default behaviour as you don't need it anymore (this behaviour is to show only the active tooltip and hide the others)

See my JSFiddle here

Solution 2:

You add it in pieData ex:

var pieData = [
                {
                    value : 30,
                    color : "#F38630",
                    label : 'Sleep',
                    labelColor : 'white',
                    labelFontSize : '16'
                },
            ...
        ];