ruleX in between 2 bar chart categorical points

[rht]

In the bar chart of https://greatcarbonarbitrage.com/climate_financing.html, I want to add a dashed vertical line between the "Emerging Market Countries" and "Asia" bar, dividing the bar chart into 2 areas. I am not able to do this, because I can't use any number to signify the location of this vertical line, unlike a simple horizontal line via Plot.ruleY([0]).

(note that since the x points are not floating numbers, I can't seem to place a random text via Plot.Text either)

Plotting code of the bar chart: https://github.com/ox-inet-resilience/carbon_arbitrage/blob/a851e399618c63eda29fe6e488b0de5c620c12eb/js/climate_financing.js#L83-L111

Appreciate the help!

[enjalot]

This may not be the best answer, but a quick fix I thought of would be to use tickX instead and use an offset:
https://observablehq.com/d/a642afc2bb1d73b1

So the data for the tick is the category to the left of the divide you want to make. then you shift it to the right by some number of pixels to place it.
Plot.tickX(["Comedy"], { strokeDasharray: "4 2", dx: 11})

The "real" solution to this might be to make two plots, one for each side and place them together in html. You'd probably want to set the y scale domain to be the same.

[rht]

Thank you for the answer! Using tickX works for now. But I will refactor to 2 plots later, since it is more semantic to logically separate the 2 different groupings.

[rht]

For reference, I figured out how to add singleton annotations by reading how it is done in #689.