Comments (15)
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:
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.
Related Issues (20)
- v1.0.1 seems not compatible with 0.9.0 HOT 4
- Data label upright on pie charts HOT 2
- Second axes breaks Firefox B&W printing
- Replace color-adjust with print-color-adjust
- hidden 'data' in 'area'
- Pie chart tooltip HOT 4
- Avoid spacing in area charts
- Donut pie charts HOT 1
- Pie charts don't support advanced colors
- Divide CSS file in smaller packages?
- Overlapping Bar and Column Chart HOT 1
- Grouped stacked columns
- What are the hurdles to getting pie charts added? HOT 5
- Is there a way to make line thickness uniform for line charts? HOT 5
- Line gets clipped in line chart when value is 100% HOT 4
- Enhancement idea: Can we improve things with css `attr` values? HOT 1
- Scatterplots HOT 1
- Table Data Cells <td> interfering with responsive Table <table> elements (Safari v15 MacOS)
- Absence of percentage label in pie charts
- Which browsers are supported? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from charts.css.