chart.js : Label inside doughnut chart Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of chart.js : Label inside doughnut chart without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I’m trying to show the chart’s information on doughnut chart in % using Chart.js. In this chart it will always contain two parts on each section I need to show the % values. Here is my code

       var ctx = document.getElementById("databaseAdded").getContext("2d"),
           myChart = new Chart(ctx, {
                 type: 'doughnut',
                 data: {
                datasets: [{
                data: [$scope.graphData.databaseAdded.syspercent, 
                $scope.graphData.databaseAdded.apppercent],
                backgroundColor: [
                     '#d0b000',
                     '#bb112e'
                ],
                borderColor: [
                     '#d0b000',
                     '#bb112e'
                ],
                borderWidth: 1
                }]
            },
               options: {
                   showDatasetLabels : true,
                   cutoutPercentage: 41,
                   legend: {
                            display: true, 
                            position:'bottom',
                            labels: {
                              fontFamily: "myriadpro-regular",
                              boxWidth: 15,
                              boxHeight: 2,
                            },
                        } 
                    }
                });

One more thing is Legend information is different and label information is different. Legend I can able to get, But I’m facing problem on getting Label Info. Below I upload image that how labels will look like. Please take a look. click for Image

Thanks for everything!

Answer

You can use the library “Chart PieceLabel“.

After you add the script, you probably should add another option: “pieceLabel”.

Define how you like.

pieceLabel: {
// mode 'label', 'value' or 'percentage', default is 'percentage'
mode: (!mode) ? 'value' : mode,


// precision for percentage, default is 0
precision: 0,

// font size, default is defaultFontSize
fontSize: 18,

// font color, default is '#fff'
fontColor: '#fff',

// font style, default is defaultFontStyle
fontStyle: 'bold',

// font family, default is defaultFontFamily
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"

}
We are here to answer your question about chart.js : Label inside doughnut chart - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji