I'm using d3.j, nvd3.js and angular-nvd3 directive. I want to explicitly specify range for x-axis, so even if there are no values entire interval is shown (a good example could be timeline-x-axis, when I want to show entire period of time, let's say 03:00 - 09:00).
Initially I was using simply a "lineChart" and there was an option to specify forceX and forceY chart options consuming array of max and min values for x- and y-axis respectively. Now I switched to "multiChart" (with two y-axis), and this option doesn't seem to work anymore. For y-axis there is a replacement called yDomain1 and yDomain2, which works exactly the same as forceY, but xDomain doesn't work at all.
I created a Plunker to show my problem. Here is the chart options' initialization shown:
$scope.xminvalue = -10;
$scope.xmaxvalue = 110;
$scope.options = {
"chart": {
"type": "multiChart",
"height": 450,
"margin": {
"top": 20,
"right": 20,
"bottom": 40,
"left": 55
},
"useInteractiveGuideline": true,
"xAxis": {
"axisLabel": "Time (ms)",
"showMaxMin": true,
"height": 60,
"margin": {
"top": 0,
"right": 0,
"bottom": 0,
"left": 0
},
"tickSubdivide": 10,
"tickSize": 2,
"tickPadding": 2,
"tickFormat": function(d) {
return d;
},
},
"yAxis1": {
"tickFormat": function(d) {
return d3.format('.01f')(d);
},
"axisLabel": "Voltage (v)",
"axisLabelDistance": -10,
"showMaxMin": true,
"height": 60,
"ticks": null,
"width": 75,
"tickValues": null,
},
"yAxis2": {
"tickFormat": function(d) {
return d3.format('.01f')(d);
},
"axisLabel": "Voltage (v)",
"axisLabelDistance": -10,
"showMaxMin": true,
"height": 60,
"ticks": null,
"width": 75,
"tickValues": null,
},
"xDomain": [$scope.xminvalue, $scope.xmaxvalue],
"xRange": null,
"yDomain": null,
"yRange": null,
"tooltips": true,
}
};
$scope.data = sinAndCos();
This is just small refactoring of another example with simple "lineChart" (which works like a charm with xDomain).
Will appreciate any ideas/workarounds.