Dinesh Dinesh - 18 days ago 9
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
    yValueScale(0)
    not starting from
    0
    of the plot

  2. How do I start drawing the lines from where the bar starts? The
    xValueScale("A")
    does not start from the start of the bar of
    A

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


Answer

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");
g.append("line")
  .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.

Comments