Chartjs-Char.js – How to show labels by default in pie chart

by

2👍

✅

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

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

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

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

0👍

You add it in pieData ex:

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

Leave a comment