legands label with inside chart about chartjs-plugin-doughnutlabel HOT 4 CLOSED

thank you for the help actually after integrate the api I create the html and center it inside the legand with taking datasets backgroundColor

    var htmlArea = "";
    var i = 0;
    for (var area in cancelledAreas) {
        
        htmlArea += '<p>'+ '<b>' + cancelledAreas[area]+ '</b>'+ ' ' +' '+'<span style="color:'+whereCanceledData.datasets[0].backgroundColor[i]+'">'+ area +'</span>'+'</p>'; 
        i++;
    }
    document.getElementById('js-legend').innerHTML = htmlArea;

Thanks

from chartjs-plugin-doughnutlabel.

This plugin does not work with pie charts. So, first you have to set type: 'doughnut'

Then add the following object to the plugins object:

doughnutlabel: {
    labels: [
        {
            text: '50% Dubai',
            font: {
                size: '14'
            },
            color: "#F38C83"
        },
        {
            text: '36% Abu Dhabi',
            font: {
                size: '14'
            },
            color: "#E173C2"
        },
        {
            text: '14% Fujairah',
            font: {
                size: '14'
            },
            color: "#A176E8"
        }
    ]
}

from chartjs-plugin-doughnutlabel.

Hi @rehamwael ,
This also doesn't currently allow for different text fonts on the same line of text, it just allows you to configure one font (size, color) for one line.
I'm thinking maybe to allow for an array of lines, each line consisting of an array of labels (each with its own font configuration). What do you think, would that help?

from chartjs-plugin-doughnutlabel.

@rehamwael Could you provide a jsfiddle how to exactly use this? I am not sure how you put the pieces together. Thanks!

from chartjs-plugin-doughnutlabel.