Chart.js: Ticks for bar charts of type time are not centered

[CharlieEtienne]

Hello,

I'm not sure if it's a bug or the normal behaviour, but when you give type 'time' to xAxes, the ticks aren't centered anymore and move to the center of gridlines instead of center of bars.

Is there a way to avoid that ?

See JSFiddle : https://jsfiddle.net/CharlieWebNancy/apawqy6n/

Thank you very much.

Environment

• Chart.js version: 2.4.0

[geo-developer]

@CharlieEtienne check this issue #3589 and see if that can be the cause of your error.
If not ask again and i'll try to help

[CharlieEtienne]

@geo-developer Thanks, but I don't think so, check the JSFiddle, there is no min or max option. It seems to be specific to time type.

[CharlieEtienne]

I have edited my JSFiddle, maybe it's clearer.

[geo-developer]

@CharlieEtienne yeah i just asked cause it could be related, lately i've seen some issues with the bar and time so i gave it a try.
For your problem the easiest way for you to solve that is to create a new chart that extends the bar char https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.bar.js and just override the function updateElement and change the way they calculate the x value of the bar on line 79 or you could just override the calculateBarX function of the bar char, that's just up to you to decide

[geo-developer]

@CharlieEtienne yeah i saw your fiddle but tried to give it a shot anyway, could it be something related to that issue. Your fiddle was fine mate.

[CharlieEtienne]

@geo-developer Thank you ! Could you help me to do that ? My level in JS is way too low...

[geo-developer]

@CharlieEtienne yeah i can but only later in the day, right now i can't sorry mate.

[CharlieEtienne]

@geo-developer sounds perfect for me !

[etimberg]

I believe this is because the gridLines.offsetGridLines setting is only used for the category scale. This falls under the work that needs to be done to improve bar charts on time axes (there are a lot of issues regarding the matter)

[lenyy]

@CharlieEtienne this is the best i can help you, but its just a hack https://jsfiddle.net/lenyy/ard8nbd2/

[CharlieEtienne]

@lenyy Thank you, but the only difference I see is that bars are thinner... We still can't see sunday bar, and ticks are still not centered...

[geo-developer]

@CharlieEtienne the bars being thinner you can change, but they are centered between the days, i thought you wanted that. Check the above fiddle to se the sunday bar.

Where do you want the bars centered? Rigth now they are centered between days, but if you want the bar center to fall inside the monday label you need to pass one more more day to the initial label and one more day to the last, or you could just set the min and max values of the ticks.

[CharlieEtienne]

@geo-developer ah, perfect, I have the sunday bar. :-) What I'd like to get is the same as the chart below (with strings) : with labels between the grid lines, aligned with bars. (Sorry, I'm french, I don't know if I speak properly ;-) )

[lenyy]

@CharlieEtienne check my fiddle https://jsfiddle.net/lenyy/ard8nbd2/ . This is the best hack i can give you right now

[CharlieEtienne]

Thanks to all of you. I think I will try an other way and first convert my dates with php, because it doesn't fit to my needs.

Could you take 5 minutes again to help me with this new approach ?

I want to display in Tooltip the full date, I think I'm close to the solution but I can't find a way to get the right indice in tooltip title. (at line 25)

It should be an easy one for you.

Thanks again

[CharlieEtienne]

@geo-developer, @lenyy, could someone help me with that ?

[geo-developer]

@CharlieEtienne just change line 25 to data.labels[tooltipItems[0].index];

[Arkemlar]

+1 for bug mark. Using bar chart and time type in xAxis results in non-centered dates:

The gridLines.offsetGridLines option not respected as well.
Chart version - latest (2.6.0).
PS: plz dont recommend me hacks like replacing time type to some other axis type. I need exactly time type for my X axis.

[nagix]

I think there are three issues here.

1. It seems to me that the name gridLines.offsetGridLines is misleading because grid lines don't change regardless of whether it is true or false. Instead, it offsets the positions of labels only. See this example:
   https://jsfiddle.net/nagix/1s1jvng1/ (using category scale of 2.4.0).
   

2. As @etimberg mentioned, gridLines.offsetGridLines has no effect on the time scale, and the center of the bars are positioned between gridlines. In case of the time scale, it makes more sense to me that the center of a bar is aligned to the timestamp that its data point has. Currently, the time that the data point refers is at the bottom left of the bar (with some padding). See this example:
   https://jsfiddle.net/nagix/phj2yzb9/ (using time scale of 2.6.0).
   

3. As @geo-developer mentioned, the fix to #3589 (#3648) caused a problem. Now the width of a bar and padding are calculated based on the number of ticks, so the size of a bar gets thinner and the center of a bar shifts to the left a little bit when gridLines.offsetGridLines is false or the axis has the time scale.
   Compare these two examples:
   https://jsfiddle.net/nagix/1s1jvng1/ (using category scale of 2.4.0).
   

https://jsfiddle.net/nagix/9emorgws/ (using category scale of 2.6.0).