
Show HN: Chartss.css – accessible HTML/CSS charts with markdown support - andy99
https://rbitr.github.io/ChartS.css/
======
mmsimanga
Interesting 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
I 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
Heh reminds me of assembly.

------
jannes
This 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
I'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
Screen readers read SVG's.

[https://developer.paciellogroup.com/blog/2013/12/using-
aria-...](https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-
svg-accessibility/)

------
jaquers
Functionality 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
Yeah, calling something accessible and then sticking an emoji in the name
which screws over people with screenreaders is classic.

------
andy99
Thanks everybody for all the feedback. Lots of things for me to clean up I see
- it's great to have people looking at it

------
typpo
The 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

~~~
mritchie712
I 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
Yes, the free API is rate limited by IP. Feel free to reach out if I can help
(email in profile)

------
scambier
I 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
Thanks 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
You 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.

------
Gys
Interesting! The project url is a little confusing, I think you should rename
to rbitr/ChartSS.css (double S). To match the project name.

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

------
xellisx
[https://css-tricks.com/making-charts-with-css/](https://css-
tricks.com/making-charts-with-css/)

------
carlinmack
Please don't use ultra light font weights, they are not accessible

~~~
ed312
Couldn't people just set their user agents to ignore or replace lightweight
fonts with standard ones?

~~~
dewey
I 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.

------
owens99
Love 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.

------
bloopernova
This 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.

------
Karupan
This 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!

------
SimeVidas
Shouldn’t the charts be keyboard accessible?

~~~
detaro
What 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
This 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)

------
lildata
Nice ! For very basic bar charts the meter HTML element could be used but it
is ackward to style unfortunately...

------
earthlingdavey
.md and .css together like peanut-butter and jelly. good job :)

------
matthewhartmans
This is really nice! Well done OP!

------
nathancahill
Another 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
_Documentation 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
_It 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
Then 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
Unless 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.

~~~
tomrod
If there is no desire to have adoption, then there is no compelling reason to
host publically outside of convenience. We fundamentally agree, I think, with
the difference of our thought being that we have a "show hn" post (I assume
from the author?) which is an invitation to test, critique, and or adopt. Of
course, the OP's relationship to the author flavors this expectation, and I
could be in error.

~~~
danShumway
> If there is no desire to have adoption, then there is no compelling reason
> to host publically outside of convenience.

I get the sentiment, but please don't listen to advice like this. I have
benefited multiple times from small Open Source projects on Github that were
essentially abandoned and undocumented. Sometimes just having source code is
enough. More than one of the projects I'm currently working on are essentially
just forks of permissively licensed, undocumented projects that I found on
Github.

Yes, documentation is very important if you want an actual professional
project that lots of people can use. But I generally encourage people to get
into the habit of just releasing stuff. A permissively licensed project with
no documentation on Github might end up benefiting at least one or two people.
Maybe it won't benefit anyone at all, but at least the possibility is there. A
project that never gets released to anyone is guaranteed to benefit nobody
except the original maintainer.

In general, people are bad at determining what parts of their work have value.
People worry about drowning Github in tiny or unfinished trash-projects, but
my experience has been that it is much easier to filter projects than to find
projects.

If I have a problem, I can spend 2 hours filtering through bad solutions and
reading source code until I get at least a picture of what a solution might
look like. That'll be more enjoyable than spending 2 hours scrolling through
unrelated blog posts or desperately trying to come up with search terms to
find anything anywhere that's applicable to what I'm trying to do.

Documenting > Orphaning > Not Releasing

~~~
tomrod
You know what, that is a completely fair assessment and a fantastic take. Edit
period has passed, so I'd revise my prior stance to be clearer that my point
wasn't advice, but more general motivation/driver assessment. In terms of what
benefits society as a whole, I agree with you completely.

------
cfstras
Just so you know, that name won‘t fly in Europe. Google „SS“ if you want to
know why.

~~~
taywrobel
How 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.

~~~
Terretta
Not 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
[https://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

