The curve in the d3 chart looks like it would be going to 0, (see attached picture). Is there a way to prevent that from happening? I want it to stop at the last value of the y axis.
// Draw graph line
g.append( path )
.datum(prices)
.attr( d , area(prices))
.attr( class , area-bg )
.attr( fill , url(#lightGradient) )
.attr( stroke , #15AA27 )
.attr( stroke-width , 1 )
.style( opacity , 0.6 )
...
// For today s day indicate current pricing
if (this.day == Today) {
// Draw the current pricing line
g.append( line )
.attr( id , limit )
.attr( x1 , innerWidth * this.markerY)
.attr( y1 , innerHeight)
.attr( x2 , innerWidth * this.markerY)
.attr( y2 , 1)
.attr( stroke , #484848 )
.attr( stroke-dasharray , 2.5)
....
// Draw the current pricing label
g.append( text )
.attr( fill , #484848 )
.append( tspan )
.attr( x , innerWidth * this.markerY + this.labelOffsetY)
.attr( dy , 10px )
.text("Current pricing")
.attr("font-size","10px");
....
// Draw the current pricing label
g.append( text )
.attr( fill , #484848 )
.append( tspan )
.attr( x , innerWidth * this.markerY + this.labelOffsetY)
.attr( dy , 22px )
.text(this.currentValue + "/kWh")
.attr("font-size","10px");
}
....
// Draw the y-lines
g.select( .grid )
.style( stroke , #79828F )
.style( stroke-width , 0.5 )
// Draw the box around the graph
g.select( .domain )
.style( stroke , #fff )
.style( stroke-width , 0 )