Accepted answer

One possible solution is to add years to date field like this

    date: "2010-October",
    price: "100"

If you are not going to display the year, it may be arbitrary, just make sure, that after December it increases by 1.

Then replace var parseDate = d3.time.format("%B"); with var parseDate = d3.time.format("%Y-%B");

Also replace .call(xAxis.ticks(d3.time.year)); with .call(xAxis.ticks(d3.time.months));

Here is the fiddle:

Edit: If you can't add years manually, you can try to do this automatically like this:

var parseDate = d3.time.format("%Y-%B");
data.forEach(function(d) {
  var year = 2000;
  d.values.forEach(function(d) {
    if ( === 'January') year++; = parseDate.parse(year.toString() + '-' +;
    d.price = +d.price;

This code only works if all months are present (there are no gaps) and if January is represented exactly as "January" (i.e. it has the same case).

Related Query

More Query from same tag