Data point as text label in xCharts

Question

I'm trying to add text labels to certain data points with xCharts. For every point that has a "name" property I want a label near the point with the "name" value as text. This picture shows what I want:

xChart example

And here is the data set:

var data = {
  "xScale": "time",
  "yScale": "linear",
  "type": "line",
  "main": [{
    "className": ".pizza",
    "data": [{
      "x": "2012-11-05",
      "y": 1
    }, {
      "x": "2012-11-06",
      "y": 6
    }, {
      "x": "2012-11-07",
      "y": 13,
      "name": "Name 1"
    }, {
      "x": "2012-11-08",
      "y": -3
    }, {
      "x": "2012-11-09",
      "y": -4
    }, {
      "x": "2012-11-10",
      "y": 9,
      "name": "Name 2"
    }, {
      "x": "2012-11-11",
      "y": 6
    }]
  }]
};

From what I understand this kind of customization is not supported out of the box in xCharts and must be done with d3 and I'm guessing it something along the lines as described in the documentation about Custom Vis Types. But I'm a complete newbie on d3 so I can't figure out how to create something useful.

have you already tried this approach http://stackoverflow.com/questions/28589401/d3-add-data-value-labels-to-multi-line-graph ? — aberna, Feb 19 '15 at 22:11

score 1 · Accepted Answer · answered Feb 20 '15 at 16:54

How many plotting libraries are there built on top of d3?

I studied there documentation and this is the best I can come up with:

var lineDot = xChart.getVis('line-dotted');
var myVis = {
  enter: function(self, storage, className, data) {
    lineDot.enter.apply(this, arguments);
    // Do your custom actions here
    self._g.append('g')
      .selectAll('.myText')
      .data(data[0].data)
      .enter()
      .append('text')
      .attr('x', function(d,i){
        return self.xScale(d.x);
      })
      .attr('y', function(d,i){
        return self.yScale(d.y);
      })
      .text(function(d,i){
        return d.name;
      })
  },
  update: function(self, storage, timing) {
    lineDot.update.apply(this, arguments);
    // Do your custom actions here
  },
  exit: function(self, storage, timing) {
    lineDot.exit.apply(this, arguments);
    // Do your custom actions here
  },
  destroy: function(self, storage, timing) {
    lineDot.destroy.apply(this, arguments);
    // Do your custom actions here
  },
};
xChart.setVis('myvis', myVis);

Note, I only coded up the enter. You should probably handle the update case as well.

Example here.

Data point as text label in xCharts

1 Answers1