XAXIS PADDING

by Shabeer Sheffa

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<div id="chart">
    <svg></svg>
</div>

CSS

#chart svg {
    height: 400px;
}

JavaScript

var margin = {
    top: 50,
    right: 50,
    bottom: 120,
    left: 70
};
var svg = "#chart svg";

var normalisedData = [{
    "key": "Group A",
        "type": "bar",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 6
    }, {
        "x": 1,
        "y": 5
    }, {
        "x": 2,
        "y": 3
    }, {
        "x": 3,
        "y": 6
    }, {
        "x": 4,
        "y": 9
    }, {
        "x": 5,
        "y": 10
    }]
}, {
    "key": "Group B",
        "type": "bar",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 5
    }, {
        "x": 1,
        "y": 7
    }, {
        "x": 2,
        "y": 5
    }, {
        "x": 3,
        "y": 3
    }, {
        "x": 4,
        "y": 9
    }, {
        "x": 5,
        "y": 8
    }]
}, {
    "key": "Group A Benchmark",
        "type": "line",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 0
    }, {
        "x": 1,
        "y": 1
    }, {
        "x": 2,
        "y": 0
    }, {
        "x": 3,
        "y": 3
    }, {
        "x": 4,
        "y": 0
    }, {
        "x": 5,
        "y": 1
    }]
}, {
    "key": "Group B Benchmark",
        "type": "line",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 1
    }, {
        "x": 1,
        "y": 2
    }, {
        "x": 2,
        "y": 1
    }, {
        "x": 3,
        "y": 1
    }, {
        "x": 4,
        "y": 2
    }, {
        "x": 5,
        "y": 0
    }]
}];

var axisKeys = ["2014-Jan", "2014-Feb", "2014-Mar", "2014-Apr", "2014-May", "2014-Jun"];

nv.addGraph(function () {
    var chart = nv.models.multiChart()
        .options({
        reduceXTicks: false
    })
        .margin(margin)
        .color(d3.scale.category10().range());

    chart.xAxis.tickFormat(function (d) {
        // If there is such element, return it
        if (typeof axisKeys[d] !== "undefined") {
            return axisKeys[d];
        }
        return "";
    });

    // Get normalised data for chart
   ...