Labels for secondary axes?

[rayluo]

Currently Charts.css supports showing up to 10 secondary axes, but they do not have labels. Would it be possible that Charts.css would support this kind of usage and then those labels would be show alongside the y-axis and close to their corresponding secondary axes?

<table class="charts-css bar show-labels show-4-secondary-axes">
<caption>Sales Volume</caption>
  ...
</table>
<div class="charts-css secondary-label-1-of-4">250</div>
<div class="charts-css secondary-label-2-of-4">500</div>
<div class="charts-css secondary-label-3-of-4">750</div>
<div class="charts-css secondary-label-4-of-4">1000</div>

Another example with different number of axes:

<table class="charts-css bar show-labels show-5-secondary-axes">
<caption>Sales Volume</caption>
  ...
</table>
<div class="charts-css secondary-label-1-of-5">$ 2k</div>
<div class="charts-css secondary-label-2-of-5">$ 4k</div>
<div class="charts-css secondary-label-3-of-5">$ 6k</div>
<div class="charts-css secondary-label-4-of-5">$ 8k</div>
<div class="charts-css secondary-label-5-of-5">$ 10k</div>

Note: Yes, I understand that those extra <div>s are not necessarily screen-reader friendly. But they won't harm search engine. And the gain should outweigh the use of extra tags.

[owenavon]

@ramiy labels for secondary axes would be very beneficial. Is there any current workaround?

[filmaj]

Definitely not ideal, but my approach was to use an absolutely-positioned "axes overlay" div that sits next to the chart table element. I gave the axes overlay pointer-events: none; so that tooltip and other hover functionality worked as expected on the underlying chart. Next, the overlay div had some number of child divs that were full width and some % height based on the number of secondary axes I wanted. Finally, set a border-top on each of these child divs to create the secondary axes.

I nested span elements inside each axes that I could tweak to my liking to label the axes.

The very-bad-no-good thing about this approach is that I have to use JavaScript to position the overlay div appropriately (for example, need to offset the top position of the axes overlay based on the height of the chart caption). I love JavaScript but if I could avoid using it, I would!

[rayluo]

That looks cool, @filmaj !

Since @ramiy brought new life to this project after an almost 3-year hiatus by releasing version 1.x (Yay!), perhaps he would also reconsider this feature request.