No axis ticks on nvd3.js multiBarHorizontalChart

Here is a nvd3.js horizontal multibar chart. The x-axis has no ticks (between 0 and 44.6). How can I get some x-axis ticks?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"
      charset="utf-8"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>

    <style>
      text {
        font: 12px sans-serif;
      }
      svg {
        display: block;
      }
      html,
      body,
      #chart1,
      svg {
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="chart1">
      <svg></svg>
    </div>

    <script>
      var selector = "#chart1 svg";
      var Data = [
        {
          key: "Low",
          values: [
            { label: "A", value: 44.5555555555556 },
            { label: "B", value: 28.2222222222222 }
          ],
          color: "#30123BFF"
        },
        {
          key: "Medium",
          values: [
            { label: "A", value: 24 },
            { label: "B", value: 28.7777777777778 }
          ],
          color: "#A2FC3CFF"
        },
        {
          key: "High",
          values: [
            { label: "A", value: 24.5555555555556 },
            { label: "B", value: 18.7777777777778 }
          ],
          color: "#7A0403FF"
        }
      ];

      nv.addGraph(function () {
        var chart = nv.models
          .multiBarHorizontalChart()
          .x(function (d) {
            return d.label;
          })
          .y(function (d) {
            return d.value;
          })
          .duration(1300)
          .margin({ bottom: 100, left: 100 })
          .groupSpacing(0.1);

        chart.xAxis
          .axisLabel("wool")
          .axisLabelDistance(-5);

        chart.yAxis.axisLabel("breaks average")
          .axisLabelDistance(5)
          .showMaxMin(true);

        d3.select(selector).datum(Data).call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
      });
    </script>
  </body>
</html>

Solution

Just add .ticks(x) to your chart.yAxis function, being x the number of ticks you wish.

For current sample provided, supposing you wish to add 10 ticks, you could use:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"
      charset="utf-8"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>

    <style>
      text {
        font: 12px sans-serif;
      }
      svg {
        display: block;
      }
      html,
      body,
      #chart1,
      svg {
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="chart1">
      <svg></svg>
    </div>

    <script>
      var selector = "#chart1 svg";
      var Data = [
        {
          key: "Low",
          values: [
            { label: "A", value: 44.5555555555556 },
            { label: "B", value: 28.2222222222222 }
          ],
          color: "#30123BFF"
        },
        {
          key: "Medium",
          values: [
            { label: "A", value: 24 },
            { label: "B", value: 28.7777777777778 }
          ],
          color: "#A2FC3CFF"
        },
        {
          key: "High",
          values: [
            { label: "A", value: 24.5555555555556 },
            { label: "B", value: 18.7777777777778 }
          ],
          color: "#7A0403FF"
        }
      ];

      nv.addGraph(function () {
        var chart = nv.models
          .multiBarHorizontalChart()
          .x(function (d) {
            return d.label;
          })
          .y(function (d) {
            return d.value;
          })
          .duration(1300)
          .margin({ bottom: 100, left: 100 })
          .groupSpacing(0.1);
        chart.xAxis
          .axisLabel("wool")
          .axisLabelDistance(-5);

        chart.yAxis.axisLabel("breaks average")
          .axisLabelDistance(5)
          .ticks(10)
          .showMaxMin(true);

        d3.select(selector).datum(Data).call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
      });
    </script>
  </body>
</html>

For more info, please check: https://github.com/d3/d3-axis/blob/v1.0.12/README.md#axis_ticks