Chart JS custom tooltip option?

Question

I am trying to build chart using Chart.Js. This chart.js has default option for tooltip, I want to make customized tooltip option. Is there a way to make it possible?

<

Answer 1

may be this can help you

   Chart.types.Line.extend({
   name: "LineAlt",
   initialize: function (data) {
    Chart.types.Line.prototype.initialize.apply(this, arguments);
    var xLabels = this.scale.xLabels
    xLabels.forEach(function (label, i) {
        if (i % 2 == 1)
            xLabels[i] = label.substring(1, 4);
      })
   }
 });

var data = {
labels: ["1/jan/08", "15/fab/08", "1/mar/08", "1/apr/08", "10/apr/08", "10/may/2008", "1/jun/2008"],
datasets: [{
    label: "First dataset",
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(220,20,20,1)",
    pointColor: "rgba(220,20,20,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [65, 59, 80, 81, 56, 55, 90]
}, {
    label: "Third dataset",
    fillColor: "rgba(151,187,205,0.2)",
    strokeColor: "rgba(15,187,25,1)",
    pointColor: "rgba(15,187,25,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,1)",
    data: [38, 55, 50, 65, 35, 67, 54]
}]

};

var ctx = document.getElementById("myChart").getContext("2d");

var myChart = new Chart(ctx).LineAlt(data);


// Chart.js replaces the base inRange function for Line points with a          function that checks only the x coordinate
// we replace it with the original inRange fucntion (one that checks both x and y coordinates)

 myChart.datasets.forEach(function(dataset) {
  dataset.points.forEach(function(point) {
    point.inRange = Chart.Point.prototype.inRange;
  });
});

// Chart.js shows a multiTooltip based on the index if it detects that there are more than one datasets
// we override it to show a single tooltip for the inRange element

myChart.showTooltip = function(ChartElements, forceRedraw) {
  // this clears out the existing canvas - the actual Chart.js library code is a bit more optimized with checks for whether active points have changed, etc.
  this.draw();
  // draw tooltip for active elements (if there is one)
  Chart.helpers.each(ChartElements, function(Element) {
    var tooltipPosition = Element.tooltipPosition();
    new Chart.Tooltip({
      x: Math.round(tooltipPosition.x),
      y: Math.round(tooltipPosition.y),
      xPadding: this.options.tooltipXPadding,
      yPadding: this.options.tooltipYPadding,
      fillColor: this.options.tooltipFillColor,
      textColor: this.options.tooltipFontColor,
      fontFamily: this.options.tooltipFontFamily,
      fontStyle: this.options.tooltipFontStyle,
      fontSize: this.options.tooltipFontSize,
      caretHeight: this.options.tooltipCaretSize,
      cornerRadius: this.options.tooltipCornerRadius,
      text: Chart.helpers.template(this.options.tooltipTemplate, Element),
      chart: this.chart,
      custom: this.options.customTooltips
    }).draw();
  }, this);
};

http://jsfiddle.net/6cgo4opg/747/