How to show the data labels without hovering the mouse on the bubbles

Question

I created a bubble chart using Chart.js, but the data label of each bubble will only be displayed when the mouse hovers over the bubble. How to show the data labels of all the bubbles by default (i.e., without hovering a mouse on top)?

new Chart(document.getElementById("stock-chart"), {
    type: 'bubble',
    data: {
      labels: "Africa",
      datasets: [
        {
          label: ["Stock 3, Stock 4"],
          backgroundColor: "rgba(255,221,50,0.2)",
          borderColor: "rgba(255,221,50,1)",
          data: [{
            x: 0.1,
            y: 5.245,
            r: 15
          }]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Chart title',
        fontSize: 28
      }, 
      scales: {
        yAxes: [{ 
          scaleLabel: {
            display: true,
            labelString: "Return",
            fontSize: 25
          },
          ticks: {
              fontSize: 20
          }
        }],
        xAxes: [{ 
          scaleLabel: {
            display: true,
            labelString: "Risk",
            fontSize: 25
          },
          ticks: {
            fontSize: 20
        }
        }]
      },

      tooltips: {
          callbacks: {
              label: function(tooltipItem, data) {
                  var label = data.datasets[tooltipItem.datasetIndex].label;
                  return label;
              }
          }
      }

    }
});

this might help https://stackoverflow.com/questions/42164818/chart-js-show-labels-on-pie-chart — Irfanullah Jan, Jul 04 '19 at 01:40

score 0 · Answer 1 · answered Jul 10 '19 at 20:31

This can be achieved by using the chartjs-plugin-datalabels(https://github.com/chartjs/chartjs-plugin-datalabels). Specifically, remove the tooltips section in plugins and add the following section:

        datalabels: {
            anchor: function(context) {
                return 'center';
            },
            align: function(context) {
                return 'center';
            },
            font: {
                weight: 'bold',
                size: '15'
            },
            formatter: function(value) {
                return value.label;
            },
            offset: 0,
            padding: 0
        }```

How to show the data labels without hovering the mouse on the bubbles

1 Answers1