The Wolf The Wolf - 3 months ago 36
HTML Question

donut chart JS/Jquery that allows HTML tags in its label?

I want a donut chart, but the problem is I can't find which JS/Jquery library out there can give me the result that I want.

I tried ChartJS but apparently, it does not allow HTML tags nor at least line breaks in the label. And even if I managed to add, it seems the label is also responsible for Chart.js chart legend, so if I append too much string in the label the legend will be "broken". I just want to show more information in the label.

Not parsing the HTML tags:
enter image description here

var config1 = {
type: 'doughnut',
data : {
labels: [
"Pass<br/>" +
"Move Test: 1<br/>" +
"Increment Test: 2<br/>" +
"Rewrite Test: 19",
"Fail",
],
datasets: [
{
data: data: [22, 4],
backgroundColor: [
"#1AFF00",
"#FF0A0A",
],
hoverBackgroundColor: [
"#20FF08",
"#FF0000",
]
}]
},
options : {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'All entries that Passed vs Fail from different tests'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};


Do you guys know any other library I can use for that? Or if there's a trick I can do on Chart.js?

Thank you!

Answer

You can separate labels from legends by providing a label callback (in options), and you can make a tooltip label multi-line by passing an array of strings (as per documentation).

var ctx = document.getElementById("canvas");
var data = {
    type: 'doughnut',
    data: {
        labels: [
            "Pass",
            "Fail",
        ],
        datasets: [
            {
                data: [22, 4],
                backgroundColor: [
                    "#1AFF00",
                    "#FF0A0A",
                ],
                hoverBackgroundColor: [
                    "#20FF08",
                    "#FF0000",
                ]
            }]
    },
    options : {
            responsive: true,
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'All entries that Passed vs Fail from different tests'
            },
            animation: {
                animateScale: true,
                animateRotate: true
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItems, data) {
                        if(data.labels[tooltipItems.index] == 'Pass') {
                            return ['Pass','Move Test: 1','Increment Test: 2','Rewrite Test: 19'];
                        }
                        return data.labels[tooltipItems.index];
                    }
                }
            }
    }
};

var theChart = new Chart(ctx, data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="canvas" height="150"></canvas>