Accepted answer
  1. Firstly, a minor and quick glitch in the line coloring is due to this Name = d[0].name where d has no attribute as name but does have one as Name (capital N)

    Name = d[0].Name;
  2. Now, the main issue with your code is that you're trying to append text to the path which would never work. The way you should do is:

    var lines =
      .attr("d", function (b) { return line(b) })
      .style({ "stroke-width": "3px", "fill": "none" })
      .style("stroke", LineColor(Name))
    var texts ='text.value')
  3. Using the logic in #2, append the texts for each element in d and assign x, y and text accordingly. Here's how:

    var texts ='text.value')
                 .classed('label', true)
                 .attr('dy', '-1em')
                 .text(function (d) {
                    return d.Value;
                   'x': function(d, i) {
                         var width =;
                         return x0(d.Date) + x0.rangeBand() / 2 - width/2;
                   'y': function(d, i) {
                         return YLine(d.Value);

    If you notice the above code, I'm assigning the text first and then applying x based on the width of the text using getBBox to center the text at the point. Feel free to adjust dy, dx according to your requirements.

    Putting together all of the above, here's a fork of that code:

    Hope this helps. And if you're up for suggestions, please refer this for adding data-points to a line chart.

Related Query

More Query from same tag