[Chartjs]-Customize different tooltips of bar chart

by

0👍

✅

You can combine the answers from How to modify chartjs tooltip to add customized attribute and How to make tool tip contents display on multiple lines

Script

function Label(short, long) {
  this.short = short;
  this.long = long
}
Label.prototype.toString = function() {
  return this.short;
}


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

var data = {
    labels: [ 
      new Label("J", "S JAN JAN JAN JAN JAN JAN JAN E"), 
      new Label("F", "S FEB E"), 
      new Label("M", "S MAR E"),
      new Label("A", "S APR APR APR APR APR APR APR E"),
      new Label("M", "S MAY E"),
      new Label("J", "S JUN E"),
      new Label("J", "S JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL E")
    ],
    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).Bar(data, {
        tooltipTemplate: "<%if (label){%><%=label.long%>: <%}%><%= value %>",
        customTooltips: function (tooltip) {
            var tooltipEl = $('#chartjs-tooltip');

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

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

            tooltipEl.css({
                opacity: 1,
                // the minimum amount is half the maximum width of the tooltip that we set in CSS ...
                // ... + the x scale padding so that it's not right at the edge
                left: Math.max(75 + 10, tooltip.chart.canvas.offsetLeft + tooltip.x) + 'px',
                top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
                fontFamily: tooltip.fontFamily,
                fontSize: tooltip.fontSize,
                fontStyle: tooltip.fontStyle,
            });
        }
    });

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%, -120%);
     transform: translate(-50%, -120%);
     max-width: 150px;
 }

HTML

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

Note that I’ve adjusted for the left side edge. If you don’t have enough space on the top or the right, you’ll need to do the same for those edges as well (maximum limit for tooltip.x and limit for tooltip.y)

Fiddle – http://jsfiddle.net/69vt0091/

Leave a comment