[Chartjs]-Chartjs changing the tooltip to display the R axis only

1👍

You can configure a custom callback in the tooltip section of the options:

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1"></script>
<canvas id="myChart"></canvas>
<style>
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<script>
  var data = {
    datasets: [

      {
        label: ' company 1 ',
        data: [{
          x: 36,
          y: 192,
          r: 22.13
        }, ],
        backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
        borderColor: 'rgba( 255, 99, 132, 1  )',
      },
      {
        label: ' company 2 ',
        data: [{
          x: 31,
          y: 161,
          r: 14.69
        }, ],
        backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
        borderColor: 'rgba( 255, 99, 132, 1  )',
      },
      {
        label: ' company 3 ',
        data: [{
          x: 33,
          y: 106,
          r: 9.08
        }, ],
        backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
        borderColor: 'rgba( 255, 99, 132, 1  )',
      },
      {
        label: ' company 4 ',
        data: [{
          x: 34,
          y: 97,
          r: 3.62
        }, ],
        backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
        borderColor: 'rgba( 255, 99, 132, 1  )',
      },
      {
        label: ' company 5 ',
        data: [{
          x: 27,
          y: 91,
          r: 9.67
        }, ],
        backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
        borderColor: 'rgba( 255, 99, 132, 1  )',
      }

    ]
  };

  // Chart options
  var options = {
    scales: {
      x: {
        min: 0,
        max: 50,
        title: {
          display: true,
          text: 'market growth'
        }
      },
      y: {
        min: 0,
        max: 210,
        title: {
          display: true,
          text: 'Sales'
        }
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: (ttItem) => `${ttItem.dataset.label} (${ttItem.raw.r}) Million`
        }
      },
      legend: {
        display: false
      }
    }
  };

  // Create the chart
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bubble',
    data: data,
    options: options
  });
</script>

Leave a comment