javascript - Chart.js: changing tooltip template

Question

I need to change Chart.js tooltip template, so that only value part is displayed in bold. There is tooltipTemplate option, which should do exactly this. Default value of this option is:

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%"

I tried editing it like this:

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><strong><%= value %></strong>%"

But it displays strong tags on screen as part of text, instead of rendering bold text. I tried moving them around <% and %>, but it still doesn't work. Any ideas?

Answer 1

The template does not recognize HTML. You have to use the customTooltips option. Below is an example adapted (but not optimized) from https://github.com/nnnick/Chart.js/blob/master/samples/line-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);
 }

JS

var ctx = $("#myChart").get(0).getContext("2d");

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }]
};

var myLineChart = new Chart(ctx).Line(data, {
    customTooltips: function (tooltip) {
        var tooltipEl = $('#chartjs-tooltip');

        if (!tooltip) {
            tooltipEl.css({
                opacity: 0
            });
            return;
        }

        tooltipEl.removeClass('above below');
        tooltipEl.addClass(tooltip.yAlign);

        // split out the label and value and make your own tooltip here
        var parts = tooltip.text.split(":");
        var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
        tooltipEl.html(innerHtml);

        tooltipEl.css({
            opacity: 1,
            left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
            top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
            fontFamily: tooltip.fontFamily,
            fontSize: tooltip.fontSize,
            fontStyle: tooltip.fontStyle,
        });
    }
});

Fiddle - http://jsfiddle.net/6rxdo0c0/1/