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

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

Answer 2

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/

Answer 3

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; ?>";
                }
        },
    },
},

Answer 4

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

Answer 5

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

Answer 6

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