d3 x-axis with one incorrect value

Question

I'm using d3 to create a multi-series line chart. This is working great with no errors, except that one of the labels on the x-axis is totally incorrect.

I think it might be something to do with how I parse the dates; eg "12:00" => 12PM

var parseTime = d3.time.format("%H:00").parse;

But "00:00" turns to "1900".

Please see the jsfiddle at http://jsfiddle.net/cjNZ6/ .

Answer 1

This is because of the multi-scale time format that D3 uses by default. You don't specify a year in your dates, so it assumes 1900.

To fix, simply specify a tick format explicitly:

var xAxis = d3.svg.axis()
  .scale(x)
  .tickFormat(d3.time.format("%I %p"))
  .orient("bottom");

Complete demo here .