2

Is it possible to add labels to scatter plot points in c3.js like in this google charts example?

https://google-developers.appspot.com/chart/interactive/docs/gallery/bubblechart#javascript

Slimey
  • 25
  • 1
  • 3

2 Answers2

6

c3 doesn't support this currently - https://github.com/masayuki0812/c3/issues/481. But you can easily add the functionality - just loop through the chart series and points and add the labels as necessary. 

var labels = [
    ['AA', 'BB', 'CC', 'DD', 'EE', 'FF', 'GG', 'HH'],
    ['ZA', 'ZB', 'ZC', 'ZD', 'ZE', 'ZF', 'ZG', 'ZH']
];
// series
var series = chart.internal.main
                .selectAll('.' + c3.chart.internal.fn.CLASS.circles)[0];
// text layers
var texts = chart.internal.main
                .selectAll('.' + c3.chart.internal.fn.CLASS.chartTexts)
                .selectAll('.' + c3.chart.internal.fn.CLASS.chartText)[0]
series.forEach(function (series, i) {
    var points = d3.select(series).selectAll('.' + c3.chart.internal.fn.CLASS.circle)[0]
    points.forEach(function (point, j) {
        d3.select(texts[i])
            .append('text')
            .attr('text-anchor', 'middle')
            .attr('dy', '0.3em')
            .attr('x', d3.select(point).attr('cx'))
            .attr('y', d3.select(point).attr('cy'))
            .text(labels[i][j])
    })
});

Fiddle - http://jsfiddle.net/6phuuans/

enter image description here

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • 1
    Thanks—this is great. Is there a way to make this work in a responsive layout? So that the labels stay with the scatter points when the width of the chart changes? – sherlock42 May 18 '16 at 15:55
  • Started using this but then realised the "points" loop is retrieving the circles ordered by x value (The way c3 is holding circles internally I guess), and so the labels array must be ordered by that. Is there a way of having my labels array in the same order as the data? (In the example shown, the blue FF circle is the first in the data array, so I'd want _that_ one to get the label AA) – Harry Wood Oct 15 '20 at 13:11
1

Currently C3.js doesnt provide us with the option to add labels to a scatter plot chart. But the following method can be used to add responsive data labels:

  1. After the chart is rendered (in the "onrendered" property of the chart), identify the data points ( tags) and add tags with the x and y coodinates picked from the relevant circle, as the tags sibling.

Code Snippet:

onrendered: function(){
  // get the parent of the the <circles> to add <text as siblings>
  var g = d3.selectAll('.c3-circles');
  //Get all circle tags
  var circles = d3.selectAll('circle')[0];
  //go to each circle and add a text label for it
  for(var i = 0; i < circles.length; i++){
    //fetch x-coordinate
    var x = $(circles[i])[0].cx;
    //fetch y-coordinate
    var y = $(circles[i])[0].cy;

    //create and append the text tag
    g.append('text')
      .attr('y', y.baseVal.value - 15)  // (-15) places the tag above the circle, adjust it according to your need
      .attr('x', x.baseVal.value)
      .attr('text-anchor', 'middle')
      .attr('class', 'c3-text c3-text-'+i)
      .text(data[i].<data point key>) // the text that needs to be added can be hard coded or fetched for the original data.
      //Since I am using a JSON to plot the data, I am referencing it and using the key of the value to be shown.

  }

}
  1. This will add the label, but on resize , multiple data labels will be plotted. To handle that, on the charts resize, we must remove the previous data labels (in the "onresize" property of the chart).

Code Snippet: 

 onresize: function () {
              $('.c3-shapes.c3-circles text').remove();
           }
Preshit Bakre
  • 11
  • 1