Graph grid and axes jittering when panning on one axis

[nkalupahana]

The jittering is constant, and gets even worse when the axis label changes size. This is bad enough that I don't feel great going to production with it jittering and jumping around so badly. There's a video attached, and I can provide a reproduction if this is not a common issue.

Screen.Recording.2024-01-02.at.8.42.10.PM.online-video-cutter.com.mp4

[kurkle]

Padding probably helps: https://www.chartjs.org/docs/latest/general/padding.html#top-left-bottom-right-object

Edit: My memory failed me. I was thinking of constant width of the y-scale. Updating this in case someone stumbles upon it.

There is one sample with constant width axis: https://www.chartjs.org/chartjs-plugin-zoom/2.1.0/samples/wheel/log.html

  y: {
    // constant width for the scale
    afterFit: (scale) => {
      scale.width = 50;
    },
  }

[nkalupahana]

We found that this is actually a symptom of the real problem: the x-axis ticks don't actually move, and constantly change on pan. Instead of the x-axis values staying constant and moving across the screen like you might expect, they instead change whenever you pan, leaving the vertical lines in roughly the same place. You can see this in the original video -- it looks like you're panning the x axis, not the graph. To fix this, we manually calculated the ticks for the graph, and only changed the supplied ticks when the zoom was changed. Now, the graph pans as expected, and the jitter also goes away. https://github.com/nkalupahana/baseline/blob/main/src/components/graphs/helpers.tsx#L111