Accepted answer

If you want to avoid the lines bleeding over the graph area, what you might want is using a clip-path. I tweaked your code a little bit and added the clip path to it.

   .attr("id", "clip-path")
   .attr("width", width)
   .attr("height", height);

svg.append("path") // Add the valueline path.
   .attr("d", valueline(data))
   .attr("clip-path", "url(#clip-path)");

Here is the JSFiddle link for the same:

Please let me know if this is what you are looking for. :)


The reason why you get a broken graph is that, the values after 26 April is less than 75 which is the minimum you have defined. So the graph is actually drawing, but you can't see the lines because it is below the svg area you defined.

Here is my 2 cents.

  • Just update the data with correct values. So that you can view the data at the end.

        date: "1-May-12",  
        close: "90.13"  


  • Just update the min value to the minimum expected value.

    var thresholdValues = {
        minValue: 50,
        maxValue: 100

This is what I did and seems it works fine. Here is the fiddle link for the same

If you want to automatically find the minimum and maximum value from data, use d3's native function d3.extent(), which returns an array containing min and max value of that array or you can also try finding min and max separately by using d3.min() and d3.max().

Here is the documentation link for d3 array methods.

Hope this helps! :)

Related Query