DC.js - axis margins
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.js"></script>
<h1>Top Oil Reserves</h1>
<div id="chart"></div>
JavaScript
var chartExample = {
initChart: function (data, countries) {
var ndx = crossfilter(data),
countryDimension = ndx.dimension(function (d) {
return d.name;
}),
countryGroup = countryDimension.group().reduceSum(function(d) { return d.sale; }),
chart = dc.barChart("#chart");
chart
.height(300)
.width(800)
.dimension(countryDimension)
.group(countryGroup)
.x(d3.scale.ordinal().domain(countries))
.xUnits(dc.units.ordinal)
.xAxisLabel("MMbbl = one million barrels")
.yAxisLabel("Reserves (MMbbl)")
.elasticY(true);
chart
.renderlet(function(chart){
debugger;
var colors = d3.scale.ordinal().domain(countries)
.range(["steelblue", "brown", "red", "green", "yellow", "grey", "blue", "black"]);
chart.selectAll('rect.bar').each(function(d){
d3.select(this).attr("style", "fill: " + colors(d.data.key));
});
});
dc.renderAll();
},
initData: function () {
var countries = ["Venezuela", "Saudi", "Canada", "Iran", "Russia", "UAE", "US", "China"];
var allData =[
{name:'Venezuela',sale:300},
{name:'Saudi',sale:253},
{name:'Canada',sale:150},
{name:'Iran',sale:125},
{name:'Russia',sale:110},
{name:'UAE',sale:90},
{name:'US',sale:40},
{name:'China',sale:37}
];
chartExample.initChart(allData, countries);
}
};
chartExample.initData();