Can individual bubbles in a bubble chart have labels?

Question

I am creating a bubble chart using charts. I can create tooltips that describe each of the bubbles, but users of my chart may not hang over it to see a tooltip. The format of the BubbleData object does not include the label element (I placed it anyway - no luck), I tried the label element for the chart data object (although the documents say it's for category labels - you never know!) And all that I I can think of to put a label on the bubble.

Is there a tooltip configuration that constantly displays tooltips? This will work for me too.

thanks

Glenn

Answer 1

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

• add the title: "dataTitle3" that you want to show in the datasets.

• use the plugin to mark data.

  http://www.chartjs.org/samples/latest/advanced/data-labelling.html

• simple code manipulation allows you to use what you want to use "Dataset.title" I made a sample, but I think you could learn how to present 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 }); } });