[Chartjs]-Nnnick chart.js – Custom Tooltip on Line Chart

by

4👍

✅

So you can achieve this using the custom tool tip function in the newer (not sure when it was included) version of chart js. You can have it display anything you want in place of a normal tooltip so in this case i have added a tooltip and a tooltip-overview.

The really annoying thing is though in this function you are not told which index you are currently showing a tooltip for. Two ways to solve this, override the showToolTip function so it actually passes this information or do a quick little hack to extract the label from the tooltip text and get the index from the labels array (hacky but quicker so i went for this one in the example)

So here is a quick example based upon the samples in chartjs samples folder. This is just a quick example so you would prob need to play around with the positioning and stuff until its what you need.

Chart.defaults.global.pointHitDetectionRadius = 1;
Chart.defaults.global.customTooltips = function(tooltip) {
    // Tooltip Element
  var tooltipEl = $('#chartjs-tooltip');
  var tooltipOverviewEl = $('#chartjs-tooltip-overview');
  // Hide if no tooltip
  if (!tooltip) {
    tooltipEl.css({
      opacity: 0
    });
    tooltipOverviewEl.css({
      opacity: 0
    });
    return;
  }

  //really annoyingly we don;t get told which index this comes from so going to have
  //to extract the label from the text :( and then find the index based on that
  //other option here is to override the the whole showTooltip in chartjs and have the index passed
  var label = tooltip.text.substr(0, tooltip.text.indexOf(':'));
  var labelIndex = labels.indexOf(label);
  var maleEnrolmentNumber = maleEnrolments[labelIndex];
  var femaleEnrolmentNumber = FemaleEnrolments[labelIndex];
  // Set caret Position
  tooltipEl.removeClass('above below');
  tooltipEl.addClass(tooltip.yAlign);
  // Set Text
  tooltipEl.html(tooltip.text);
  //quick an ddirty could use an actualy template here
  var tooltipOverviewElHtml = "<div> Overall : " + (maleEnrolmentNumber + femaleEnrolmentNumber) + "</div>";
  tooltipOverviewElHtml += "<div> Male : " + (maleEnrolmentNumber) + "</div>";
  tooltipOverviewElHtml += "<div> Female : " + (femaleEnrolmentNumber) + "</div>";

  tooltipOverviewEl.html(tooltipOverviewElHtml);
  // Find Y Location on page
  var top;
  if (tooltip.yAlign == 'above') {
    top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
  } else {
    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,
  });

  tooltipOverviewEl.css({
    opacity: 1,
    fontFamily: tooltip.fontFamily,
    fontSize: tooltip.fontSize,
    fontStyle: tooltip.fontStyle,
  });
};
var maleEnrolments = [5, 20, 15, 20, 20, 30, 50]; // Integer array for male each value is corresponding to each month

var FemaleEnrolments = [5, 0, 15, 20, 30, 30, 20]; // Integer array for Female each value is corresponding to each month

var labels = ["Jan", "February", "March", "April", "May", "June", "July"]; //Enrollment by Month
var lineChartData = {
  labels: labels,
  datasets: [{
    label: "Student Details",
    fillColor: "rgba(151,187,205,0.2)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,1)",
    data: [10, 20, 30, 40, 50, 60, 70], //enrollement Details overall (Male + Female)
  }]
};
var ctx2 = document.getElementById("chart2").getContext("2d");
window.myLine = new Chart(ctx2).Line(lineChartData, {
  responsive: true
});
 #canvas-holder1 {
     width: 300px;
     margin: 20px auto;
 }
 #canvas-holder2 {
     width: 50%;
     margin: 20px 25%;
    position:relative;
 }
 #chartjs-tooltip-overview {
     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);
     left:200px;
     top:0px
 }
 #chartjs-tooltip {
     opacity: 1;
     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-key {
     display:inline-block;
     width:10px;
     height:10px;
 }
<script src="https://raw.githack.com/nnnick/Chart.js/master/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas-holder2">
  <div id="chartjs-tooltip-overview"></div>
  <div id="chartjs-tooltip"></div>
  <canvas id="chart2" width="600" height="600" />
</div>

Leave a comment