A JS / Jquery diagram that allows HTML tags in its label?

Question

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

I tried ChartJS , but apparently it does not allow HTML tags or at least line breaks in the label. And even if I managed to add, it seems that the label is also responsible for the legend of the Chart.js chart, so if I add too many lines on the label, the legend will be “broken”. I just want to show additional information in a shortcut.

Do not parse HTML tags:

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 know any other library that I can use for this? Or if there is a trick I can do on Chart.js?

Thank!

Answer 1

, ( ), , ( ).

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>

Hide result