CODEWITHSUNDEEP
javascriptchart.js
Abdullah Al Mamun
Abdullah Al Mamun

Reputation: 392

Adding custom title in tooltips of chart.js

In chart.js I want to customize tooltips label with an string array. tried it in different ways but can't get my desired result. it is not replacing all the labels instead it shows all the array values in each data sets tooltips.I also tried for loop. here is the code pen link: without loop: https://codepen.io/tumulalmamun/pen/yvNaKY with loop: https://codepen.io/tumulalmamun/pen/oEXzaq

var tooltipsLabel = ['Dhaka','Rajshahi','NewYork','London']     

var chartList = [5,6,7,8];
            
           
       function chart(){
        var ctx = document.getElementById("myChart").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Red", "Blue","green","Yellow"],
                    datasets: [{
                        label: '# of Votes',
                        data: chartList,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                           'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                             'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    },
                  tooltips: {
                    mode: 'index',
                    intersect: true,
                  
                    callbacks: {

                        title: function (tooltipItem, data) {
                          for(var i = 0; i < data.labels.length; i++)
                            {
                                 return tooltipsLabel[i];    
                            }
                       
                          
                           
                        }
                    }
                }
                }
            });
             
       }
    
       chart();
  
   
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <div class="row">
            <div class="col-lg-4">
                    <canvas id="myChart" width="100" height="100"></canvas>
            </div>
            
            <div class="col-lg-4"><canvas id="pieChart" width="100" height="100"></canvas></div>
        </div>
        <script>
       
            
            </script>
    </body>
</html>

var tooltipsLabel = ['Dhaka','Rajshahi','NewYork','London']     

var chartList = [5,6,7,8];
            
           
       function chart(){
        var ctx = document.getElementById("myChart").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Red", "Blue","green","Yellow"],
                    datasets: [{
                        label: '# of Votes',
                        data: chartList,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                           'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                             'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    },
                  tooltips: {
                    mode: 'index',
                    intersect: true,
                  
                    callbacks: {

                        title: function (tooltipItem, data) {
                          
                          return tooltipsLabel;
                           
                        }
                    }
                }
                }
            });
             
       }
    
       chart();
  
   
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <div class="row">
            <div class="col-lg-4">
                    <canvas id="myChart" width="100" height="100"></canvas>
            </div>
            
            <div class="col-lg-4"><canvas id="pieChart" width="100" height="100"></canvas></div>
        </div>
        <script>
       
            
            </script>
    </body>
</html>

Upvotes: 3

Views: 8293

Answers (1)

beaver
beaver

Reputation: 17647

Use tooltipItem property index to reference the item in your tooltipsLabel array:

var tooltipsLabel = ['Dhaka', 'Rajshahi', 'NewYork', 'London']

var chartList = [5, 6, 7, 8];


function chart() {
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "green", "Yellow"],
      datasets: [{
        label: '# of Votes',
        data: chartList,
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      tooltips: {
        mode: 'index',
        intersect: true,
        callbacks: {
          title: function(tooltipItem, data) {
            console.log(tooltipItem);
            return tooltipsLabel[tooltipItem[0].index];
          }
        }
      }
    }
  });

}

chart();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-lg-4">
    <canvas id="myChart" width="100" height="100"></canvas>
  </div>
  <div class="col-lg-4"><canvas id="pieChart" width="100" height="100"></canvas></div>
</div>

Upvotes: 3

Related Questions