[HN Gopher] Charts.css
___________________________________________________________________
Charts.css
Author : pspeter3
Score : 433 points
Date : 2021-03-17 18:07 UTC (4 hours ago)
(HTM) web link (chartscss.org)
(TXT) w3m dump (chartscss.org)
| crazypython wrote:
| 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 wrote:
| 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 wrote:
| I'm agreeing, not disagreeing...
| eyelidlessness wrote:
| Apologies, I honestly must have stopped reading when I read
| your comment as negative, and missed the last sentence.
| bennettfeely wrote:
| I made something similar a few months ago, a CSS pie chart
| generator
|
| https://bennettfeely.com/csspiechart/
| gervwyk wrote:
| 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
| shijie wrote:
| 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 wrote:
| 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 wrote:
| 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
| williamdclt wrote:
| You might want to look at React Admin or Forest Admin (never
| used these myself, but AFAIK they're the main offerings in
| this space)
| [deleted]
| larodi wrote:
| Intriguing that the HN community is (every time) so excited about
| CSS.
| ggregoire wrote:
| "JavaScript = bad" is a very popular opinion on HN and that
| library allows to draw charts without JavaScript.
| wilsonfiifi wrote:
| This looks nice. I don't see mentioned anywhere in the docs if it
| supports multiline labels.
| ad404b8a372f2b9 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| zuhayeer wrote:
| 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 wrote:
| There's one planned, it's just still under construction:
| https://chartscss.org/charts/pie/
| tiffanyh wrote:
| 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/
| brundolf wrote:
| 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 wrote:
| 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.
| monoideism wrote:
| You can also set a special stylesheet just for printing:
| <link rel="stylesheet" media="print" href="print.css">
| brundolf wrote:
| 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
| danielheath wrote:
| It's responsive exactly the same as css, but it gives you
| composability (reuse of template elements) and size-to-
| fit text (given a container of size X and text Y, render
| the text at the maximum size that fits), which are both
| lacking in html+css.
| tiffanyh wrote:
| 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.
| brundolf wrote:
| Sorry, but I can't really agree
| lucb1e wrote:
| 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=htt
| ps://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.
| mraza007 wrote:
| 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
| lucb1e wrote:
| What was it that you didn't know yet?
|
| As an aside, a friend of mine has already arranged (as a
| joke) the rights to compile and remix any bash snippets I
| post in chat groups in a blog or book. Maybe I should write
| more about this, but then, it's probably most helpful exactly
| because I just drop it in places rather than writing a
| comprehensive work that nobody sits down to read. Still, I'm
| curious what the syntax/feature/pattern is that you found
| useful :)
| mraza007 wrote:
| Hey if you create a book or blog I would love to check out
| your bash scripts
|
| You should definitely try mdbook if you want to keep it in
| a book format as it offers good fulltext search
|
| And I found the entire script interesting I would
| definitely try this once I get to my laptop as I'm
| currently surfing HN on my phone
| mraza007 wrote:
| If you got more bash hacks or one liners or cool commands
| for automation I would love to check it out !!!
| lucb1e wrote:
| Three tools that not everyone seems to know about
| already: jq, progress, and pv.
|
| The pipe viewer (pv) is rather simple but I use it for
| viewing a lot and sometimes rate-limiting transfers.
| Usage is simple: `curl huge-file | pv | some-operation`
| will show you the progress (okay, curl already does...
| but pv works for any pipe input, and pv can work in line
| mode with -l so you can see how many lines (records,
| presumably) it processed).
|
| The progress command is even simpler! Just type progress
| in a random terminal while, in another, you are running
| an operation like cp, gzip, etc. $
| progress [10123] bzip2 /tmp/test
| 32.5% (127.0 MiB / 390.6 MiB)
|
| Use -m to monitor instead of doing a one-shot. This will
| also allow it to calculate the remaining time (for
| anything running at more than a few kilobytes per
| second).
|
| The jq tool takes JSON data and either pretty-prints
| (default) or operates on it: $ echo
| '{"whoami": "root"}' | jq { "whoami":
| "root" } # imagine colored output above
| $ echo '{"whoami": "root"}' | jq .whoami "root"
| $ echo '{"users": [{"name": "abc", ...}, ...]}' | jq
| '.users[].name' # prints the name of all users in
| this array $ curl localhost/api/v1/users |
| jq '.users[] | "\(.name) \(.age)"' | sort -n -k 2 | tail
| -1 && echo "is our oldest user!"
| fastball wrote:
| Needs axis labels! Nice script tho.
| lucb1e wrote:
| 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 wrote:
| 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 wrote:
| 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/
| d33lio wrote:
| Cool, but IMO the chart style sort of looks like garbage?
| [deleted]
| neolog wrote:
| What is the advantage of using CSS over SVG?
| o_m wrote:
| 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.
| fctorial wrote:
| Shameless plug:
|
| https://fctorial.github.io/posts/constexpr.js.html
|
| With it you can use c3/d3/whatever to generate static charts.
| I should probably add more complex chart examples.
| johnx123-up wrote:
| Accessibility. If CSS is disabled, it will render the data
| table.
| sandstrom wrote:
| 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
| sakopov wrote:
| 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.
| brundolf wrote:
| 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)
| CrazyDave wrote:
| This is more of an alternative to SVG than an alternative to
| JS. You could always create charts using plain SVG. Most JS
| charting libraries just do that for you.
| brundolf wrote:
| It is also a bit higher-level than working directly with SVG,
| but a comparison can be made
| bob1029 wrote:
| 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 wrote:
| Perhaps I'm wrong, but it may be impossible to add zoom
| capabilities to charts without JS
| brundolf wrote:
| 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 wrote:
| 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.
| thehappypm wrote:
| You could probably use the :hover: pseudo-class and make it
| work.
| brundolf wrote:
| That would assume a single, harcoded zoom level and
| position
| raylus wrote:
| use js + scroll-wheel observer, profit.
| mssundaram wrote:
| For what project/company?
| bob1029 wrote:
| I am under NDA on specifics. We build automation/workflow
| solutions for the financial sector.
| [deleted]
| chovybizzass wrote:
| This looks clever but probably not practical.
| qbasic_forever wrote:
| 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).
| gervwyk wrote:
| 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).
| sceptically wrote:
| 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 wrote:
| 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.
| johnsonap wrote:
| I think could definitely be a practical use for super simple
| visualizations (think inline sparklines)
| tacone wrote:
| Worth noticing that the cited minified size (71 kb) does not take
| on account gzipping. Gzip would further reduce the payload size.
| crazypython wrote:
| With gzip compression level 7, it's 6kb. With brotli
| compression level 6, it's 5kb. It's 4kb with brotli compression
| max.
| jansan wrote:
| Everything that is sent over the internet is usually gzipped
| automatically, so that does not count.
| nooyurrsdey wrote:
| 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.
| sceptically wrote:
| 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 wrote:
| 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.
| open-source-ux wrote:
| 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...
| rahimnathwani wrote:
| 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/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-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/1JO2RXDQBJffWQ34QIi79...
| johnsonap wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 :)
| andy99 wrote:
| 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
| johnfn wrote:
| Wow, that name is very clever. I can see the temptation ;-)
| soperj wrote:
| 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 wrote:
| 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.
| nt2h9uh238h wrote:
| 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
| 5cents wrote:
| 2. Yes, see for example https://chartscss.org/examples/column/
| and the feature list https://chartscss.org/charts/
| ngokevin wrote:
| 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.
| jordache wrote:
| none of the charts are responsive? WOuld be hard to do with
| purely css?
| TrueDuality wrote:
| 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.
| tambourine_man wrote:
| 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.
| Waterluvian wrote:
| Nothing makes me happier than a UI library with a billion
| examples.
___________________________________________________________________
(page generated 2021-03-17 23:00 UTC)