Clever Geek Handbook

Char.js - How to show default labels in a pie chart

I want to show labels by default on page load. But the default chart.js will not show the labels until we hover over. I am writing the code as shown below.

var ctx = document.getElementById("chart-area").getContext("2d");
                    window.myPie = new Chart(ctx).Pie(pieData,{                        
                    animationSteps: 100,
                    animationEasing: 'easeInOutQuart',
                    scaleShowLabels : true                  
                    });

This is my data.

var pieData = [
                {
                    value: 100,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "New",
                },
                {
                    value: 220,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "In Progress"
                }];

What is the property of showing labels by default? I cannot find in the chart.js documentation

0


source to share


2 answers


It's actually quite simple, you only need to override 2 properties of the 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 the tooltips to be drawn when the animation is complete and then you block mouse events to override the default behavior as you no longer need it (this behavior should only show the active tooltip and hide others)

See the JSFiddle here

+2


source


You add it to pieData ex:



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


source






More articles:


All Articles