x-axis on State Transitions panel does not align with Plot panel

[rgov]

Foxglove 1.8.0, macOS 12.3

I have a Plot panel and State Transitions panel aligned vertically with one another. Both use the header.stamp for their x axes. But the data points do not align between the two panels, because the width of the plots are slightly different, probably due to the absence of the y axis labels on the State panel.

The peak on the Depth plot should align exactly with the end of the Downcast state, but they are slightly offset.

It's more exaggerated at other parts of the plot:

[defunctzombie]

Summarizing our discussion we had in person about this. The challenge here is that chart.js computes these tick labels automatically and since these are plots in two separate panels we'd need to have away to synchronize the gutter.

While we do have a way to synchronize the hover values (because thats a common part of the app), we don't have anything specific to gutters or other bespoke elements of panels.

Another idea I mentioned was to provide a setting to set a fixed gutter size. I've not found any chartjs configuration (https://www.chartjs.org/docs/latest/axes/labelling.html) that lets us set this fixed size - only a padding around the text. So the next idea could be some sort of custom tick formatter where a user could enter a setting of ####.## and we'd use that format for the y-axis ticks and pad out the leading numbers.

I agree there is something visually appealing to lining up axis for stacked plot layouts.