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?

Here is my code

 var chart = null;
barChart: function (data1, data2, data3, label) {

    var data = {
        labels: label,
        datasets: [
        {
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: data1
        },
         {
             fillColor: "rgba(151,187,205,0.5)",
             strokeColor: "rgba(151,187,205,0.8)",
             highlightFill: "rgba(151,187,205,0.75)",
             highlightStroke: "rgba(151,187,205,1)",
             data: data2
         },
          {
              fillColor: "rgba(0,255,0,0.3)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(0,255,0,0.3)",
              data: data3
          },
        ]
    }
    var cht = document.getElementById('exampleCanvas');
    var ctx = cht.getContext('2d');
    if (chart)
        chart.destroy();
    chart = new Chart(ctx).Bar(data);
}

score 15 · Answer 1 · answered Aug 16 '14 at 09:39

Try this:

You can make changes globally using this code:

Chart.defaults.global = {

    // Boolean - Determines whether to draw tooltips on the canvas or not
    showTooltips: true,

    // Array - Array of string names to attach tooltip events
    tooltipEvents: ["mousemove", "touchstart", "touchmove"],

    // String - Tooltip background colour
    tooltipFillColor: "rgba(0,0,0,0.8)",

    // String - Tooltip label font declaration for the scale label
    tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

    // Number - Tooltip label font size in pixels
    tooltipFontSize: 14,

    // String - Tooltip font weight style
    tooltipFontStyle: "normal",

    // String - Tooltip label font colour
    tooltipFontColor: "#fff",

    // String - Tooltip title font declaration for the scale label
    tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

    // Number - Tooltip title font size in pixels
    tooltipTitleFontSize: 14,

    // String - Tooltip title font weight style
    tooltipTitleFontStyle: "bold",

    // String - Tooltip title font colour
    tooltipTitleFontColor: "#fff",

    // Number - pixel width of padding around tooltip text
    tooltipYPadding: 6,

    // Number - pixel width of padding around tooltip text
    tooltipXPadding: 6,

    // Number - Size of the caret on the tooltip
    tooltipCaretSize: 8,

    // Number - Pixel radius of the tooltip border
    tooltipCornerRadius: 6,

    // Number - Pixel offset from point x to tooltip edge
    tooltipXOffset: 10,

    // String - Template string for single tooltips
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

    // String - Template string for single tooltips
    multiTooltipTemplate: "<%= value %>",

    // Function - Will fire on animation progression.
    onAnimationProgress: function(){},

    // Function - Will fire on animation completion.
    onAnimationComplete: function(){}
}

Use this Link for reference

Mr Jake i have read this, i got confusion here, where can i write custom tooltip function?. this is for default option, i understood. — Kanagaraj Vadivel, Aug 16 '14 at 11:39
I have same issue if anybody found out how to customize tooltip text for each data point? — Tejas Patel, Sep 16 '14 at 04:00

score 6 · Answer 2 · answered Nov 19 '15 at 20:40

The new version of chart.js, version 2, is found here:

https://github.com/nnnick/Chart.js/releases

Version 2 adds tooltip callbacks:

Every tooltip callback (beforeTitle, title, afterTitle, etc..) accepts a string or an array. If an array is used, it will produce multiple lines. Tooltips now come with a lot more options for visual customization as well.

However, there is a fork of chart.js called chartNew.js, found here:

https://github.com/FVANCOP/ChartNew.js/

It adds several great enhancements to the venerable chart.js, including:

tooltip functions (when download/unzip, look in the Samples folder and look at annotateFunction.html. When hover over any point, you can do anything.)
passing an array of colors to a bar chart (instead of each bar in series having the same color)
putting text on the chart wherever you want it

many etceteras.

Note that chart.js has been greatly enhanced in version 2, but the new version is not fully backwards compatible (just changing to the v2 plugin broke my existing code) whereas chartNew.js will work with old code whilst extending capabilities.

score 6 · Answer 3 · edited May 23 '17 at 11:54

I have used this, i've found it on stackoverflow, but i try hardly to find it again

<div id="chartjs-tooltip"></div>

var chartoptions =
{
    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
        } );
    }
}

Link to where i got it: Chart.js: changing tooltip template

I have given an updated version of your answer using bootstrap4 and jquery here https://stackoverflow.com/a/54301153/5330805 — olidem, Jan 22 '19 at 04:13

score 4 · Answer 4 · edited Jul 17 '20 at 08:25

It is very simple when you know where to put the option.

The answer is to add the custom option when you create the chart :

chart = new Chart(ctx).Bar(data, {"options goes here"} );

After you pass the data variable with the data info you can add custom options, so for example you want to change the size of the Title of the tooltip and you also want to put a light grey color in the title of the tooltip you would do something like that:

    chart = new Chart(ctx).Bar(data, { 
     
      //Option for title font size in pixels
      tooltipTitleFontSize: 14, 
     
      //Option for tooltip title color
      tooltipTitleFontColor: "#eee"
    });

Another way you can do is to create the set of options as a variable for organisation purposes and to be able to reuse it.

 // Create a set of relevant options for you chart  
            
 var myoptions = { 
   scaleShowGridLines : false,     
   responsive : true, 
   scaleFontSize: 12,
   pointDotRadius : 4,
   scaleFontStyle: 14,
   scaleLabel: "<%= ' ' + value%> %",
 }  

//Create the Chart
 
chart = new Chart(ctx).Bar(data, myoptions);

I hope it is clear now

Regards

2

Can we write html in tooltip? – vini May 30 '16 at 12:51

score 4 · Answer 5 · edited Aug 29 '16 at 11:10

You can check for tooltip css - http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

tooltips: 
{

    bodyFontColor: "#000000", //#000000
    bodyFontSize: 50,
    bodyFontStyle: "bold",
    bodyFontColor: '#FFFFFF',
    bodyFontFamily: "'Helvetica', 'Arial', sans-serif",
    footerFontSize: 50,
    callbacks: {
        label: function(tooltipItem, data) {
                var value = data.datasets[0].data[tooltipItem.index];
              if(tooltipItem.index == 0) {
                return "<?php echo $data1;?>";
                }
            else if(tooltipItem.index == 1) {
                return "<?php echo $data2;?>";
            }
            else if(tooltipItem.index == 2) {
                return "<?php echo $data3;?>";
            }
            else {
                return "<?php echo $data4; ?>";
                }
        },
    },
},

score 0 · Answer 6 · answered May 05 '15 at 15:23

I found this page to be helpful:

https://github.com/nnnick/Chart.js/blob/master/samples/pie-customTooltips.html

He shows where and how to define the function for your custom tooltip, as well as an example of the styling. I had to modify the code to match my needs, but this is a great example on how to implement the custom tooltip feature.

Some things to note that threw me off at first:

1) The id in the style rules need to be modified to match your tooltip div. (this is obvious, but I didn't catch it at first)

2) tooltip.text will follow the format you set for 'tooltipTemplate' in your options, or the default tooltipTemplate set in chart.js

@kmgkumar it WAS posted 4 years ago – jay Jun 09 '19 at 05:41 — jay, Jun 09 '19 at 05:41

akash tripathi · Answer 7 · 2016-09-06T11:07:14.017

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/

Chart JS custom tooltip option?

7 Answers7

Linked