Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to modify chartjs tooltip so i can add customized strings in tooltips

Tags:

How do i edit chartjs tooltip to add customized strings in tooltips

enter image description here

For Example: I want to change the Tooltip like "January: 28 Files" or just "28 Files"

like image 687
Sudharshan Avatar asked Sep 08 '14 10:09

Sudharshan


People also ask

How do I add a chart in tooltips?

To achieve this, we first add a table within the tooltip. The first column contains the categories ("women", "men"), and the second one contains the bars. In this second column, we then add HTML <div> tags and define the width of these boxes with our numerical columns.

How do I show tooltip?

Basic Tooltip HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .


1 Answers

Validated answer doesn't work anymore. For Chart.js V2,

Chart.defaults.global.tooltipTemplate

is deprecated.

Instead you can use callbacks to modify the displayed tooltips. There is a sample for the usage the possible callbacks in the documentation under Chart.defaults.global.tooltips.

In your case I would do the following:

window.myLine = new Chart(chart, {
    type: 'bar',
    data: barChartData,
    options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' : ' + tooltipItems.xLabel + " Files";
                    }
                }
            },
     }       
  });

Don't forget to set the HTML meta tag:

<meta charset="UTF-8">

This answer was copy from this question.

like image 192
Benjamin Lucidarme Avatar answered Sep 19 '22 15:09

Benjamin Lucidarme