CODEWITHSUNDEEP
javascriptchart.js
Doug Smith
Doug Smith

Reputation: 580

Change the hover data value from to string

I have a bar chart with typical data being: data: [1, 3, 4, 2] When I hover over the data bar, I would like the values to display text, where a 1 corresponds to "start", 2 is "partial", etc. How can I accomplish this? There seem to be several similar questions and answers about tooltips but I haven't been able to implement this. My bar chart code is:

const options = {
      scales: {
        x: {
          grid: {
            display: false,
          }
        },
        y: {
          display: false
        },
      }
    };
    
var config = {
  type: 'bar',
  data: {
    labels: ['date 1','date 2','date 3','date 4'],
    datasets: [{
      data: [3, 2, 1, 3],
      label: chart 1,
      borderWidth: 1
    }]
  },
  options: options,
}
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, config);

And I tried adding the tooltips code:

const options = {
      scales: {
        x: {
          grid: {
            display: false,
          }
        },
        y: {
          display: false
        },
      },
      plugins: {
          tooltips: {
              callbacks: {
                title: function(tooltipItems, data) {
                  return 'test';
                },
                label: function(tooltipItem, data) {
                  return 'test 2';
                }
              }
          }
      },
    };

If I can get the test to show up on the tooltip, I think I can do the rest using something like:

myValue = '';
switch (data) {
    case 1:
        myValue = 'start';
        break;
    case 2:
        myValue = 'partial'
        break;
    ....
return myValue;

Upvotes: 1

Views: 273

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31351

In v3 the name of the tooltip config has changed from tooltips to tooltip:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (val) => {
            return val.label + ' test ' + val.parsed.y
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Upvotes: 2

Related Questions