Dinesh Dinesh - 1 year ago 150
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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download