1

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.

kardanov
  • 575
  • 3
  • 13
  • 25
  • Taking a look at the [multiChart implementation](https://github.com/novus/nvd3/blob/master/src/models/multiChart.js#L100), it looks like no options are taken into account when setting it. :( – Mark Nov 15 '16 at 16:08

0 Answers0