CODEWITHSUNDEEP
javascriptd3.js
Howard Smith
Howard Smith

Reputation: 328

Time Formatting in D3js

I have a d3 line plot that I am plotting out the dates by month/day. The problem is the x-axis defaults to showing year "1900" at the axis origin. Is there a way I can change this to default to "January" instead of "1900" as my lines are where I am highlighting different years. My plnkr is below

http://plnkr.co/edit/22Jc4Nte0WWLQzT7a9lr?p=preview

I'm assuming the change is made in either of the below lines, however, I'm not sure the way to change it.

var x = d3.scaleTime().range([0, width]),

or

x.domain(d3.extent(data, function(d) { return d.date; }));

Upvotes: 0

Views: 69

Answers (1)

sparta93
sparta93

Reputation: 3854

You have to define tickFormat for the x-axis using %b so it knows only to display abbreviated month names. Check here for time formatting options in d3.

  .call(d3.axisBottom(x)
    .tickFormat(d3.timeFormat("%b"))
  );

Check the updated Plunkr - http://plnkr.co/edit/7ZUSQJduYPL5VNAxBG5u?p=preview

Upvotes: 1

Related Questions