CODEWITHSUNDEEP
javascriptd3.js
ppoliani
ppoliani

Reputation: 4906

d3js set tickValues for time scale axis

I've searched in the official d3.js documentation, as well as, here in stackoverflow to find a way to add custom tickValues to a time scale axis; However, i haven't stumble across any documentation that confirms that something like that is possible.

So in essence, i have a time scale axis and i would like to show specific hours e.g. i'd like to do something like this : 

xHourAxis
   .ticks(d3.time.hours, 2)
   .tickFormat(d3.time.format('%I %p'))
   .tickValues(2, 4, 6, 8, 10, 12) ;

So i want to display tick values every 2 hours, but not including the first (12 am) and the last (12 pm).

Does anyone know if there is any workaround for that?

Upvotes: 5

Views: 1484

Answers (1)

Tom P
Tom P

Reputation: 5659

Nearly there, but your code has two problems: First the tick values must be specified in an array, and second those values should be Javascript date objects. i.e. you just provide an array of dates to tickValues so your code would looks something like this:

xHourAxis
 .tickFormat(d3.time.format('%I %p'))
 .tickValues([new Date(2000,10,5), new Date(2005,2,7), new Date(2007,11,11)]);

Also, note that you needn't call the ticks() if you are going to later specify custom values.

Upvotes: 0

Related Questions