Custom Tooltips On Line Chart Using Chart.js - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Custom Tooltips On Line Chart Using Chart.js

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  ww w . j av a 2 s  .  co  m*/
function TeamPlayerLabel(label, team1Label, team2Label) {
  this.label = label;
  this["Team 1"] = team1Label;
  this["Team 2"] = team2Label;
}
TeamPlayerLabel.prototype.toString = function () {
  return this.label;
}
var data = {
  labels: [
    new TeamPlayerLabel("Player 1", "John Red", "John Green"),
    new TeamPlayerLabel("Player 2", "Mark Red", "Mark Green"),
    new TeamPlayerLabel("Player 3", "Jane Red", "Jane Green"),
    new TeamPlayerLabel("Player 4", "Jill Red", "Jill Green"),
  ],
  datasets: [
    {
      label: "Team 1",
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "red",
      pointColor: "red",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "red",
      data: [65, 59, 80, 81]
    },
    {
      label: "Team 2",
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "green",
      pointColor: "green",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "green",
      data: [28, 48, 40, 19]
    }
  ]
};
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx).Line(data, {
  multiTooltipTemplate: function (self) {
    return self.label[self.datasetLabel] + ': ' + self.value;
  }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="600" height="300"></canvas>  
   </body>
</html>

Related Tutorials