6 ms·
Show HN: Chartss.css – accessible HTML/CSS charts with markdown support
- Karupan 6y agoThis looks great! I wanted to do something similar to keep my site JS free, but this looks way better than what I had in mind. Thanks!
- Gys 6y agoInteresting! The project url is a little confusing, I think you should rename to rbitr/ChartSS.css (double S). To match the project name.
- jannes 6y agoThis looks great!! I love the simplicity of the bar charts. I'm just wondering how the line chart is actually more accessible than an inline SVG of the same chart. You go through a lot of trouble creating lots of <div> tags, but you could also just emit an SVG with ARIA annotations (or alternatively some hidden HTML that is read by accessibility tools).
- dubcanada 6y agoI've never tried to read a SVG with a screen reader, do they attempt to read SVG's? I would assume it would just treat it as an image.
- reaperducer 6y agoScreen readers read SVG's. https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/ https://developer.paciellogroup.com/blog/2013/12/using-aria-...
- andy99 6y agoGood point about the line chart. There are a few other ways I considered as well: using a clip-path to make an area chart, or using borders of rotated divs for each segment. I had not seen it done with background gradients the way I did it, and honestly I wanted to try it that way and got caught up in it. I may revisit the other methods and see if I can make something simpler.
- SnowingXIV 6y agoAgreed. This is nice work. Recently dropped in Chart.js for an internal rails application to throw up some charts for users to get a better view of their data on their dashboard and they were blown away. A few simple bar charts and graphs can do wonders.
- mmsimanga 6y agoInteresting the author mentions he is inspired by MVP.css[0]. I am in the process of changing my home page yet again to remove the current CSS framework I used. No more classes. After a few months not touching my site I find don't understand my own web site. Interestingly I still remember HTML elements I learnt in late 90s. I am sticking to styling HTML and will use one of the minimalist CSS frameworks that have been popping up on HN[1][2] of late. I see this can be used with pandoc, I just installed pandoc yesterday to see if I should use pandoc as my static site generator. Look forward to trying this out. [0]https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/ [1]https://github.com/dohliam/dropin-minimal-css https://github.com/dohliam/dropin-minimal-css [2]https://news.ycombinator.com/item?id=23220081 https://news.ycombinator.com/item?id=23220081
- tyre 6y agoI find all of these css framworks baffling. They're like "this simplifies everything all you need is <div class="s-m c-5 m-20 pl-10 ma ta-l"> <p class="fw-b lha mt-4 c-2 f>Hello, World!</p> </> " and…what?? I MVP looks cool, will check that out
- breckenedge 6y agoHeh reminds me of assembly.
- scambier 6y agoI like that and might use it for my markdown note-taking app. However, it seems that there's an alignment issue between the axis' values and their points (or bars) on the graphs. The stacked bars total value is 95, yet it seems to go a bit over 100, and the problem is even more apparent on Line and Scatter plots. Nothing too major to fix I guess. The non rounding on axis values (0, 20, 39.9, ... 99.8) is also a bit weird. Sorry I don't want to sound negative, I'm really interested and will keep an eye on it!
- andy99 6y agoThanks for the feedback - I agree that I need to do some work on how the axes scale and where the ticks go, and I see the bug you are talking about with the axis being greater than the sum. I think it is due to the placement of the tick. The very top of the axis is 99.8 but the label gets placed a bit lower so it looks like that. Will sort that out.
- btbytes 6y agoYou don't have to override the template in the lua code to include the mvp.css file. use --css argument to set the location of the css file. it can even take multiple arguments (one for mvp.css and one for chartss.css). In the current state, your "function Doc(" block upsets existing pandoc workflows. Edit: didn't want to sound harsh with only the criticism :) Thank you for showing how to use lua-filters to do really cool stuff. I've playing with lua-filters, but your code is a clear example of how to extend markdown with a mini-DSL. Edit 2: Sent you a PR on github with what I was suggesting here.
- nathancahill 6y agoAnother JS optional charting library I've been keeping my eye on: Pancake, from the creator of Svelte. Experimental, pre-release: https://pancake-charts.surge.sh https://pancake-charts.surge.sh
- reaperducer 6y agoDocumentation is TODO Why do people do this? If you're going to bother to make a project public with a big page demonstrating what it can do, why would you skip the part where you tell people how? It really comes off as amateur. I have other things to do with my time than reverse-engineer your code.
- kjhughes 6y agoIt really comes off as amateur. I have other things to do with my time than reverse-engineer your code. Perhaps the authors, who were generous enough to share the results of their work, have better things to do than to handhold you through review of their work.
- tomrod 6y agoThen their work probably isn't worthwhile to adopt, given the plethora of alternatives. If their time is limited so that no documentation is produced, dropping bugfixes seem to be next (IME).
- scrollaway 6y agoUnless those authors are specifically trying to get you to adopt their work for whatever reason (sales, good will, etc) and in which case they'd likely have documented it, you are not doing them a favor by adopting their work. You're just benefiting from what they've released. It's like going to a free buffet and complaining there's no napkins. Sure, you can complain, and you're technically correct that there should be napkins. But it's still in bad taste.
- 6y ago
- earthlingdavey 6y ago.md and .css together like peanut-butter and jelly. good job :)
- bloopernova 6y agoThis is really nice, great job! I'm a real sucker for simple markdown text that can be turned into something that non-technical folks can find appealing.
- matthewhartmans 6y agoThis is really nice! Well done OP!
- cfstras 6y agoJust so you know, that name won‘t fly in Europe. Google „SS“ if you want to know why.
- taywrobel 6y agoHow long are we going to “ban” certain abbreviations for? Two generations? Three? It seems absurd that a two letter combination not used for nearly a century is enough to disqualify a name on an entire continent. We won. It’s over. We can reclaim their terms and symbolism now.
- cfstras 6y agoI get where you’re coming from. Just know that at least in Germany, no company will ever use or support your library/product publicly with a name like that. If you don’t care, that’s fine.
- Terretta 6y agoNot saying it sells like hot cakes in Germany, but reclaimed for a while now: https://www.caranddriver.com/chevrolet/ss https://www.caranddriver.com/chevrolet/ss
- ProZsolt 6y agohttps://en.wikipedia.org/wiki/Toyota_Isis https://en.wikipedia.org/wiki/Toyota_Isis It's even funnier because the Islamic State uses lots of Toyota Hilux
- warranty 6y agoIt will fly in Europe you will fly it high with pride. We will see to it.
- jaquers 6y agoFunctionality looks decent, but the 3 different names for this project are a bit too "cute" for my taste. Url is https://rbitr.github.io/ChartS.css/ https://rbitr.github.io/ChartS.css/ It refers to itself as C:greenheart:SS.css (what?) Aka ChartSS.css - clever, but neither descriptive or memorable. Edit: The fact that I can't even rag on the name in the comments due to the emoji makes me feel more justified in my original assessment. :P
- lmayliffe 6y agoYeah, calling something accessible and then sticking an emoji in the name which screws over people with screenreaders is classic.
- SimeVidas 6y agoShouldn’t the charts be keyboard accessible?
- detaro 6y agoWhat do you mean by that? (I would expect that question for focusable elements, but the charts don't appear to have any focus-elements?)
- SimeVidas 6y agoThis article suggests that the individual parts of the chart should be keyboard navigable: https://twitter.com/shepazu/status/1199053319727124486 https://twitter.com/shepazu/status/1199053319727124486
- andy99 6y agoThanks everybody for all the feedback. Lots of things for me to clean up I see - it's great to have people looking at it
- carlinmack 6y agoPlease don't use ultra light font weights, they are not accessible
- ed312 6y agoCouldn't people just set their user agents to ignore or replace lightweight fonts with standard ones?
- dewey 6y agoI guess you are talking about user stylesheets and not user agents. Yes, they could but there's a lot of lightweight fonts you'd have to hardcode. Also that's not possible on (most) mobile browsers and it shouldn't be something people have to do just to be able to read something in the first place.
- lawrencevillain 6y agoYeah the color choices for the graph are questionable too. They definitely don't pass contrast tests.
- WorldMaker 6y agoOne job I got into some fights with marketing and our "design experts" over this because they decided the marketing image of the company was "light and airy" and so they wanted an ultra light font weight everywhere. It was their branding font they wanted for both headers and body text. (The were so focused on ultra-light fonts, to the point where they were even trying to get rid of the option to use strong text in the middle of paragraphs. If Outlook/Word allowed a group policy to disable the Bold button, they'd probably have taken it away. Haha.) It took a lot of convincing that a software developer would know basic typography enough to know it was a bad idea, much less was I able to convey that it was an accessibility nightmare. I had to use some CSS tricks to get that work done and psychologically "show" that things were still "light and airy" while using reasonable font-weights for body text, and in the end they still didn't entirely believe me about the accessibility issues.
- typpo 6y agoThe markdown generation in ingenious. This will integrate well with static site generators, and the charts are extremely lightweight. I posted a Show HN a while back for charting project that is also minimal (zero) dependency, in a sense: https://github.com/typpo/quickchart https://github.com/typpo/quickchart It's a web service that takes a Chart.js config and renders the chart as an image. Downsides compared to this: not accessible, not as lightweight. Upsides: works in email clients (most of which disable flexbox) and other embedding situations, more customization via Chart.js
- andy99 6y agoThanks for sharing this, I like this idea a lot. I had been playing around with using whktml to make image files out of the ChartSS.css charts for situations that require them. Having a web service like this is a cool solution.
- mritchie712 6y agoI might need this at https://seekwell.io/ https://seekwell.io/ soon. I was going to render things with a headless browser, but this would be much simpler. Curious, how do you rate limit? IP address?
- typpo 6y agoYes, the free API is rate limited by IP. Feel free to reach out if I can help (email in profile)
- owens99 6y agoLove the syntax 10 out of 10. Visual design wise it’s not bad, but could be better. If I have some time I would love to contribute some add-one people could use for a different theme of designs.
- Anon4Now 6y ago> Stacked Bar (a pie chart for grownups) That made me laugh, but the scale on the y-axis is odd. The inputs are all integers but the generated tick labels are floats (e.g., <span class="TickLabel" style="--tick-label:'99.8'"></span>).
- lildata 6y agoNice ! For very basic bar charts the meter HTML element could be used but it is ackward to style unfortunately...
- xellisx 6y agohttps://css-tricks.com/making-charts-with-css/ https://css-tricks.com/making-charts-with-css/