NVD3 Rotate labels

by Sourabh Tewari

HTML

<link rel="stylesheet" href="https://www.commcarehq.org/static/hqwebapp/js/lib/nvd3/nv.d3.css">
<script src="https://www.commcarehq.org/static/hqwebapp/js/lib/nvd3/nv.d3.min.js"></script>
<div id="chart">
    <svg></svg>
</div>

CSS

#chart svg {
    height: 400px;
}

JavaScript

var crap = [
  {
    key: "S1",
    color: "#51A351",
    values:
      [      
        { x : "sep-12", y : 40 },
        { x : "sep-13", y : 30 },
        { x : "sep-14",   y : 20 }  
      ]
  },
  {
    key: "S2",
    color: "#BD362F",
    values:
      [      
        { x : "sep-12", y : 60 },
        { x : "sep-12", y : 50 },
        { x : "sep-13",   y : 70 } 
      ]
  }
];
nv.addGraph(function () {
    var chart = nv.models.multiBarChart();

chart.x(function(d) { return d.x; });
chart.y(function(d) { return d.y; });

    chart.rotateLabels(-45);

    d3.select('#chart svg')
        .datum(crap)
        .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});