Is this layout possible?

[evbrew]

I don't think there is currently, but is there any way to achieve these 3 visual components?

(see picture below for bullet # references)

1. Add labels to the secondary-axes.
   Either as a special TR or CSS utility class.
   Would want CSS control of the element to customize (in this example giving it a wide padding)

2. Show graph Data top aligned above all elements.

3. Style the "empty" area between edge of graph and Data element.
   Could probably cheat and do this with a dummy stacked data element but ...

[evbrew]

For 1, realized I could add an empty Data point which gives the spacing at least.

[evbrew]

I was pretty much able to make this work, for #2 and #3 ended up doing a 2 group data stack where the 2nd group was the remainder amount (with a data label for the column header), and then positioned the data label header so it was offset above the row.

For #1 labels, only thing i've come up with is to absolutely position another element with the x-axis text values down over the empty first column and play with the position to get them to more or less line up with the number of x-axis lines being shown - very manual, would be great if there was another option for this case like these examples:

https://codepen.io/team/css-tricks/pen/289ddf6daa8575b3c44914921f4a741f

https://meyerweb.com/eric/css/edge/bargraph/demo-table.html

[ramiy]

The general structure can be done using a wrapper element.

As for the labels (1), it's not supported yet. But you can create a simple list (<ul>) with flexbox, column direction and space between elements.