Customizing tooltips - Javascript Chart.js

Javascript examples for Chart.js:Chart Tooltip

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

Description

Customizing tooltips

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Bar Chart Custom Tooltip</title> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
      <style>

body{/*from   ww  w  .ja  v a  2 s.com*/
   background-color: #333;
}
#barChart{
   background-color: aliceblue;
   border-radius: 6px;
}


      </style> 
   </head> 
   <body translate="no"> 
      <!--
Ref :http://stackoverflow.com/questions/40333470/customizing-tooltip-on-chart-js-bar-chart/40334479#40334479
--> 
      <div class="container"> 
         <br> 
         <div class="row"> 
            <div class="col-md-1"></div> 
            <div class="col-md-10"> 
               <!--       Chart.js Canvas Tag --> 
               <canvas id="barChart"></canvas> 
            </div> 
            <div class="col-md-1"></div> 
         </div> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> 
      <script>
      var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
// Global Options:
 Chart.defaults.global.defaultFontColor = 'dodgerblue';
 Chart.defaults.global.defaultFontSize = 16;
// Data with datasets options
var data = {
    labels: ["Vanilla", "Chocolate", "Strawberry"],
      datasets: [
        {
            label: "Ice Cream Prices ",
            fill: true,
            backgroundColor: [
                'moccasin',
                'saddlebrown',
                'lightpink'],
            data: [11, 9, 4]
        }
    ]
};
var options = {
tooltips: {
        callbacks: {
            label: function(tooltipItem) {
                return "$" + Number(tooltipItem.yLabel) + " and so worth it !";
            }
        }
    },
        title: {
                  display: true,
                  text: 'Ice Cream Truck',
                  position: 'bottom'
              },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials