Option to label axes
bkil opened this issue · comments
Could we please have an option to label our axes? It's pretty easy based on <thead>, I did a mockup myself.
The messy, hacky proof of concept you see on the screenshot was produced by this:
You can find the live demo link in the head of spamisi.sh - I'm too embarrassed to link to it directly. 😄
Basically, I align the first header cell and rotate the second one via selectors like .barchart > thead > tr > * + th, although my positioning is much inferior to how you are doing it, hence why I would like to use your library instead.
Ok, let me try to help you here...
HTML Structure:
<div id="my-chart">
<table class="charts-css area"> ... </table>
<div class="y-axis"> Y Axis Label </div>
<div class="x-axis"> X Axis Label </div>
</div>CSS:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#my-chart {
display: grid;
grid-template-columns: 40px 600px;
grid-template-rows: 250px 40px;
grid-template-areas:
"y-axis chart"
"x-axis x-axis";
}
#my-chart > table {
grid-area: chart;
}
#my-chart > .y-axis {
grid-area: y-axis;
text-align: center;
writing-mode: tb-rl;
}
#my-chart > .x-axis {
grid-area: x-axis;
text-align: center;
}Result:
I think we I'll add this example to the docs...
Thank you for the example, although I've also understood what you meant in your original comment. This workaround is not acceptable. My solution keeps the semantic value of the table (showing the column headings in the table header row) and displays correctly under console based browsers and could be consumed by machines as well, while the same can't be said about random div's.
Although, I see what you did there with writing-mode. 🚀
Docs updated: https://chartscss.org/components/axes/#axis-title
So is this a "WONTFIX" or is it still on the roadmap?
Basically <table> tags don't support axe titles.
I like your solution, you are using <thead> tag, I don't use this tag at all. Very interesting use-case for this tag.
But when developing a framework, we need to address all the edge cases. You do have a great workaround using the table raw data (located in <thead>), BUT it works only for single-datasets, not for multiple-datasets. When you have many <td> / <th> tags inside your <tr> tag, which one will be used as axe title?
<thead>
<tr>
<th scope="col"> Country </th>
<th scope="col"> # of Gold Medals </th>
<th scope="col"> # of Silver Medals </th>
<th scope="col"> # of Bronze Medals </th>
</tr>
</thead>
For now I prefer to use an externa <div> although I know it's not a semantic solution. But I'm not abandoning your approach, I will have to think how to implement this for all edge cases.
Yes, I was wondering how this could be solved in a more universal way. I agree that this will probably be a special case only supported by single dataset tables and should be switched on with a special option.
Some of the maths will get a little bit more messy due to conditionally having to create space for the axis titles, but I think it could be worth it. I see tables and charts with single datasets pretty often, so this could be something that people should see often.
And of course I love it how it still displays correctly in Links2. ❤️ 🤓
After having seen how easily CSS charting could be done, it kills me to see all these review and comparison sites use .jpeg's or iframes (not long ago Flash) just to display such simple charts.
Basically
<table>tags don't support axe titles.I like your solution, you are using
<thead>tag, I don't use this tag at all. Very interesting use-case for this tag.But when developing a framework, we need to address all the edge cases. You do have a great workaround using the table raw data (located in
<thead>), BUT it works only for single-datasets, not for multiple-datasets. When you have many<td>/<th>tags inside your<tr>tag, which one will be used as axe title?<thead> <tr> <th scope="col"> Country </th> <th scope="col"> # of Gold Medals </th> <th scope="col"> # of Silver Medals </th> <th scope="col"> # of Bronze Medals </th> </tr> </thead>For now I prefer to use an externa
<div>although I know it's not a semantic solution. But I'm not abandoning your approach, I will have to think how to implement this for all edge cases.
Definitely agree with the mentality of "when developing a framework, we need to address all the edge cases ... including the multiple datasets". In this particular case, though, how could it be possible to implement this inside <table>...</table> tag? In the example quoted above, neither of the individual <th> headers, nor the concatenation of them, would be a good y-axis label. The proper y-axis label sentence should be something like "# of medals", which has to be provided by another tag.
Still don't know how to implement this as tables don't support this.
So, I think the extra <div> tag i.e. the Axis Title approach is inevitable. It would end up with a wrapper with 2 more div.axis-title tags. The next question is, could we legitimate the axis title tags into General Anatomy, and even predefine some CSS classes for them? Just like the way Charts.css predefines a set of CSS classes for the beautiful legends.
I have a way to add axis titles using CSS Grid. I need to develop this. But the solution will not require extra <div> elements. It will use existing markup.
Interesting. I hope that "existing markup" is not the <th> headers. The <th> in multiple-datasets can not be used to derive a proper y-axis label.
Simple 2D tables with a single dataset are very common in the real world. I wouldn't mind if we had two separate solutions, so that at least the simple ones could look awesome under links2 or on dumb HTML preview panels (and maybe in HTML emails as well, though not sure if this is something that is being optimized for).