Dinesh Dinesh - 2 months ago 17
Javascript Question

draw horizontal lines for bars in nvd3 multi bar chart

I want to draw 2 horizontal lines for each of the bars in this nvd3 multibar chart

Here is the fiddle

I have few queries

  1. Why is
    not starting from
    of the plot

  2. How do I start drawing the lines from where the bar starts? The
    does not start from the start of the bar of

  3. How do I get to know the width of the bar to draw the line of length equal to the bar width


You are appending the line to the wrong "container". The svg variable is the entire svg container, nvd3's drawing container, though, is the g element:

<g class="nvd3 nv-wrap nv-multibar" transform="translate(0,0)">

So, use:

var g = d3.select("#chart1 svg .nvd3");
  .style("stroke", "#FF7F0E")
  .style("stroke-width", "2.5px")
  .attr("x1", xValueScale("A"))
  .attr("y1", yValueScale(yValue))
  .attr("x2", xValueScale("A") + 100)
  .attr("y2", yValueScale(yValue));

Updated fiddle.