Accepted answer

This is because of how the default time tick formatter is set up -- see the documentation. You can change this by introducing your own custom multi-scale time format, see e.g. this example. The relevant code is this:

var customTimeFormat = timeFormat([
  [d3.time.format("%Y"), function() { return true; }],
  [d3.time.format("%B"), function(d) { return d.getMonth(); }],
  [d3.time.format("%b %d"), function(d) { return d.getDate() != 1; }],
  [d3.time.format("%a %d"), function(d) { return d.getDay() && d.getDate() != 1; }],
  [d3.time.format("%I %p"), function(d) { return d.getHours(); }],
  [d3.time.format("%I:%M"), function(d) { return d.getMinutes(); }],
  [d3.time.format(":%S"), function(d) { return d.getSeconds(); }],
  [d3.time.format(".%L"), function(d) { return d.getMilliseconds(); }]

function timeFormat(formats) {
  return function(date) {
    var i = formats.length - 1, f = formats[i];
    while (!f[1](date)) f = formats[--i];
    return f[0](date);

This will iterate over the time formats, starting with the most specific (smallest) one until the function in the second argument returns a value that evaluates to true. This way, you can check what date range is significant. If, for example, everything up to hours is zero, then the changes are only in the days and it's not necessary to show anything smaller than that.

I've changed this for your example here to include hour and minute as well, but you'll notice that the tick labels for the bottom graph overlap now. You can of course use different multi-scale time formats for all of the axes.

Related Query

More Query from same tag