[Chartjs]-Donut chart JS/Jquery that allows HTML tags in its label?

by

2👍

✅

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>

Leave a comment