✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Custom-ordered X axis values

Sorry if this is a common question, but I couldn’t find another similar topic.

I have some charts where the X values are ordered, but not numbers (they’re strings corresponding to revisions of a repository). Setting the revision numbers on as the x values worked fine, until a new series appeared with fewer data points. It seems that in my setup, if multiple charts are displayed in the same plot, the values are shown in the data order, not in the order defined by the x values.

See below for a screenshot. Here the blue points are wrongly-positioned (they should be at the end):

I also tried setting tickvals and ticktext, with synthetic x values. This worked, but it made the axis unreadable:

Can I make this work somehow, or should I restructure the data to put null for the missing points?

See https://codepen.io/lnicola/pen/JjbVPPv for a “working” example. There are two places where you have to uncomment a bit of code and comment the existing one to switch between the two approaches.