Angular NVD3: set a yDomain in stackedAreaChart

Question

I'm using:

• Angular v.1.3
• Angular-nvd3 v.1.0.5
• D3 v.3.5.16

I tried to add a Stacket Area Chart with a specific domain in Y axis and I'm glad with the result because the yDomain and the chart is working, but I have a little design issue that I want to solve...

---

Without a domain in Y axis:

Is working correctly, without any issue, but is not exactly that I want:

With a domain in Y axis

With the last situation, I added now a domain in Y axis:

 var maxValue, minValue, margin;
  
 maxValue = Math.max.apply(Math,data[0].values.map(function(o){return o[1];}));
 minValue = Math.min.apply(Math,data[0].values.map(function(o){return o[1];}));
 margin = 0.1 * (maxValue - minValue);
 options.chart.yDomain = [minValue, maxValue+margin];

And now is just exactly that I want! I added a domain... But I don't understand why the X axis and the chart are underhand...

How can I solve this design issue? Why is this happening?

Thank you!

---

Chart properties:

"chart": {
    "type": "stackedAreaChart",
    "height": 450,
    "margin": {
      "top": 20,
      "right": 20,
      "bottom": 20,
      "left": 40
    },
    "x": function (d) {
      return d[0];
    },
    "y": function (d) {
      return d[1];
    },
    "useVoronoi": false,
    "clipEdge": true,
    "showControls": false,
    "duration": 100,
    "useInteractiveGuideline": true,
    "xAxis": {
      "tickFormat": function (d) {
        return d3.time.format("%H:%M")(new Date(d));
      }
    },
    "yAxis": {
      "tickFormat": function (d) {
        return d3.format(",.2f")(d);
      },
    },
    "zoom": {
      "enabled": false,
      "scaleExtent": [1, 10],
      "useFixedDomain": true,
      "useNiceScale": false,
      "horizontalOff": true,
      "verticalOff": true,
      "unzoomEventType": "dblclick.zoom"
    }
  }
  

Answer 1

Finally I solved this issue changing the type of chart from stackedAreaChart to lineChart.

"chart": {
    "type": "lineChart",
    // ... All the other options are the same

After that, the only change that we need to do is add area:true in the data object, and we obtain the same chart with this bug solved.

data = [{
          color:"#e35b5a",
          key:"A",
          values:values,
          area: true //Add this line in the data object
       }];

Result: