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

Question

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.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 to show the labels by default? I am not able to find under the documentation of chart.js

Try this http://stackoverflow.com/questions/25661197/chart-js-doughnut-show-tooltips-always/25913101#25913101 — potatopeelings, Aug 03 '15 at 12:21

score 2 · Accepted Answer · answered Aug 03 '15 at 12:58

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

score 0 · Answer 2 · answered Aug 03 '15 at 09:19

0

You add it in pieData ex:

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

answered Aug 03 '15 at 09:19

Margus

19,694
14
55
103

I already had data. Without data nothing will visible right!! for more clarity i have added data also. please check the edited question – Mihir Aug 03 '15 at 09:50
http://jsfiddle.net/vrwjfg9z/ – Margus Aug 03 '15 at 11:40

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

2 Answers2

Linked