Option to label axes about charts.css HOT 15 OPEN

Docs updated: https://chartscss.org/components/axes/#axis-title

from charts.css.

@bkil possible solution using grid, check this out #45

doesn't solve the multiple-datasets issue but at least now I have a simple implementation for axis titles.

from charts.css.

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.

from charts.css.

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).

from charts.css.

@bkil Axis Titles/Labels is in the Roadmap.

Still don't know how to implement this as tables don't support this.

For now, you can use a wrapper <div> with a <table> and axis titles as separate elements.

from charts.css.

The messy, hacky proof of concept you see on the screenshot was produced by this:

• https://github.com/bkil/osm-tooling/blob/0a234fba20bc8d375183feb464b02e59f9e9d83e/src/web/barchart.css#L39

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.

from charts.css.

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:

from charts.css.

I think we I'll add this example to the docs...

from charts.css.

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.

from charts.css.

Although, I see what you did there with writing-mode. 🚀

from charts.css.

So is this a "WONTFIX" or is it still on the roadmap?

from charts.css.

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.

from charts.css.

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.

from charts.css.

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.

from charts.css.

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.

from charts.css.