The problem was that when you provide x data to every point and than you remove one point e.g. x=1, the second category will still be displayed so the misalignment is normal in this case. I removed all the x values from the points, also removed your xAxis.labels.formatter, if we are using categories, we don't need it, we can just display this.key in tooltip.formatter.
The crucial thing is that on the bottom of the recalc function I set xAxis categories with the filtered array of categories. Now when you remove one item from the multi select, the category is hidden and all the points are aligned.
Demo: https://stackblitz.com/edit/react-highs ... ntainer.js
For the future, please simplify the demo as much as possible before sending it to us, it took me some time to understand what was happening there and also the compilation was very slow.
Feel free to ask any further questions!