score:1

Accepted answer

you use the customtooltips option. here is an example adapted from https://github.com/nnnick/chart.js/blob/master/samples/pie-customtooltips.html

html

<canvas id="mychart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>

css

#chartjs-tooltip {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, .7);
    color: white;
    padding: 3px;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    pointer-events: none;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
#chartjs-tooltip.above {
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
}
#chartjs-tooltip.above:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0, 0, 0, .8) transparent;
    border-width: 8px 8px 0 8px;
    bottom: 1em;
    content:"";
    display: block;
    left: 50%;
    top: 100%;
    position: absolute;
    z-index: 99;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

js

var ctx = $("#mychart").get(0).getcontext("2d");

var data = [{
    value: 300,
    color: "#f7464a",
    highlight: "#ff5a5e",
    label: "red",
    otherdata: "<div>horror: 10%</div><div>romance: 30%</div><div>rest: 70%</div>"
}, {
    value: 50,
    color: "#46bfbd",
    highlight: "#5ad3d1",
    label: "green",
    otherdata: "<div>horror: 25%</div><div>romance: 25%</div><div>rest: 50%</div>"
}, {
    value: 100,
    color: "#fdb45c",
    highlight: "#ffc870",
    label: "yellow",
    otherdata: "<div>horror: 1%</div><div>romance: 3%</div><div>rest: 96%</div>"
}]


var tot = 0;
data.foreach(function (item) {
    tot += item.value;
})
tot *= 0.01;

var mypiechart = new chart(ctx).pie(data, {
    tooltiptemplate: "<%=label%>",
    customtooltips: function (tooltip) {
        // tooltip element
        var tooltipel = $('#chartjs-tooltip');

        // hide if no tooltip
        if (!tooltip) {
            tooltipel.css({
                opacity: 0
            });
            return;
        }

        // set caret position
        tooltipel.removeclass('above below');
        tooltipel.addclass(tooltip.yalign);

        // set text
        data.foreach(function(item) {
            if (item.label == tooltip.text)
                tooltipel.html(item.otherdata);
        })

        // find y location on page
        var top = tooltip.y - tooltip.caretheight - tooltip.caretpadding;

        // display, position, and set styles for font
        tooltipel.css({
            opacity: 1,
            left: tooltip.chart.canvas.offsetleft + tooltip.x + 'px',
            top: tooltip.chart.canvas.offsettop + top + 'px',
            fontfamily: tooltip.fontfamily,
            fontsize: tooltip.fontsize,
            fontstyle: tooltip.fontstyle,
        });
    }
});

fiddle - http://jsfiddle.net/u463hctb/1/


Related Query

More Query from same tag