chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.94k stars 11.89k forks source link

Wrongly positioned bar on the timeline chart (Chart 4.4.1) #11667

Open perrauda opened 4 months ago

perrauda commented 4 months ago

Expected behavior

I use ChartJS to create a timeline but some of the visualisations are misleading.

The correct behaviour would be for the middle of the bar to be positioned at the precise date, when minBarLength is used.

Current behavior

When I have a precise date (for example: 1999-12-31), chartJS use minBarLength and, the bar appears completely after 2000, which is really misleading. Also, when you start on 2000-01-01, the bar appears completely to the right of the line.

The idea would be for the bar to be almost perfectly in the middle of the "2000" line.

See red bars (C - 1999-12-31 and D - 2000-01-01) in my codepen

Also, when the bar should not appear on the screen, it is always visible at the ends when minBarLength has been used

See red bar (E - 1990-01-01)

Reproducible sample

https://codepen.io/BabSick/pen/yLwQKQg

Optional extra steps/info to reproduce

No response

Possible solution

The ChartJS code assumes that there is a specific date, then with minBarLength and depending on the "base" starts from the side that moves away from the "base" (barSign), which is not a good idea for type: time. The good idea would be for the precise date to be in the middle of the bar. And if it's not in min;max, it's must not visible.

Context

No response

chart.js version

4.4.1

Browser name and version

No response

Link to your project

No response