javascript - 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: with loop:

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=".js/2.7.1/Chart.bundle.min.js"></script>
        <link href=".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) {
                          for(var i = 0; i < data.labels.length; i++)
                            {
                                 return tooltipsLabel[i];    
                            }
                       
                          
                           
                        }
                    }
                }
                }
            });
             
       }
    
       chart();

<html>
    <head>
        <script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn./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./ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn./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>

Share Improve this question edited Jan 31, 2018 at 12:51 asked Jan 31, 2018 at 12:44 Abdullah Al Mamun 3921 gold badge5 silver badges15 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

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./ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745501389a4630431.html

javascript - Adding custom title in tooltips of chart.js - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Adding custom title in tooltips of chart.js - Stack Overflow

1 Answer 1

相关推荐