[Chartjs]-How to change default label of each bubble in bubble chart using chartjs-plugin-datalabels

by

3👍

✅

You can use the formatter function in the datalabels plugin to achieve this:

Chart.register(ChartDataLabels)

const options = {
  type: 'bubble',
  data: {
    datasets: [{
        label: 'Orange',
        data: [{
          x: 1,
          y: 4,
          r: 26,
          fruit: 'orange'
        }],
        backgroundColor: 'orange'
      },
      {
        label: 'Apple',
        data: [{
          x: 4,
          y: 2,
          r: 26,
          fruit: 'apple'
        }],
        backgroundColor: 'red'
      },
      {
        label: 'Grape',
        data: [{
          x: 6,
          y: 1,
          r: 26
        }],
        backgroundColor: 'purple'
      }
    ]
  },
  options: {
    plugins: {
      datalabels: {
        color: 'white',
        formatter: (dp, ctx, b) => (ctx.dataset.label)
      }
    }
  }
}

const 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.7.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2 "></script>
</body>

Leave a comment