13 ms·

Charts.css

935 points by pspeter3 6y ago

owens99 6y ago
Is this more performant than JS or SVG?
cachesking 6y ago
I really like this approach and wanted it as a react component: https://github.com/hollanddd/charts-css-react https://github.com/hollanddd/charts-css-react still a wip: //TODO: docs, tests and data.
chovybizzass 6y ago
This looks clever but probably not practical.
- sceptically 6y ago
  It is an amazing proof of concept. Just think of the possibility to easily draw Charts without SVG and the need of JavaScript. There are still some niche use cases for JavaScript disabled browsers.
- onli 6y ago
  Why not? It looks very practical to me. Currently when wanting a chart on a webpage I would fetch the data, transform it to the needed javascript array, add that to the HTML, and then initialize the javascript library painting the chart. With a CSS solution I'd just create a HTML-datatable instead, apply the needed classes and have it be rendered directly. It looks easier, faster and more accessible to me. The example graphs are a bit flat, but that's just default styling. That's likely changeable with CSS, and animations can also be added that way, there are example for that linked in the docs. Awesome project.
  - layoutIfNeeded 6y ago
    Or just use SVG? I’d highly doubt there were browsers supporting these CSS hacks but not supporting SVG.
    - deleted 6y ago
      [deleted]
    - onli 6y ago
      That's not close to the same complexity, is it? With the HTML + CSS solution, all my program has to produce is a HTML table. Very easy. With SVG my program has to create not just a data table, but the custom SVG code to paint the chart, down to each bar. I'm actually doing that on pc-kombo, https://www.pc-kombo.com/us/benchmark/games/cpu/compare?ids%5B%5D=AMD+Ryzen+9+5950X&ids%5B%5D=Intel+Core+i9-10900K#html https://www.pc-kombo.com/us/benchmark/games/cpu/compare?ids%... shows it, the image is SVG. But it's created with https://github.com/DannyBen/victor/ https://github.com/DannyBen/victor/, so my ruby code has to describe all the details of that image, including manually saying how each bar chart should look and where on the coordinate system the text goes. Even with the awesome victor library that wasn't all that easy. Alternative is a JS library that produces the SVG code, but then it's exactly as complicated as with regular JS libraries, it just changes the output.
- johnsonap 6y ago
  I think could definitely be a practical use for super simple visualizations (think inline sparklines)
- gervwyk 6y ago
  This is absolutely practical. Especially with pages with a large number of chart elements. Using larger libs for parklines is impractical. I can totally seeing this being able to extent to the type of chart you would typically put in a PowerPoint.. And how practical is that. Sure not full js charts like amcharts and co, but libs like that ships with 90% of code which 90% of users do not use (sure I’m exaggerating here).
- qbasic_forever 6y ago
  Marketing pages always love to have big pretty bar charts to compare whizbang product with the old standbys. This would be great to make a big hero chart that looks good, doesn't need any javascript, and has amazing SEO (the raw table data is slurped down by google indexing).
ad404b8a372f2b9 6y ago
I'm intrigued, I love CSS-only solutions. The examples are lacking plots with both x & y axes labels though which is among the minimum required functionalities for plotting.
- XCSme 6y ago
  I agree, I was disappointed by the demo: no axis, no hover effects make the charts unusable in their current state. EDIT: It looks like they have hover interaction, but it's not shown on the homepage.
  - hinkley 6y ago
    I'll bet that the front page demo was written before that feature was added and they just haven't gotten around to updating. Documentation is hard.
    - eyelidlessness 6y ago
      > Documentation is hard. It is! But (if you’ll pardon my aside) increasingly my career/nerd goal is to promote documentation as an implementation source of truth. Documentation is hard because it’s seen as an additional task. But it’s possible to design interfaces where documentation is the API, or at least a first class part of it which determines API boundary behavior. It’s hard to do that upfront, but it’s great if you have the right primitives for it.
open-source-ux 6y ago
Related: If you are interested in understanding when to use a particular type of chart and the best practice for labelling charts, the following is an excellent introduction to the topic: Introduction to data visualisation: https://gss.civilservice.gov.uk/policy-store/introduction-to-data-visualisation/ https://gss.civilservice.gov.uk/policy-store/introduction-to...
- rahimnathwani 6y ago
  This guide is nicely written, and mostly useful for tips on labelling, but some of the advice on choosing chart types is bad. There are several examples of column charts used for categorical data, e.g. https://gss.civilservice.gov.uk/wp-content/uploads/2020/04/bar_graph.png https://gss.civilservice.gov.uk/wp-content/uploads/2020/04/b... It's OK to use column charts where each column represents a category if and only if there's some ordinal nature along the x axis, i.e. if either of these are true: A) The categories have a natural ordering (e.g. 'age group'), OR B) The categories are ordered by their value on the y axis (i.e. the most popular 'reason for visiting the UK' is the first column, and the least popular on the right) In other cases, a horizontal bar chart is preferable, as it does not lead the reader to mistakenly infer some ordinal relationship between the categories. For learning how to choose a chart type, people should just buy Say it with charts (https://www.amazon.com/Say-Charts-Executives-Visual-Communication/dp/007136997X https://www.amazon.com/Say-Charts-Executives-Visual-Communic...), read it and complete the exercises. BTW - another thing that bugs me about that chart: the y axis is labelled as 'thousands', but then the tick marks are labelled 2,000 to 16,000. It would better to use 2, 4, 6, ... for the tick marks, and label the axis as 'millions'. Even better would be to use percentages, and just mention N somewhere in the title. Which of these charts is clearest? (top-left is the version in the linked guide, bottom-right is my preferred option): https://docs.google.com/spreadsheets/d/1JO2RXDQBJffWQ34QIi79Xdz8VwRCB87WqyLYbL-nGeU/ https://docs.google.com/spreadsheets/d/1JO2RXDQBJffWQ34QIi79...
andy99 6y ago
Cool! I'll have to take the opportunity to mention my own charts.css[0]. It got some interest on HN last year [1] and I unfortunately dropped the ball and didn't make any revisions based on the good feedback I got. As people pointed out, I tried to give it a "cute" name using unicode which unfortunately makes it harder to search for. This version (OP's) is way more polished and almost certainly more widely useful. But mine had the features of (a) being generated from markdown and (b) defaulting to a list presentation of the data under different styles so the data remained accessible. Having more charting options that don't require javascript to do simple things is a good thing. [0] https://rbitr.github.io/ChartS.css/ https://rbitr.github.io/ChartS.css/ [1] https://news.ycombinator.com/item?id=23270581 https://news.ycombinator.com/item?id=23270581
- johnfn 6y ago
  Wow, that name is very clever. I can see the temptation ;-)
soperj 6y ago
I don't feel like they're far off here. The legend piece looks promising, they just need to be able to label both the axes, and I think you've got everything you need.
- sgt 6y ago
  Agreed, I kept looking through all the examples for labelling of both the axes. It's a bit strange that you would not show the number one thing most people are looking for in a chart.
- privatemonkey 6y ago
  I've experimented with this myself. You can get some nice interactions by using checkboxes and radios instead of list items, but you would need something to hook onto the table row or cell, a class or a data-attribute.
tacone 6y ago
Worth noticing that the cited minified size (71 kb) does not take on account gzipping. Gzip would further reduce the payload size.
- crazypython 6y ago
  With gzip compression level 7, it's 6kb. With brotli compression level 6, it's 5kb. It's 4kb with brotli compression max.
- jansan 6y ago
  Everything that is sent over the internet is usually gzipped automatically, so that does not count.
sceptically 6y ago
Amazing project! This will be very practical for my Blazor application. It's a nice way to prevent ugly JavaScript interop wrapper for charting libraries :-) I will definitely keep an eye on it!
- bob1029 6y ago
  You beat me by 24 minutes. Came here to say how amazing this would be for our Blazor UIs. I really like the idea of applying a simple css style sheet and using my existing @foreach directives to build charts that look this good. I had to double check the installation instructions 2x, because I was certain there was some javascript piece I had missed.
johnsonap 6y ago
Seems like it could be a good option for super simple visualizations without having to rely on something heavier like D3.js (which I personally love using)
savanpatel 6y ago
Looks good but not practical to use. I would love to see some JS support through which I can feed in data. Looking at documentation, I did not find how can I feed data. Looks like I have to calculate it manually or hardcode it. If I missed something, can you point me to the right place in documentation? That's something that would make this useful.
- robertlagrant 6y ago
  What do you mean calculate it manually? Why not just load some data, and blat some html on the screen with the right classes attached?
- onli 6y ago
  You are misunderstanding the technology in play here. This is just HTML, rendered by CSS to look like a chart (if I understood correctly). If you want to change the chart just update the HTML data table that's rendered as chart with JS. There is nothing the CSS files of the project could do to help with that - as no help is needed :)
TrueDuality 6y ago
On the Usage page it shows everything but the result of applying the Chart styling which is one of the first things I want to see in a project like this. Are there any sample graphs using more than 5 data points? I'd also want to see how this scales to reasonable blog-post level graphs which will probably be in the 30+ point range (a data point every five minutes covering a 3 hour range, or hourly for a week, both seem like reasonable minimum data sizes to be able to render well). I love the potential accessibility benefits of using data tables directly styled like this.
crazypython 6y ago
Markup should be semantic data and semantic state; CSS should be styling; and JavaScript should be interactivity. Make your CSS fit your HTML. Don't make HTML fit your CSS. This framework uses semantic native tables properly.
- eyelidlessness 6y ago
  Edit: My bad. I misread the parent comment. My original response preserved below for posterity. - - - I’m on mobile so I can’t dig into the source, but they claim it’s using semantic HTML and the data is accessible. If you disagree with those claims, perhaps sharing your specific objections would make a better case than just vaguely crapping on the project.
  - crazypython 6y ago
    I'm agreeing, not disagreeing...
    - eyelidlessness 6y ago
      Apologies, I honestly must have stopped reading when I read your comment as negative, and missed the last sentence.
zuhayeer 6y ago
This is awesome for sparklines and lighter weight visualizations. The animated donuts had me hoping there would be a pie / donut chart too! Would love to see that.
- brundolf 6y ago
  There's one planned, it's just still under construction: https://chartscss.org/charts/pie/ https://chartscss.org/charts/pie/
tiffanyh 6y ago
This is interesting. I really wish this super small library named Chartist was more actively developed. It's only 10kb in size and generates SVG charts. The huge benefit of SVG is that it's natively responsive and also prints extremely well. Wheres CSS doesn't https://gionkunz.github.io/chartist-js/ https://gionkunz.github.io/chartist-js/
- brundolf 6y ago
  I'm not sure I understand how SVG is more natively responsive than CSS? I also haven't had problems printing with CSS - I maintain my resume as a styled HTML document - though I haven't done a ton of web printing so there could be problem cases I haven't faced
  - eyelidlessness 6y ago
    CSS can certainly be responsive to a degree, if written to be, but there are definitely some features of SVG that go beyond CSS capabilities. This has more to do with the fact that it’s a graphics format—designed for adaptable scaling from the start, with a simple layout model—than anything else. And of course, CSS has some advantages of its own because it has such a huge range of layout options/techniques. Edit: I also maintain my resume as responsive HTML. I haven’t taken the time to address print at all, but having previewed my own print rendering it definitely needs a lot of work before it’s print/PDF ready.
    - brundolf 6y ago
      You still haven't given a specific example of how SVG can be responsive. Are you just talking about proportional scaling (resizing the shapes as the container's size changes)? Because if so you can accomplish that in CSS by using percentages for size/position
      - tiffanyh 6y ago
        Having a chart as an SVG grow or shrink in size based on the size of the browser windows is radically easier with SVG than CSS. Dynamically growing/shrinking a piechart in CSS is much more difficult to implement. Where as with SVG, it just works as-is and no additional effort needs to be done to make it work.
neolog 6y ago
What is the advantage of using CSS over SVG?
- cphoover 6y ago
  It's impressive someone was able to do this... I also do not see the advantage.
- o_m 6y ago
  From the looks of it you can put all the data in a table element without having to use javascript. If it was pure SVG you would have to mix the data and presentation, and it would make accessbility trickier.
  - deleted 6y ago
    [deleted]
- johnx123-up 6y ago
  Accessibility. If CSS is disabled, it will render the data table.
  - thitcanh 6y ago
    If CSS is disabled SVG works just as well. I don’t know where you got the idea that SVG doesn’t work without CSS (or JS, for that matter)
    - ydant 6y ago
      I think you misunderstood the point. The way this library works is the data is embedded in a table, which then gets converted to a chart by CSS - so if the CSS is disabled, the data is just presented as a table of numbers. I'm not sure if SVG can be written so that it gracefully falls back like that. You could generate SVG from the table using JavaScript, of course, and just hide the table with JavaScript.
      - 6y ago
brundolf 6y ago
I love a good CSS-only solution because of its statelessness; makes things much easier to reason about IMO. Of course in this case you'll probably have to generate your HTML in some procedural way anyway, but it's still a neat option to have, especially if you're statically-rendering your pages (you can avoid using JS entirely)
- bob1029 6y ago
  100% agree. CSS-only solutions are extremely attractive. Avoiding use of JS entirely is one my team's core values at this stage. We never got rid of 100% of it, but we did get really damn close using Blazor. Only ~180 lines of javascript interop is required for our entire solution last time I checked. This isn't trivial stuff either... We hand-rolled large file upload/download w/ progress, get client rect, get/set cookies, etc.
  - pcthrowaway 6y ago
    Perhaps I'm wrong, but it may be impossible to add zoom capabilities to charts without JS
    - brundolf 6y ago
      Hmm. You would probably want to implement the actual zoom as a `transform: scale() translate()` regardless, and you could parameterize it with CSS properties like `transform: scale(var(--zoom-scale)) translate(var(--zoom-x), var(--zoom-y))`. But when it comes to getting those numbers and hooking them into the CSS vars, I don't see a way to do that without JS. Certainly, though, the JS could be just a couple lines if you did things this way (mousemove listener on the container, a bit of math to get the relative x/y, and then either a slider or a scroll listener to determine the scale, and these three numbers are plugged directly into the CSS).
      - pcthrowaway 6y ago
        Yeah, I suppose are definitely ways to do some basic zoom with just CSS and very minimal JS modifying the zoom-levels. But then when you take into account data that needs to be inserted for higher resolution at higher zoom levels, it becomes a lot of JS, especially if that data needs to be fetched as the user zooms.
nt2h9uh238h 6y ago
1. Is this substantially faster than JS? (canvas / .svg). Please test this exhaustively. Render time and script evaluation for JS charts is still a huge JS problem. 2. Can this be made interactive, e.g. on mouse-over show exact numbers? Without interactivity, it is still kinda lame
- ngokevin 6y ago
  Yeah, it can be a flip depending on implementation, whether you can beat something that is just pixels and GPU with the DOM + browser rendering engine, which has more layers and unpredictability.
- 5cents 6y ago
  2. Yes, see for example https://chartscss.org/examples/column/ https://chartscss.org/examples/column/ and the feature list https://chartscss.org/charts/ https://chartscss.org/charts/
  - deleted 6y ago
    [deleted]
- privatemonkey 6y ago
  2. You could use the title attribute to accomplish this. The example for mouseover contains a span tag that probably mess it up for a screen reader read so it reads it out twice. Might happen if using the title attribute as well.
tambourine_man 6y ago
This is brilliant. It's all done with clip-path and CSS variables. That said, it's a bit of a hack. The best kind of hack, the crazy smart kind, but still a hack. And as such, there are some visualization glitches here and there you wouldn't get with Canvas or SVG. Still, such a cool idea. I love stretching technologies way beyond their original intent.
- eyelidlessness 6y ago
  Worth noting that clip-path basically is SVG (a subset, it’s the CSS equivalent of the `d` attribute).
Waterluvian 6y ago
Nothing makes me happier than a UI library with a billion examples.
- InnerGargoyle 6y ago
  you mean D3.js?
gervwyk 6y ago
Well done! This looks impressive and really useful. I’ve been looking for a lightweight sprite / spark lib for a while. Clients always, for some reason, are very impressed by little charts in a table row, doing this witha normal size chart lib kills page performance. I was literally including very basic html indicators in a presentation today and client where really impressed! This really solves that issue! And even more. Really great that you van manipulate the elements as css. Most chart libs I’ve dealt with makes non-trivial customization impossible. I’ll probably be building this in as Lowdefy blocks[1]. Just curious, did you consider just branding it as sparks.css / sprites.css or something? Going the spark / sprite route just sets the expectations a lot lower imo. Although congrats, you are really close to fully functional charts here! Really interested to see how far this can go. [1] - https://lowdefy.com https://lowdefy.com
- shijie 6y ago
  Lowdefy looks great. I'm currently looking for something like Django Admin that isn't necessarily a part of Django (I'm an Elixir dev myself). Have you used Lowdefy extensively? Pros and cons? Limitations? Are you involved with the project itself?
  - gervwyk 6y ago
    Yes co-founder here. Been building apps with it for 2 years now. Its really powerful for building data intensive UIs. Have built full scale dashboard solutions for enterprises, buys with a large CRM like 5 companies combined into one system large. Also quite far along building an MRP on it for a small factory. The flexibility is what really makes it super. Client says the UX is not great for a specific task, no problem. Let’s imagine something better. Also scales well when bringing on new devs in the team coz its such a structured way of writing UIs. Limitations, definitely needs a lot more connections for other DBs etc. Also we need first class support for auth and athorization, currently bring your own openid connect provider.
    - mraza007 6y ago
      Hey just found out about LowDefy by reading comments and I’m completely blown away by how you can build webapps just by using YAML I’m definitely going to try this for one of my projects
wilsonfiifi 6y ago
This looks nice. I don’t see mentioned anywhere in the docs if it supports multiline labels.
d33lio 6y ago
Cool, but IMO the chart style sort of looks like garbage?
- deleted 6y ago
  [deleted]
deleted 6y ago
[deleted]
lucb1e 6y ago
Creating a chart about charts.css with charts.css from the command line: ( echo "<table class='charts-css bar show-labels show-heading'>" echo "<caption>Size of Charts.css releases</caption>" for version in $(curl -sS https://github.com/ChartsCSS/charts.css/releases | grep -o releases/tag/[0-9.]* | cut -d/ -f3 | tac); do url=https://cdn.jsdelivr.net/npm/charts.css@$version/dist/charts.min.css size=$(($(curl -sS "$url" | wc -c)/1024)) echo "<tr><th>v$version</th><td style='--size: calc($size/100)'>${size}KiB</td></tr>" done echo "</table><link rel=stylesheet href='$url'>" ) > size-chart.html Result: https://jsfiddle.net/wcfez6oq/ https://jsfiddle.net/wcfez6oq/ Since I couldn't easily find how large it was and wanted to try it out at the same time.
- fastball 6y ago
  Needs axis labels! Nice script tho.
  - lucb1e 6y ago
    The unit is shown on the right for me, maybe it's different in mobile view. For an SI-compliant unit, add iB behind the ${size}k :)
    - fastball 6y ago
      I mean you need to tell me they're payload size (and version numbers). I actually thought it was number of downloads until I rechecked your script.
      - lucb1e 6y ago
        Oh! Now I understand the confusion, good point. Will try to edit something in quickly before the edit timer expires :) Obligatory: https://xkcd.com/833/ https://xkcd.com/833/
- mraza007 6y ago
  You just taught me something cool as someone who loves commandline I’m definitely going to try this and save this as a gist for future reference
nooyurrsdey 6y ago
Looks impressive. Documentation is clean, simple, and easy to read. Library looks small (not sure how many KB) and full features for a basic charts library.
bennettfeely 6y ago
I made something similar a few months ago, a CSS pie chart generator https://bennettfeely.com/csspiechart/ https://bennettfeely.com/csspiechart/
jordache 6y ago
none of the charts are responsive? WOuld be hard to do with purely css?
larodi 6y ago
Intriguing that the HN community is (every time) so excited about CSS.
- ggregoire 6y ago
  "JavaScript = bad" is a very popular opinion on HN and that library allows to draw charts without JavaScript.
sandstrom 6y ago
My favorite chart library is MetricsGraphics. Originally developed by Mozilla, its focus is on beautiful and accurate charts, and displaying data in a good way. https://metricsgraphicsjs.org/examples.htm https://metricsgraphicsjs.org/examples.htm
- windthrown 6y ago
  Thank you for bringing this to my attention. These are fantastic!
- InnerGargoyle 6y ago
  wow, thank you.
- yurishimo 6y ago
  I really like this! I haven't had to build any of these more time-series oriented data charts but gonna keep this in mind if it ever comes up :)
sakopov 6y ago
This is beautiful work! I would love to see more interactive charts though (albeit it might already be possible with some tweaks). For example hovering over data points on line chart could pop a data point label or something similar. Amazing stuff, nevertheless.
nick_urban 6y ago
This seems like it could be a great approach to charting in a Phoenix LiveView application.
Someone1234 6y ago
These don't display at all in Internet Explorer 11. You either get a white square or a series of unreadable numbers. That's a non-starter for my usage unfortunately, as even degraded IE11 support is swing-able, but completely broken means we cannot use it. We're still seeing corporations and government agencies using IE11 on a regular basis. Wikimedia claims 3.9% of their users are still IE11, we're closer to 10%, but we're also majority desktop rather than mobile users which is also really rare in 2020.
- sgt 6y ago
  Best way is to chekc for IE11 in JS and display an error message to the user to use Edge/Chrome/FF/etc. That way at least you don't present something broken to the users.
videogreg93 6y ago
This is just what I needed. Currently using echarts-vue for a personal project but it's just too hard to use for what I need it for. Too bad this doesn't have pie charts yet.
edoceo 6y ago
This is un-f-believable! Sometimes I see some so rad things here that are immediately applicable. I regret that I have but one upvote to give
mothepro 6y ago
Last year I also released a barebones chart maker using only web components [0]. Meaning you can add a chart to your webpage with just an HTML tag. [1] The functionality behind this and others are simple and allow the user to fully stylize however they'd like. 0: https://github.com/mothepro/lit-chart https://github.com/mothepro/lit-chart 1: https://mothepro.github.io/lit-chart/ https://mothepro.github.io/lit-chart/
- InnerGargoyle 6y ago
  looks nice to try, thanks.
AnonHP 6y ago
Tangential comment: I’m on a phone and can’t look deeper into this site for sometime. I’m impressed with how fast the pages load from different links within this site. Anyone know or can describe the internals? Thank you, kind person.
numlock86 6y ago
What's a bit weird is that the front page has a pie chart as animated logo, yet that chart type isn't supported by the lib yet ...
activatedgeek 6y ago
Somehow, I don't see the mention of the Vega visualization grammar [1] as a potential charting library. I think it is incredibly well-done, and is generally intuitive in its API. I've mostly used it through the Python bindings called Altair [2]. The good part is that that general grammar carries over to the browser as a full JSON spec that can be used directly in any language that supports JSON and has a Vega binding (which is pretty much all popular languages). Having said that, I had to unfortunately abandon it because the ad-hoc control with Matplotlib [3] in Python is just infectious. Visual manipulations are far less easy to do in Vega. Being in JSON is also a restrictive though, because it is less interpretable by unstructured bots, where charts.css probably excels by design. [1]: https://vega.github.io https://vega.github.io [2]: https://altair-viz.github.io https://altair-viz.github.io [3]: https://matplotlib.org https://matplotlib.org
- runeks 6y ago
  Big fan of Vega as well. I whipped up this graph[1] in about two weeks without knowing any Vega beforehand. [1] https://cryptomarketdepth.com/#graph https://cryptomarketdepth.com/#graph > Being in JSON is also a restrictive though, because it is less interpretable by unstructured bots, where charts.css probably excels by design. What do you mean by this?
  - InnerGargoyle 6y ago
    oh wow, i really should look into vega now.. i too know little about web technologies and benig handed task to create beautiful graphs in very short period of time... :sigh
  - activatedgeek 6y ago
    I think I just stopped my train of thought and hit reply. I meant to point out that Charts.css relies on having <table> elements in the HTML. Vega relies purely on JSON. This may or may not be of concern. For instance, if you care about bots crawling the website for semantic information, then perhaps the Charts.css way of operating on top of <table>s is preferred. A minor point though.
privatemonkey 6y ago
Awesome. With a build step to do some data conversion I can see this being a more accessible option than rendering with canvas or SVG. Not that tables are that accessible but still, a better option. I think you could make that into the main selling point for your apporoach as it's an overlooked and difficult area of visualisation. Apart from different chart types, examples on how to rig data/image export will make this even more usefull. I currently work on accessibility guidelines for visualisations at a national bureau of statistics. This came just at the right time for me as I'm exploring options to improve accessibility beyond the capabilities of libraries like highcharts, vega, charts.js etc. Don't hesitate to contact me. I'm very interested in the possibilities in this approach.
- mwcampbell 6y ago
  > Not that tables are that accessible What do you find lacking in the accessibility of tables?
  - privatemonkey 6y ago
    The amount of data a table often contain presents an accessibility issue in itself. Simple tables with few datapoints is not a big issue though. I haven't found a good way to highlight the data points in a table in such a way that it is easy to pick up by a screen reader. I would love a summary tag or similar to be part of the table in the same way we now have caption. Anyway, I find the solution with tables way better than other html based chart solutions I've seen in regards to accessibility. They usually have a bunch of divs, spans and other tags that are really hard to follow. Using tables seems so obvious now that I see it. I'm surprised I haven't seen it before. Good job!
  - deleted 6y ago
    [deleted]
nightcracker 6y ago
It's hard to take a "data visualization framework" seriously if virtually all examples have unlabeled unmarked axes.

935 points by pspeter3 6y ago

Is this more performant than JS or SVG?

I really like this approach and wanted it as a react component: https://github.com/hollanddd/charts-css-react https://github.com/hollanddd/charts-css-react still a wip: //TODO: docs, tests and data.

chovybizzass 6y ago

This looks clever but probably not practical.

sceptically 6y ago
It is an amazing proof of concept. Just think of the possibility to easily draw Charts without SVG and the need of JavaScript. There are still some niche use cases for JavaScript disabled browsers.
onli 6y ago
Why not? It looks very practical to me. Currently when wanting a chart on a webpage I would fetch the data, transform it to the needed javascript array, add that to the HTML, and then initialize the javascript library painting the chart. With a CSS solution I'd just create a HTML-datatable instead, apply the needed classes and have it be rendered directly. It looks easier, faster and more accessible to me. The example graphs are a bit flat, but that's just default styling. That's likely changeable with CSS, and animations can also be added that way, there are example for that linked in the docs. Awesome project.
- layoutIfNeeded 6y ago
  Or just use SVG? I’d highly doubt there were browsers supporting these CSS hacks but not supporting SVG.
  - deleted 6y ago
    [deleted]
  - onli 6y ago
    That's not close to the same complexity, is it? With the HTML + CSS solution, all my program has to produce is a HTML table. Very easy. With SVG my program has to create not just a data table, but the custom SVG code to paint the chart, down to each bar. I'm actually doing that on pc-kombo, https://www.pc-kombo.com/us/benchmark/games/cpu/compare?ids%5B%5D=AMD+Ryzen+9+5950X&ids%5B%5D=Intel+Core+i9-10900K#html https://www.pc-kombo.com/us/benchmark/games/cpu/compare?ids%... shows it, the image is SVG. But it's created with https://github.com/DannyBen/victor/ https://github.com/DannyBen/victor/, so my ruby code has to describe all the details of that image, including manually saying how each bar chart should look and where on the coordinate system the text goes. Even with the awesome victor library that wasn't all that easy. Alternative is a JS library that produces the SVG code, but then it's exactly as complicated as with regular JS libraries, it just changes the output.
johnsonap 6y ago
I think could definitely be a practical use for super simple visualizations (think inline sparklines)
gervwyk 6y ago
This is absolutely practical. Especially with pages with a large number of chart elements. Using larger libs for parklines is impractical. I can totally seeing this being able to extent to the type of chart you would typically put in a PowerPoint.. And how practical is that. Sure not full js charts like amcharts and co, but libs like that ships with 90% of code which 90% of users do not use (sure I’m exaggerating here).
qbasic_forever 6y ago
Marketing pages always love to have big pretty bar charts to compare whizbang product with the old standbys. This would be great to make a big hero chart that looks good, doesn't need any javascript, and has amazing SEO (the raw table data is slurped down by google indexing).

ad404b8a372f2b9 6y ago

I'm intrigued, I love CSS-only solutions. The examples are lacking plots with both x & y axes labels though which is among the minimum required functionalities for plotting.

XCSme 6y ago
I agree, I was disappointed by the demo: no axis, no hover effects make the charts unusable in their current state. EDIT: It looks like they have hover interaction, but it's not shown on the homepage.
- hinkley 6y ago
  I'll bet that the front page demo was written before that feature was added and they just haven't gotten around to updating. Documentation is hard.
  - eyelidlessness 6y ago
    > Documentation is hard. It is! But (if you’ll pardon my aside) increasingly my career/nerd goal is to promote documentation as an implementation source of truth. Documentation is hard because it’s seen as an additional task. But it’s possible to design interfaces where documentation is the API, or at least a first class part of it which determines API boundary behavior. It’s hard to do that upfront, but it’s great if you have the right primitives for it.

open-source-ux 6y ago

Related: If you are interested in understanding when to use a particular type of chart and the best practice for labelling charts, the following is an excellent introduction to the topic: Introduction to data visualisation: https://gss.civilservice.gov.uk/policy-store/introduction-to-data-visualisation/ https://gss.civilservice.gov.uk/policy-store/introduction-to...

rahimnathwani 6y ago
This guide is nicely written, and mostly useful for tips on labelling, but some of the advice on choosing chart types is bad. There are several examples of column charts used for categorical data, e.g. https://gss.civilservice.gov.uk/wp-content/uploads/2020/04/bar_graph.png https://gss.civilservice.gov.uk/wp-content/uploads/2020/04/b... It's OK to use column charts where each column represents a category if and only if there's some ordinal nature along the x axis, i.e. if either of these are true: A) The categories have a natural ordering (e.g. 'age group'), OR B) The categories are ordered by their value on the y axis (i.e. the most popular 'reason for visiting the UK' is the first column, and the least popular on the right) In other cases, a horizontal bar chart is preferable, as it does not lead the reader to mistakenly infer some ordinal relationship between the categories. For learning how to choose a chart type, people should just buy Say it with charts (https://www.amazon.com/Say-Charts-Executives-Visual-Communication/dp/007136997X https://www.amazon.com/Say-Charts-Executives-Visual-Communic...), read it and complete the exercises. BTW - another thing that bugs me about that chart: the y axis is labelled as 'thousands', but then the tick marks are labelled 2,000 to 16,000. It would better to use 2, 4, 6, ... for the tick marks, and label the axis as 'millions'. Even better would be to use percentages, and just mention N somewhere in the title. Which of these charts is clearest? (top-left is the version in the linked guide, bottom-right is my preferred option): https://docs.google.com/spreadsheets/d/1JO2RXDQBJffWQ34QIi79Xdz8VwRCB87WqyLYbL-nGeU/ https://docs.google.com/spreadsheets/d/1JO2RXDQBJffWQ34QIi79...

andy99 6y ago

Cool! I'll have to take the opportunity to mention my own charts.css[0]. It got some interest on HN last year [1] and I unfortunately dropped the ball and didn't make any revisions based on the good feedback I got. As people pointed out, I tried to give it a "cute" name using unicode which unfortunately makes it harder to search for. This version (OP's) is way more polished and almost certainly more widely useful. But mine had the features of (a) being generated from markdown and (b) defaulting to a list presentation of the data under different styles so the data remained accessible. Having more charting options that don't require javascript to do simple things is a good thing. [0] https://rbitr.github.io/ChartS.css/ https://rbitr.github.io/ChartS.css/ [1] https://news.ycombinator.com/item?id=23270581 https://news.ycombinator.com/item?id=23270581

johnfn 6y ago
Wow, that name is very clever. I can see the temptation ;-)

soperj 6y ago

I don't feel like they're far off here. The legend piece looks promising, they just need to be able to label both the axes, and I think you've got everything you need.

sgt 6y ago
Agreed, I kept looking through all the examples for labelling of both the axes. It's a bit strange that you would not show the number one thing most people are looking for in a chart.
privatemonkey 6y ago
I've experimented with this myself. You can get some nice interactions by using checkboxes and radios instead of list items, but you would need something to hook onto the table row or cell, a class or a data-attribute.

tacone 6y ago

Worth noticing that the cited minified size (71 kb) does not take on account gzipping. Gzip would further reduce the payload size.

crazypython 6y ago
With gzip compression level 7, it's 6kb. With brotli compression level 6, it's 5kb. It's 4kb with brotli compression max.
jansan 6y ago
Everything that is sent over the internet is usually gzipped automatically, so that does not count.

sceptically 6y ago

Amazing project! This will be very practical for my Blazor application. It's a nice way to prevent ugly JavaScript interop wrapper for charting libraries :-) I will definitely keep an eye on it!

bob1029 6y ago
You beat me by 24 minutes. Came here to say how amazing this would be for our Blazor UIs. I really like the idea of applying a simple css style sheet and using my existing @foreach directives to build charts that look this good. I had to double check the installation instructions 2x, because I was certain there was some javascript piece I had missed.

johnsonap 6y ago

Seems like it could be a good option for super simple visualizations without having to rely on something heavier like D3.js (which I personally love using)

savanpatel 6y ago

Looks good but not practical to use. I would love to see some JS support through which I can feed in data. Looking at documentation, I did not find how can I feed data. Looks like I have to calculate it manually or hardcode it. If I missed something, can you point me to the right place in documentation? That's something that would make this useful.

robertlagrant 6y ago
What do you mean calculate it manually? Why not just load some data, and blat some html on the screen with the right classes attached?
onli 6y ago
You are misunderstanding the technology in play here. This is just HTML, rendered by CSS to look like a chart (if I understood correctly). If you want to change the chart just update the HTML data table that's rendered as chart with JS. There is nothing the CSS files of the project could do to help with that - as no help is needed :)

TrueDuality 6y ago

On the Usage page it shows everything but the result of applying the Chart styling which is one of the first things I want to see in a project like this. Are there any sample graphs using more than 5 data points? I'd also want to see how this scales to reasonable blog-post level graphs which will probably be in the 30+ point range (a data point every five minutes covering a 3 hour range, or hourly for a week, both seem like reasonable minimum data sizes to be able to render well). I love the potential accessibility benefits of using data tables directly styled like this.

crazypython 6y ago

Markup should be semantic data and semantic state; CSS should be styling; and JavaScript should be interactivity. Make your CSS fit your HTML. Don't make HTML fit your CSS. This framework uses semantic native tables properly.

eyelidlessness 6y ago
Edit: My bad. I misread the parent comment. My original response preserved below for posterity. - - - I’m on mobile so I can’t dig into the source, but they claim it’s using semantic HTML and the data is accessible. If you disagree with those claims, perhaps sharing your specific objections would make a better case than just vaguely crapping on the project.
- crazypython 6y ago
  I'm agreeing, not disagreeing...
  - eyelidlessness 6y ago
    Apologies, I honestly must have stopped reading when I read your comment as negative, and missed the last sentence.

zuhayeer 6y ago

This is awesome for sparklines and lighter weight visualizations. The animated donuts had me hoping there would be a pie / donut chart too! Would love to see that.

brundolf 6y ago
There's one planned, it's just still under construction: https://chartscss.org/charts/pie/ https://chartscss.org/charts/pie/

tiffanyh 6y ago

This is interesting. I really wish this super small library named Chartist was more actively developed. It's only 10kb in size and generates SVG charts. The huge benefit of SVG is that it's natively responsive and also prints extremely well. Wheres CSS doesn't https://gionkunz.github.io/chartist-js/ https://gionkunz.github.io/chartist-js/

brundolf 6y ago
I'm not sure I understand how SVG is more natively responsive than CSS? I also haven't had problems printing with CSS - I maintain my resume as a styled HTML document - though I haven't done a ton of web printing so there could be problem cases I haven't faced
- eyelidlessness 6y ago
  CSS can certainly be responsive to a degree, if written to be, but there are definitely some features of SVG that go beyond CSS capabilities. This has more to do with the fact that it’s a graphics format—designed for adaptable scaling from the start, with a simple layout model—than anything else. And of course, CSS has some advantages of its own because it has such a huge range of layout options/techniques. Edit: I also maintain my resume as responsive HTML. I haven’t taken the time to address print at all, but having previewed my own print rendering it definitely needs a lot of work before it’s print/PDF ready.
  - brundolf 6y ago
    You still haven't given a specific example of how SVG can be responsive. Are you just talking about proportional scaling (resizing the shapes as the container's size changes)? Because if so you can accomplish that in CSS by using percentages for size/position
    - tiffanyh 6y ago
      Having a chart as an SVG grow or shrink in size based on the size of the browser windows is radically easier with SVG than CSS. Dynamically growing/shrinking a piechart in CSS is much more difficult to implement. Where as with SVG, it just works as-is and no additional effort needs to be done to make it work.

neolog 6y ago

What is the advantage of using CSS over SVG?

cphoover 6y ago
It's impressive someone was able to do this... I also do not see the advantage.
o_m 6y ago
From the looks of it you can put all the data in a table element without having to use javascript. If it was pure SVG you would have to mix the data and presentation, and it would make accessbility trickier.
- deleted 6y ago
  [deleted]
johnx123-up 6y ago
Accessibility. If CSS is disabled, it will render the data table.
- thitcanh 6y ago
  If CSS is disabled SVG works just as well. I don’t know where you got the idea that SVG doesn’t work without CSS (or JS, for that matter)
  - ydant 6y ago
    I think you misunderstood the point. The way this library works is the data is embedded in a table, which then gets converted to a chart by CSS - so if the CSS is disabled, the data is just presented as a table of numbers. I'm not sure if SVG can be written so that it gracefully falls back like that. You could generate SVG from the table using JavaScript, of course, and just hide the table with JavaScript.
    - 6y ago

brundolf 6y ago

I love a good CSS-only solution because of its statelessness; makes things much easier to reason about IMO. Of course in this case you'll probably have to generate your HTML in some procedural way anyway, but it's still a neat option to have, especially if you're statically-rendering your pages (you can avoid using JS entirely)

bob1029 6y ago
100% agree. CSS-only solutions are extremely attractive. Avoiding use of JS entirely is one my team's core values at this stage. We never got rid of 100% of it, but we did get really damn close using Blazor. Only ~180 lines of javascript interop is required for our entire solution last time I checked. This isn't trivial stuff either... We hand-rolled large file upload/download w/ progress, get client rect, get/set cookies, etc.
- pcthrowaway 6y ago
  Perhaps I'm wrong, but it may be impossible to add zoom capabilities to charts without JS
  - brundolf 6y ago
    Hmm. You would probably want to implement the actual zoom as a `transform: scale() translate()` regardless, and you could parameterize it with CSS properties like `transform: scale(var(--zoom-scale)) translate(var(--zoom-x), var(--zoom-y))`. But when it comes to getting those numbers and hooking them into the CSS vars, I don't see a way to do that without JS. Certainly, though, the JS could be just a couple lines if you did things this way (mousemove listener on the container, a bit of math to get the relative x/y, and then either a slider or a scroll listener to determine the scale, and these three numbers are plugged directly into the CSS).
    - pcthrowaway 6y ago
      Yeah, I suppose are definitely ways to do some basic zoom with just CSS and very minimal JS modifying the zoom-levels. But then when you take into account data that needs to be inserted for higher resolution at higher zoom levels, it becomes a lot of JS, especially if that data needs to be fetched as the user zooms.

nt2h9uh238h 6y ago

1. Is this substantially faster than JS? (canvas / .svg). Please test this exhaustively. Render time and script evaluation for JS charts is still a huge JS problem. 2. Can this be made interactive, e.g. on mouse-over show exact numbers? Without interactivity, it is still kinda lame

ngokevin 6y ago
Yeah, it can be a flip depending on implementation, whether you can beat something that is just pixels and GPU with the DOM + browser rendering engine, which has more layers and unpredictability.
5cents 6y ago
2. Yes, see for example https://chartscss.org/examples/column/ https://chartscss.org/examples/column/ and the feature list https://chartscss.org/charts/ https://chartscss.org/charts/
- deleted 6y ago
  [deleted]
privatemonkey 6y ago
2. You could use the title attribute to accomplish this. The example for mouseover contains a span tag that probably mess it up for a screen reader read so it reads it out twice. Might happen if using the title attribute as well.

tambourine_man 6y ago

This is brilliant. It's all done with clip-path and CSS variables. That said, it's a bit of a hack. The best kind of hack, the crazy smart kind, but still a hack. And as such, there are some visualization glitches here and there you wouldn't get with Canvas or SVG. Still, such a cool idea. I love stretching technologies way beyond their original intent.

eyelidlessness 6y ago
Worth noting that clip-path basically is SVG (a subset, it’s the CSS equivalent of the `d` attribute).

Waterluvian 6y ago

Nothing makes me happier than a UI library with a billion examples.

InnerGargoyle 6y ago
you mean D3.js?

gervwyk 6y ago

Well done! This looks impressive and really useful. I’ve been looking for a lightweight sprite / spark lib for a while. Clients always, for some reason, are very impressed by little charts in a table row, doing this witha normal size chart lib kills page performance. I was literally including very basic html indicators in a presentation today and client where really impressed! This really solves that issue! And even more. Really great that you van manipulate the elements as css. Most chart libs I’ve dealt with makes non-trivial customization impossible. I’ll probably be building this in as Lowdefy blocks[1]. Just curious, did you consider just branding it as sparks.css / sprites.css or something? Going the spark / sprite route just sets the expectations a lot lower imo. Although congrats, you are really close to fully functional charts here! Really interested to see how far this can go. [1] - https://lowdefy.com https://lowdefy.com

shijie 6y ago
Lowdefy looks great. I'm currently looking for something like Django Admin that isn't necessarily a part of Django (I'm an Elixir dev myself). Have you used Lowdefy extensively? Pros and cons? Limitations? Are you involved with the project itself?
- gervwyk 6y ago
  Yes co-founder here. Been building apps with it for 2 years now. Its really powerful for building data intensive UIs. Have built full scale dashboard solutions for enterprises, buys with a large CRM like 5 companies combined into one system large. Also quite far along building an MRP on it for a small factory. The flexibility is what really makes it super. Client says the UX is not great for a specific task, no problem. Let’s imagine something better. Also scales well when bringing on new devs in the team coz its such a structured way of writing UIs. Limitations, definitely needs a lot more connections for other DBs etc. Also we need first class support for auth and athorization, currently bring your own openid connect provider.
  - mraza007 6y ago
    Hey just found out about LowDefy by reading comments and I’m completely blown away by how you can build webapps just by using YAML I’m definitely going to try this for one of my projects

wilsonfiifi 6y ago

This looks nice. I don’t see mentioned anywhere in the docs if it supports multiline labels.

d33lio 6y ago

Cool, but IMO the chart style sort of looks like garbage?

deleted 6y ago
[deleted]

deleted 6y ago

[deleted]

lucb1e 6y ago

Creating a chart about charts.css with charts.css from the command line: ( echo "<table class='charts-css bar show-labels show-heading'>" echo "<caption>Size of Charts.css releases</caption>" for version in $(curl -sS https://github.com/ChartsCSS/charts.css/releases | grep -o releases/tag/[0-9.]* | cut -d/ -f3 | tac); do url=https://cdn.jsdelivr.net/npm/charts.css@$version/dist/charts.min.css size=$(($(curl -sS "$url" | wc -c)/1024)) echo "<tr><th>v$version</th><td style='--size: calc($size/100)'>${size}KiB</td></tr>" done echo "</table><link rel=stylesheet href='$url'>" ) > size-chart.html Result: https://jsfiddle.net/wcfez6oq/ https://jsfiddle.net/wcfez6oq/ Since I couldn't easily find how large it was and wanted to try it out at the same time.

fastball 6y ago
Needs axis labels! Nice script tho.
- lucb1e 6y ago
  The unit is shown on the right for me, maybe it's different in mobile view. For an SI-compliant unit, add iB behind the ${size}k :)
  - fastball 6y ago
    I mean you need to tell me they're payload size (and version numbers). I actually thought it was number of downloads until I rechecked your script.
    - lucb1e 6y ago
      Oh! Now I understand the confusion, good point. Will try to edit something in quickly before the edit timer expires :) Obligatory: https://xkcd.com/833/ https://xkcd.com/833/
mraza007 6y ago
You just taught me something cool as someone who loves commandline I’m definitely going to try this and save this as a gist for future reference

nooyurrsdey 6y ago

Looks impressive. Documentation is clean, simple, and easy to read. Library looks small (not sure how many KB) and full features for a basic charts library.

bennettfeely 6y ago

I made something similar a few months ago, a CSS pie chart generator https://bennettfeely.com/csspiechart/ https://bennettfeely.com/csspiechart/

jordache 6y ago

none of the charts are responsive? WOuld be hard to do with purely css?

larodi 6y ago

Intriguing that the HN community is (every time) so excited about CSS.

ggregoire 6y ago
"JavaScript = bad" is a very popular opinion on HN and that library allows to draw charts without JavaScript.

sandstrom 6y ago

My favorite chart library is MetricsGraphics. Originally developed by Mozilla, its focus is on beautiful and accurate charts, and displaying data in a good way. https://metricsgraphicsjs.org/examples.htm https://metricsgraphicsjs.org/examples.htm

windthrown 6y ago
Thank you for bringing this to my attention. These are fantastic!
InnerGargoyle 6y ago
wow, thank you.
yurishimo 6y ago
I really like this! I haven't had to build any of these more time-series oriented data charts but gonna keep this in mind if it ever comes up :)

sakopov 6y ago

This is beautiful work! I would love to see more interactive charts though (albeit it might already be possible with some tweaks). For example hovering over data points on line chart could pop a data point label or something similar. Amazing stuff, nevertheless.

nick_urban 6y ago

This seems like it could be a great approach to charting in a Phoenix LiveView application.

Someone1234 6y ago

These don't display at all in Internet Explorer 11. You either get a white square or a series of unreadable numbers. That's a non-starter for my usage unfortunately, as even degraded IE11 support is swing-able, but completely broken means we cannot use it. We're still seeing corporations and government agencies using IE11 on a regular basis. Wikimedia claims 3.9% of their users are still IE11, we're closer to 10%, but we're also majority desktop rather than mobile users which is also really rare in 2020.

sgt 6y ago
Best way is to chekc for IE11 in JS and display an error message to the user to use Edge/Chrome/FF/etc. That way at least you don't present something broken to the users.

videogreg93 6y ago

This is just what I needed. Currently using echarts-vue for a personal project but it's just too hard to use for what I need it for. Too bad this doesn't have pie charts yet.

edoceo 6y ago

This is un-f-believable! Sometimes I see some so rad things here that are immediately applicable. I regret that I have but one upvote to give

mothepro 6y ago

Last year I also released a barebones chart maker using only web components [0]. Meaning you can add a chart to your webpage with just an HTML tag. [1] The functionality behind this and others are simple and allow the user to fully stylize however they'd like. 0: https://github.com/mothepro/lit-chart https://github.com/mothepro/lit-chart 1: https://mothepro.github.io/lit-chart/ https://mothepro.github.io/lit-chart/

InnerGargoyle 6y ago
looks nice to try, thanks.

AnonHP 6y ago

Tangential comment: I’m on a phone and can’t look deeper into this site for sometime. I’m impressed with how fast the pages load from different links within this site. Anyone know or can describe the internals? Thank you, kind person.

numlock86 6y ago

What's a bit weird is that the front page has a pie chart as animated logo, yet that chart type isn't supported by the lib yet ...

activatedgeek 6y ago

Somehow, I don't see the mention of the Vega visualization grammar [1] as a potential charting library. I think it is incredibly well-done, and is generally intuitive in its API. I've mostly used it through the Python bindings called Altair [2]. The good part is that that general grammar carries over to the browser as a full JSON spec that can be used directly in any language that supports JSON and has a Vega binding (which is pretty much all popular languages). Having said that, I had to unfortunately abandon it because the ad-hoc control with Matplotlib [3] in Python is just infectious. Visual manipulations are far less easy to do in Vega. Being in JSON is also a restrictive though, because it is less interpretable by unstructured bots, where charts.css probably excels by design. [1]: https://vega.github.io https://vega.github.io [2]: https://altair-viz.github.io https://altair-viz.github.io [3]: https://matplotlib.org https://matplotlib.org

runeks 6y ago
Big fan of Vega as well. I whipped up this graph[1] in about two weeks without knowing any Vega beforehand. [1] https://cryptomarketdepth.com/#graph https://cryptomarketdepth.com/#graph > Being in JSON is also a restrictive though, because it is less interpretable by unstructured bots, where charts.css probably excels by design. What do you mean by this?
- InnerGargoyle 6y ago
  oh wow, i really should look into vega now.. i too know little about web technologies and benig handed task to create beautiful graphs in very short period of time... :sigh
- activatedgeek 6y ago
  I think I just stopped my train of thought and hit reply. I meant to point out that Charts.css relies on having <table> elements in the HTML. Vega relies purely on JSON. This may or may not be of concern. For instance, if you care about bots crawling the website for semantic information, then perhaps the Charts.css way of operating on top of <table>s is preferred. A minor point though.

privatemonkey 6y ago

Awesome. With a build step to do some data conversion I can see this being a more accessible option than rendering with canvas or SVG. Not that tables are that accessible but still, a better option. I think you could make that into the main selling point for your apporoach as it's an overlooked and difficult area of visualisation. Apart from different chart types, examples on how to rig data/image export will make this even more usefull. I currently work on accessibility guidelines for visualisations at a national bureau of statistics. This came just at the right time for me as I'm exploring options to improve accessibility beyond the capabilities of libraries like highcharts, vega, charts.js etc. Don't hesitate to contact me. I'm very interested in the possibilities in this approach.

mwcampbell 6y ago
> Not that tables are that accessible What do you find lacking in the accessibility of tables?
- privatemonkey 6y ago
  The amount of data a table often contain presents an accessibility issue in itself. Simple tables with few datapoints is not a big issue though. I haven't found a good way to highlight the data points in a table in such a way that it is easy to pick up by a screen reader. I would love a summary tag or similar to be part of the table in the same way we now have caption. Anyway, I find the solution with tables way better than other html based chart solutions I've seen in regards to accessibility. They usually have a bunch of divs, spans and other tags that are really hard to follow. Using tables seems so obvious now that I see it. I'm surprised I haven't seen it before. Good job!
- deleted 6y ago
  [deleted]

nightcracker 6y ago

It's hard to take a "data visualization framework" seriously if virtually all examples have unlabeled unmarked axes.