dc.js bar chart with ordinal axes

Question

I am making a simple bar chart getting a sum of revenue over the year. Below is the snippet of constructing the bar chart using dc.js

//INITIALIZE CROSSFILTER AND RELATED DIMENSIONS/AGGREGATES
var data = crossfilter([
    {revenue: 1487946,year: 2016}, 
    {revenue: 2612,year: 2016},
    {revenue: 2908,year: 2015},
    {revenue: 1648171,year: 2015 }]);

var dimension = data.dimension(function(d) {return d.year;});
var group = dimension.group().reduceSum(function(d) {return d.revenue;});

// MAKE A DC BAR CHART
dc.barChart("#bar-chart")
  .dimension(dimension)
  .group(group)
  .x(d3.scale.ordinal().domain(dimension)) // Need the empty val to offset the first value
  .xUnits(dc.units.ordinal) // Tell Dc.js that we're using an ordinal x axis
  .brushOn(false)
  .centerBar(false)
  .gap(70);

console.log(dc.version);
dc.renderAll();

Its has to be noted that year is rendered as ordinal for simplicity.

With dc.js version - 1.7.5, The output was not clear :

.

With dc.js version - 2.x(beta) the output was much better:

Its not possible to use dc.js 2.x currently due to other conflicts. Any thoughts on making the bar chart better using dc.js 1.7.5?

Here is the JS Fiddle to play around! Thanks in advance.

Cyril Cherian Cyril Cherian · Accepted Answer · 2016-02-12T09:17:45

Added comments in the scriplet below:

dc.barChart("#bar-chart")
  .width(300) //give it a width
  .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off
  .dimension(dimension)
  .group(group)
  .x(d3.scale.ordinal().domain(dimension)) // Need the empty val to offset the first value
  .xUnits(dc.units.ordinal) // Tell Dc.js that we're using an ordinal x axis
  .brushOn(false)
  .centerBar(false)
  .gap(7);//give it a gap of 7 instead of 70

working code here

dc.js bar chart with ordinal axes

2 Answers