Creating a chart about charts.css with charts.css from the command line:<p><pre><code> (
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
</code></pre>
Result: <a href="https://jsfiddle.net/wcfez6oq/" rel="nofollow">https://jsfiddle.net/wcfez6oq/</a><p>Since I couldn't easily find how large it was and wanted to try it out at the same time.
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!<p>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.<p>I’ll probably be building this in as Lowdefy blocks[1].<p>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.<p>[1] - <a href="https://lowdefy.com" rel="nofollow">https://lowdefy.com</a>
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.<p>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.<p>Having more charting options that don't require javascript to do simple things is a good thing.<p>[0] <a href="https://rbitr.github.io/ChartS.css/" rel="nofollow">https://rbitr.github.io/ChartS.css/</a>
[1] <a href="https://news.ycombinator.com/item?id=23270581" rel="nofollow">https://news.ycombinator.com/item?id=23270581</a>
This is interesting.<p>I really wish this super small library named Chartist was more actively developed. It's only 10kb in size and generates SVG charts.<p>The huge benefit of SVG is that it's natively responsive and also prints extremely well. Wheres CSS doesn't<p><a href="https://gionkunz.github.io/chartist-js/" rel="nofollow">https://gionkunz.github.io/chartist-js/</a>
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.
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).<p>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.<p>[1]: <a href="https://vega.github.io" rel="nofollow">https://vega.github.io</a>
[2]: <a href="https://altair-viz.github.io" rel="nofollow">https://altair-viz.github.io</a>
[3]: <a href="https://matplotlib.org" rel="nofollow">https://matplotlib.org</a>
This is brilliant. It's all done with clip-path and CSS variables.<p>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.<p>Still, such a cool idea. I love stretching technologies way beyond their original intent.
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:<p><i>Introduction to data visualisation:</i><p><a href="https://gss.civilservice.gov.uk/policy-store/introduction-to-data-visualisation/" rel="nofollow">https://gss.civilservice.gov.uk/policy-store/introduction-to...</a>
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.<p>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).<p>I love the potential accessibility benefits of using data tables directly styled like this.
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.<p>Apart from different chart types, examples on how to rig data/image export will make this even more usefull.<p>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.
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)
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.
My favorite chart library is MetricsGraphics.<p>Originally developed by Mozilla, its focus is on beautiful and accurate charts, and displaying data in a good way.<p><a href="https://metricsgraphicsjs.org/examples.htm" rel="nofollow">https://metricsgraphicsjs.org/examples.htm</a>
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)
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.<p>2. Can this be made interactive, e.g. on mouse-over show exact numbers? Without interactivity, it is still kinda lame
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.
Markup should be semantic data and semantic state; CSS should be styling; and JavaScript should be interactivity.<p>Make your CSS fit your HTML. Don't make HTML fit your CSS. This framework uses semantic native tables properly.
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]<p>The functionality behind this and others are simple and allow the user to fully stylize however they'd like.<p>0: <a href="https://github.com/mothepro/lit-chart" rel="nofollow">https://github.com/mothepro/lit-chart</a>
1: <a href="https://mothepro.github.io/lit-chart/" rel="nofollow">https://mothepro.github.io/lit-chart/</a>
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 :-)<p>I will definitely keep an eye on it!
Looks impressive. Documentation is clean, simple, and easy to read.<p>Library looks small (not sure how many KB) and full features for a basic charts library.
I really like this approach and wanted it as a react component:
<a href="https://github.com/hollanddd/charts-css-react" rel="nofollow">https://github.com/hollanddd/charts-css-react</a><p>still a wip:
//TODO: docs, tests and data.
I made something similar a few months ago, a CSS pie chart generator<p><a href="https://bennettfeely.com/csspiechart/" rel="nofollow">https://bennettfeely.com/csspiechart/</a>
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.
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.
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.
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.<p>If I missed something, can you point me to the right place in documentation?
That's something that would make this useful.
These don't display at all in Internet Explorer 11. You either get a white square or a series of unreadable numbers.<p>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.<p>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.