from Hacker News

Charts.css

by pspeter3 on 3/17/21, 6:07 PM with 141 comments

• by lucb1e on 3/17/21, 8:49 PM

  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/

  Since I couldn't easily find how large it was and wanted to try it out at the same time.

• by gervwyk on 3/17/21, 8:22 PM

  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

• by andy99 on 3/17/21, 7:18 PM

  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/ [1] https://news.ycombinator.com/item?id=23270581

• by tiffanyh on 3/17/21, 7:58 PM

  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/

• by ad404b8a372f2b9 on 3/17/21, 7:09 PM

  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.

• by activatedgeek on 3/18/21, 6:35 AM

  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 [2]: https://altair-viz.github.io [3]: https://matplotlib.org

• by tambourine_man on 3/17/21, 8:14 PM

  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.

• by open-source-ux on 3/17/21, 7:17 PM

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

• by TrueDuality on 3/17/21, 7:45 PM

  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.

• by privatemonkey on 3/18/21, 8:17 AM

  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.

• by brundolf on 3/17/21, 8:03 PM

  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)

• by soperj on 3/17/21, 7:20 PM

  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.

• by sandstrom on 3/17/21, 10:39 PM

  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

• by neolog on 3/17/21, 8:02 PM

  What is the advantage of using CSS over SVG?

• by numlock86 on 3/18/21, 5:28 AM

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

• by Waterluvian on 3/17/21, 8:14 PM

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

• by johnsonap on 3/17/21, 7:40 PM

  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)

• by nt2h9uh238h on 3/17/21, 8:11 PM

  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

• by sakopov on 3/17/21, 10:39 PM

  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.

• by crazypython on 3/17/21, 7:52 PM

  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.

• by mothepro on 3/18/21, 1:46 AM

  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 1: https://mothepro.github.io/lit-chart/

• by sceptically on 3/17/21, 7:39 PM

  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!

• by nooyurrsdey on 3/17/21, 8:55 PM

  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.

• by cachesking on 3/29/21, 5:17 AM

  I really like this approach and wanted it as a react component: https://github.com/hollanddd/charts-css-react

  still a wip: //TODO: docs, tests and data.

• by bennettfeely on 3/17/21, 9:07 PM

  I made something similar a few months ago, a CSS pie chart generator

  https://bennettfeely.com/csspiechart/

• by larodi on 3/17/21, 9:37 PM

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

• by videogreg93 on 3/18/21, 1:22 AM

  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.

• by zuhayeer on 3/17/21, 7:57 PM

  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.

• by nightcracker on 3/18/21, 9:42 AM

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

• by tacone on 3/17/21, 7:39 PM

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

• by edoceo on 3/18/21, 1:32 AM

  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

• by wilsonfiifi on 3/17/21, 8:22 PM

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

• by nick_urban on 3/18/21, 12:14 AM

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

• by jordache on 3/17/21, 9:26 PM

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

• by AnonHP on 3/18/21, 3:20 AM

  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.

• by owens99 on 3/18/21, 12:24 PM

  Is this more performant than JS or SVG?

• by savanpatel on 3/17/21, 7:41 PM

  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.

• by chovybizzass on 3/17/21, 6:12 PM

  This looks clever but probably not practical.

• by d33lio on 3/17/21, 8:28 PM

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

• by Someone1234 on 3/18/21, 12:21 AM

  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.