Can individual bubbles in a chartjs bubble chart have labels?

Question

I'm creating a bubble chart using chartjs. I am able to create tooltips that describe each of the bubbles, but users of my chart may not be able to hover over it to see the tooltip. The BubbleData object format doesn't include a label element (I put one in anyway - no luck), I've tried the "labels" element for the Chart Data object (even though the docs say this is for Category labels - you never know!), and everything I can think of to put label on the bubble.

Is there a tooltip configuration that makes all the tooltips visible at all times? This would work for me as well.

Thanks;

Glenn

hi looks like somebody has already got this working for a pie chart: stackoverflow.com/questions/31241610/… — Craig Harley
you will need to have a labels array in your data object too — Craig Harley

vassilis ntovantzis vassilis ntovantzis · Accepted Answer · 2017-08-30T14:01:40

I was looking for the same thing and figured out how to do it.

add in the datasets the title:"dataTitle3" you want to show.
use the data labeling plugin.

http://www.chartjs.org/samples/latest/advanced/data-labelling.html
simple code manipulation achieves what you want using "dataset.title" I have made a sample but I think you could find out how and represent the data you want if you play with https://jsfiddle.net/dovvas/s4zwzp3w/

HTML: <canvas id="bubble-chart" width="800" height="800"></canvas>

JAVASCRIPT:

new Chart(document.getElementById("bubble-chart"), {
  type: 'bubble',
  data: {
    labels: "Africa",
    datasets: [{
      label: ["China"],
      backgroundColor: "rgba(255,221,50,0.2)",
      borderColor: "rgba(255,221,50,1)",
      title: "dataTitle1",//adding the title you want to show
      data: [{
        x: 21269017,
        y: 5.245,
        r: 15
      }]
    }, {
      label: ["Denmark"],
      backgroundColor: "rgba(60,186,159,0.2)",
      borderColor: "rgba(60,186,159,1)",
      title: "dataTitle2",
      data: [{
        x: 258702,
        y: 7.526,
        r: 10
      }]
    }, {
      label: ["Germany"],
      backgroundColor: "rgba(0,0,0,0.2)",
      borderColor: "#000",
      title: "dataTitle3",//adding the title you want to show
      data: [{
        x: 3979083,
        y: 6.994,
        r: 15
      }]
    }, {
      label: ["Japan"],
      backgroundColor: "rgba(193,46,12,0.2)",
      borderColor: "rgba(193,46,12,1)",
      title: "dataTitle4",//adding the title you want to show
      data: [{
        x: 4931877,
        y: 5.921,
        r: 15
      }]
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Predicted world population (millions) in 2050'
    },
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: "Happiness"
        }
      }],
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: "GDP (PPP)"
        }
      }]
    }
  }
});

Chart.plugins.register({
  afterDatasetsDraw: function(chart, easing) {
    var ctx = chart.ctx;

    chart.data.datasets.forEach(function(dataset, i) {
      var meta = chart.getDatasetMeta(i);
      if (meta.type == "bubble") { //exclude scatter
        meta.data.forEach(function(element, index) {
          // Draw the text in black, with the specified font
          ctx.fillStyle = 'rgb(0, 0, 0)';
          var fontSize = 13;
          var fontStyle = 'normal';
          var fontFamily = 'Helvetica Neue';
          ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

          // Just naively convert to string for now
          var dataString = dataset.data[index].toString();
          // Make sure alignment settings are correct
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';

          var padding = 15;
          var position = element.tooltipPosition();
          ctx.fillText(dataset.title, position.x, position.y - (fontSize / 2) - padding);
        });
      } //if
    });
  }
});

Can individual bubbles in a chartjs bubble chart have labels?

2 Answers