Angular-nvd3 linechart with lines rendered outside chart

Question

I'm using Krispos angular-nvd3 to render a line chart. For some reason the lines are rendered outside the chart or the dates are wrong. The x-axis is a time scale and the min and max values of the xDomain is set using datepicker.

When setting the xDomain the chart is rendered with the selected start and end dates as min and max values of the x axis. However, the lines are rendered outside the time interval due to the dataset has minimum date occuring before the selected start date. In this example the start date selected is 2015-08-08 and the end date 2015-11-08:

If I use forceX instead of xDomain to set the min and max values, the lines are rendered within the chart grid. But the in this case the min date of the dataset is before the selected start date, so the x axis starts on 2015-07-07 instead of 2015-08-08. Illustrated below:

These are the basic chart options used. xDomain or forceX are set dynamically.

$scope.chartOptions = { chart: { type: 'lineChart', yDomain: [0,5], xDomain: [moment(data.startDate).valueOf(), moment(data.endDate).valueOf()], useInteractiveGuideline: true, interactiveLayer: { showGuideLine: true }, lines: { },
xScale: d3.time.scale(), xAxis: { showMaxMin: true, rotateLabels: -45, tickFormat: function(d) { return d3.time.format('%Y-%m-%d')(new Date(d)); } }, height: 350, margin : { bottom: 100 } } };

Do I need to use range in some way to get working properly, ie render the data within the selected start and end dates only.

Thankful for your input!

Answer 1

The solution for this issue was to use the chart option clamp(), in this case:

xScale: d3.time.scale().clamp(true)

The date scale is set using xDomain:

xDomain: [moment(data.startDate).valueOf(), moment(data.endDate).valueOf()]