[Chartjs]-Custom data in label on ChartJS pie chart

by

3👍

✅

I read a lot of issues from github ChartJs project and currently it’s not possible.
I don’t know if snippet below will be useful workaround, but here goes:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chart test</title>
    <style>
        * { padding: 0; margin: 0; }

        #chart-tooltip {
            position: fixed;
            z-index: 999;
            background: #000000;
            padding: 2px;
            display: none;
            overflow: hidden;
            color: white;
            font-size: 10px;
            font-family: sans-serif;
            /*width and height is set by javascript*/
        }

        #chart-tooltip p { text-align: center; }
    </style>
</head>
<body>

<canvas id="myChart" width="300" height="300"></canvas>
<!--custom tooltip container-->
<div id="chart-tooltip"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script>
var dataset = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red",
        country: "Brazil",
        company: "PETROBRAS"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green",
        country: "USA",
        company: "GOOGLE"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow",
        country: "Japan",
        company: "TOYOTA"
    }
];

var canvasEl        = $("#myChart");
var canvasContext   = canvasEl.get(0).getContext("2d");
var myDoughnutChart = new Chart(canvasContext).Doughnut(dataset, {
    showTooltips: false
});
canvasEl.on('mousemove',customTooltip);
// on mouse out just remove tooltip of DOM...
canvasEl.on('mouseout', function (event) {
    $("#chart-tooltip").css("display", "none");
});


/**
 * Custom tooltip to show when mousemove event is trigged
 *
 * @param {Object} event The mousemove event
 */
function customTooltip(event) {
    //globals, take care...
    var segmentData = myDoughnutChart.getSegmentsAtEvent(event),
            tooltipWidth  = 160.0,
            tooltipHeight = 90.0,
            tooltipContainer = $("#chart-tooltip");

    if (segmentData[0] == undefined) {
       return;
    }
    // CSS styles
    tooltipContainer.css({
        width: tooltipWidth,
        height: tooltipHeight,
        display: "block",
        /* Set tooltip position is up to you... */
        top:  (event.clientY + (tooltipHeight/3)) + "px",
        left: (event.clientX - tooltipWidth/2)    + "px"
    });

    segmentData = segmentData[0];
    var data = ( findEntryByLabelAndValue(segmentData.label, segmentData.value, dataset));
    // Tooltip data
    var htmlContent = [
        '<p><strong>Whatever</strong></p>',
        '<ul>',
        '<li> Label: ' + data.label + '</li>',
        '<li> Velue: ' + data.value + '</li>',
        '<li> Country: ' + data.country + '</li>',
        '<li> Company: ' + data.company + '</li>',
        '</ul>'
    ].join('');
    // render...
    tooltipContainer.html(htmlContent);
}

/**
 * As long as myChart.getSegmentsAtEvent() does not return all keys from dataset,
 *      we can search an specif dataset entry by "value" and "value" keys.
 *      In fact, you could provide an unique ID so it would be a lot easier
 *      to implement (findById(id, dataset)), because you could to search by ID,
 *      instead of label/value keys together
 *
 * @param {string} label The dataset["label"] value
 * @param {*} value      The dataset["value"] value
 * @param {Object} dataset The dataset to search in
 *
 * @returns {Object} Object or null (if not found data entry)
 */
function findEntryByLabelAndValue(label, value, dataset) {
    var key;
    for (key in dataset) {
        if (dataset[key].value == value && dataset[key].label == label) {
            return dataset[key];
        }
    }
    return null;
}
</script>
</body>
</html>

Leave a comment