[XML/CSS Selector] Why can't a Highcharts Series position be moved at all with CSS Selector?

[ClubMed]

Hi, on here, I previously had success working with CSS Selectors for Splunk Dashboards with the help of people here. My previous question solved.

So please understand I understand CSS Selectors and I've been bashing myself at this for hours.

What I have is a standard bar chart of 2 series over time. I am trying to use CSS selector to move the first series' bar position such that it overlaps with the second bar next to it, to give it an appearance the smaller bar is a sub-set of the larger bar.

I have attached a photo using Google Inspect on the bar in Splunk Dashboard.

You can see the bar for the first series has the class g.highcharts-series.highcharts-series-0

On the right side, you can see I injected a CSS selector into the webpage and no combination of positioning seem to make the series budge, if at all.

As of note, I did find this paragraph on Highcharts website - https://www.highcharts.com/docs/chart-design-and-style/style-by-css#what-can-be-styled

However, layout and positioning of elements like the title or legend cannot be controlled by CSS. This is a limitation of CSS for SVG, that does not (yet - SVG 2 Geometric Style Properties) allow geometric attributes like x, y, width or height. And even if those were settable, we would still need to compute the layout flow in JavaScript. Instead, positioning is subject to Highcharts JavaScript options like align, verticalAlign etc.

Okay so, the bars probably cannot be moved. That is a very unfortunate limitation. Is it possible to make 2 bars overlap each other on a Splunk dashboard at all?

I know I can workaround with using math to subtract a series from another and stack the bars, but it is only a workaround.