[HN Gopher] Charts.css: CSS data visualization framework
___________________________________________________________________
Charts.css: CSS data visualization framework
Author : homarp
Score : 272 points
Date : 2022-10-30 08:26 UTC (14 hours ago)
(HTM) web link (chartscss.org)
(TXT) w3m dump (chartscss.org)
| darekkay wrote:
| I've been recently searching for an accessible, responsive, CSS-
| only (bar) chart library. Chart.css mostly fulfils those
| criteria, but it doesn't support displaying chart _values_ within
| the chart itself. For example, in the bar chart you can see the
| relation between the values, but you don't see the absolute
| values. This makes the library a poor option for most statistical
| usages, unfortunately. In the end, I've implemented the bar chart
| myself to fulfil all the criteria.
|
| EDIT: As pointed out, displaying values within the chart is
| actually supported via "axis titles".
| alex_suzuki wrote:
| Isn't this actually supported as ,,axis titles"?
| https://chartscss.org/components/axes/#axis-title
| darekkay wrote:
| Wow, I should have RTFM... Thanks! I wished this would be
| included in the chart examples.
| alex_suzuki wrote:
| Yeah, I was looking for it too under bar and column charts,
| and didn't find it. Found a closed Github issue instead.
| :-)
| croes wrote:
| It's not the axis title, the title only gives you the text
| "Progress".
|
| The values are the data in the td tags, the height of the
| bars is in the style tag.
|
| https://chartscss.org/components/data/
| tnolet wrote:
| Not directly related but anecdata. We migrated for chart.js to
| plotly.js to finally bite the bullet and plonk down the $$$ for
| highcharts.
|
| Highcharts is no panacea, but at we just hit performance and
| capability issues really quickly with all the free stuff out
| there.
| jonahx wrote:
| I'd love to hear more details. What specifically was the
| performance bottleneck? Just pure amount of data? Keeping up
| with a stream of data? Other?
| cout wrote:
| Fifteen years ago we were using flot to plot data updated in
| real time. It seems strange to me if the newer frameworks
| wouldn't be able to handle that on newer hardware. Are svg/css
| just less performant than canvas?
| thangngoc89 wrote:
| > Are svg/css just less performant than canvas? Yes. And you
| lose accessibility with canvas so that why there highcharts
| is mentioned here
| jellyksong wrote:
| Our team is in a similar position right now -- I'm curious how
| you decided on Highcharts as opposed to other options like
| Plotly.
| vgeek wrote:
| Is Highcharts that much better than Apache eCharts? EC keeps
| getting larger, so you need to do custom builds and don't init
| the charts until they reach the viewport, but there are _so
| many_ options.
| dmkirwan wrote:
| Similar here, except we had d3.js mixed in there also. We went
| back and forth on the decision to buy highchart (we were a
| small startup with limited $$$) but honestly it paid for itself
| immediately and the built in accessibility helped us meet our
| legal requirements there with zero effort.
|
| My main complaint is that their pricing is a little odd.
| Charging per developer doesn't work well for us when we
| sometimes have 5 devs working on the data vis and other times
| there are none.
| capableweb wrote:
| > My main complaint is that their pricing is a little odd.
| Charging per developer doesn't work well for us when we
| sometimes have 5 devs working on the data vis and other times
| there are none.
|
| Never seen their licensing before and yeah, that's a messy
| license for sure.
|
| The way they put it, it sounds like you can just pay for one
| seat as long as no developers work simultaneously with the
| highcharts API/source code, so you could have just a note
| somewhere who currently "owns" the API/source code license in
| your team, as the cheapest license seems to be 150 USD/seat
| which is way higher than I would expect from a JS library.
|
| > How do I count Developer seats?
|
| > A developer shall mean any person who will be
| simultaneously working with the API and/or source code of our
| software in any capacity.
| ethbr0 wrote:
| On the flipside, that seems enormously generous to smaller
| organizations, who could use 1 license, with the ability to
| dynamically reallocate in hit-by-bus scenarios. And affords
| them maximum organizational flexibility vs locking into a
| per-machine / per-login model.
|
| Would be nice to see more companies offer licensing like
| this on the lower-end.
|
| "Does what it says on the tin" + "Pay us some amount of
| money roughly corresponding to your usage" = "Make it easy
| for a user to pay you money for your product"
| ognarb wrote:
| This is also the buisness model of Qt and I agree this is
| messy.
| johannes1234321 wrote:
| Qt however is a framework touching large parts of the
| codebase. So most developers will touch Qt-rwlated code
| somewhat regularly. Charting code is for many
| applications a small part which in addition is often
| somewhat abstracted away.
| cush wrote:
| Highcharts is an insanely good value
| pookee wrote:
| We've been using https://antv.vision/ for a while now, lots of
| different charts for free. The documentation is a bit rough
| sometimes but manageable !
| dt2m wrote:
| Nice proof of concept. Might be good enough for basic
| visualisations but once you det into labelling it becomes
| unwieldy.
| keithnz wrote:
| Project doesn't look like it has been updated for a couple of
| years.
| aerodog wrote:
| hasn't been updated for 2 years
| strobe999 wrote:
| does it not work?
| RedShift1 wrote:
| If it hasn't had a release in 1 week it's obsolete and must
| be replaced with something that has half the features, breaks
| its API consistently and releases every 2 days.
| djbebs wrote:
| Ah, the good old apple method
| vntok wrote:
| Well no, not really. Half of the examples don't work at all,
| see here https://chartscss.org/examples/
|
| And the documentation pages for those chart types read "This
| chart is still under development. It's not yet included in
| the latest release"... yet the development has stalled since.
| homarp wrote:
| previously discussed:
| https://news.ycombinator.com/item?id=26494819
| maxbaines wrote:
| I can see plenty of times where this can be useful, and hope to
| use it. Related I recently found and use Apache E Charts
| https://echarts.apache.org/en/index.html
| armchairhacker wrote:
| Would love to see CSS + JS charts, which use custom HTML tags and
| injected JavaScript to declaratively create more interactive
| charts, but fallback to something like this if JS is not
| available
| mwilliaams wrote:
| Since when is JS [statistically significantly] not available?
| Even screen readers interpret DOM updates (though graphs are no
| good for blind people anyway).
| capableweb wrote:
| It's gonna depend a lot on your visitors and what kind of
| website you have. HN will have more users than average with
| JS disabled for example, as it's a very technology oriented
| user base. The amount of people who log into HN will be even
| more likely to have JS disabled than the ones that visits
| without logging in.
|
| If you're doing a website about privacy/security and have a
| lot of visitors using Tor, you'll have a even higher user
| base that has JS disabled, as that's the default settings for
| Tor Browser.
|
| If you're doing a website about ponies for your local
| community, you're unlikely to have a high amount of visitors
| with JS disabled.
|
| So TLDR: it depends.
| vntok wrote:
| > It's gonna depend a lot on your visitors and what kind of
| website you have. HN will have more users than average with
| JS disabled for example, as it's a very technology oriented
| user base. The amount of people who log into HN will be
| even more likely to have JS disabled than the ones that
| visits without logging in.
|
| Yes but that's a very transient situation, surely those
| people can reenable JS in less than two clicks to fix their
| browser configuration?
| ailef wrote:
| s/fix/break/
| vntok wrote:
| What do you mean? The website would literally be broken
| by the user's miconfiguration of their browser.
| zasdffaa wrote:
| from https://www.mediawiki.org/wiki/No-JavaScript_notes
|
| 2021: NoScript has between 100,000 and 1,000,000 installs on
| Chrome[1], and approximately 330,000 installs on Firefox[2].
| NoScript is a "recommended extension" by Mozilla, and is one
| of the very few addons available for Mobile Firefox. (newer
| stats, and other reliable sources, would be appreciated.
| Statcounter doesn't yet reveal no-JS usage)
|
| Internal
|
| 2015: ~3% using browsers that do not support JavaScript per
| Analytics/Reports/Clients without JavaScript#Preliminary
| results
|
| 2016: ~7% of visitors to Wikipedia Portal do not request
| JavaScript resources per File:Browsers, Geography, and
| JavaScript Support on Wikipedia Portal.pdf and File:Analysis
| of Wikipedia Portal Traffic and JavaScript Support.pdf
|
| 2020: Per T253033 (methodology in T234865), 13.84% of sub-A
| tier Desktop, and 36.48% sub-A tier mobile web page views are
| from browsers without JS support.
|
| 2021: Measuring the % of edits coming from users without JS
| enabled across all Wikimedia wikis: ~6% of logged-in users
| and ~1% of logged-out users (~5% total). Per T240697.
|
| Perhaps the pervasive use of JS forces people to enable it. I
| disable it and when things work, they are fast and
| wonderfully ad-free (or greatly cut down; I do further ad
| blocking). JS is a security risk IMO.
| johannes1234321 wrote:
| > JS is a security risk IMO.
|
| A network connection is a security risk.
|
| The question is whether the benefits outweighs the risk
| added by enabling it.
|
| For me the benefit of disabling JS is more in privacy and
| disabling annoying user experience. JavaScriot runtimes are
| quite well audited meanwhile.
| zasdffaa wrote:
| And a turing complete language delivered from a third
| party over said network connection to be executed locally
| will exponentially increases that risk, no?
|
| > JavaScriot runtimes are quite well audited meanwhile.
|
| Given (for example) the leftpad trainwreck, is that
| really true?
| johannes1234321 wrote:
| > > JavaScriot runtimes are quite well audited meanwhile.
|
| > Given (for example) the leftpad trainwreck, is that
| really true?
|
| That was that some (quite pointless) code was not
| available anymore as easily. Not a security issue.
| zasdffaa wrote:
| That's entirely irrelevant. It was available, got used,
| and things massively fell over when it was pulled. You've
| given no case to show things have changed - can you
| actually give any evidence that 'JavaScriot runtimes are
| quite well audited'.
| johannes1234321 wrote:
| Correct, leftpad ia completely irrelevant for the
| discussion.
| zasdffaa wrote:
| And helloooo eternal september. You haven't a clue.
| vntok wrote:
| It really was a non-event.
| jastr wrote:
| You can be my first user!
|
| https://postgraphs.com/ - it's an old weekend project of mine
| that I'd like to finish up soon
| winnie_ua wrote:
| It looks like crap on FireFox
| didip wrote:
| I keep wishing that someone will make something like this (since
| my frontend skill is not up there). CSS certainly can get close
| to the metal via the GPU API.
|
| On another note, folks should stop using any time series chart
| library if it's written on top of SVG. Eventually your time
| series will grow dense and Canvas is the only way out.
| malshe wrote:
| Highcharts is so cool. I also think it looks much more polished
| than plotly
| [deleted]
| pphysch wrote:
| Is downsampling not practical?
| didip wrote:
| Downsampling itself requires a good algorithm otherwise you
| risked losing peak/valley data.
| valtism wrote:
| I would be hesitant to use a framework like this for anything
| except basic use-cases. This, as well as other frameworks like
| chart.js are configuration-based. That means they are good for
| the defined features that they support, but as soon as you need
| to do something outside of what the developer has considered you
| will be fighting a losing battle.
|
| I much prefer composition-based charting library. I use react, so
| I like Visx for that.
| Inviz wrote:
| This is a pretty smart implementation. Actually css charts, with
| accessible data. pretty cool
| swyx wrote:
| I keep a list of these for fun: https://github.com/sw-yx/spark-
| joy/blob/master/README.md#lig...
|
| Lightweight Charts/Dataviz
|
| - https://rbitr.github.io/ChartS.css/
|
| - https://chartscss.org/
|
| - Sparkline fonts in text:
| https://github.com/aftertheflood/sparks and
| https://www.scribbletone.com/typefaces/ff-chartwell
|
| - https://vizzuhq.com/
| sings wrote:
| For a slightly different approach, shown[1] will let you
| generate responsive SVG charts ahead of time, so no JS is
| needed. Useful when you have very basic chart needs.
|
| 1. https://stephenhutchings.github.io/shown/
| aww_dang wrote:
| Can anyone share the gotchas of using this ?
| vntok wrote:
| NO update in 2+ years and no support for chart types beyond the
| most basic, for a start. See here for a list of supported
| features https://chartscss.org/development/supported-features/
| franciscop wrote:
| From what I can see with a quick test there's no mouse/pointer
| interaction, which is a basic thing IMHO for graphs to see the
| exact value at each point.
| tech-historian wrote:
| Since multiple chart libraries are on HN's first page right now,
| thought I'd ask a question. Working on a project that requires a
| very specific chart type, which almost no chart frameworks
| provide. Anyone know of a library that offers:
|
| - _VERTICAL_ 100% stacked area chart
|
| - Images can be used as background for each series
|
| - Dynamic - mouseover displays information when hovering over a
| slice of the chart
|
| The only thing I can find is this [1] but it seems to lack key
| features. Currently I've resorted to building a custom chart in
| SVG with js but it's pretty rough.
|
| [1]
| https://docs.anychart.com/Basic_Charts/Stacked/Value/Vertica...
| cube2222 wrote:
| I've seen the other responses already contain ready solutions,
| however in general, if you're in need of custom/non-standard
| graphs, then D3.js is a great library for constructing them,
| providing many common building blocks and a declarative API.
| tech-historian wrote:
| D3 could be the right tool for this. When I first used D3
| years ago, it seemed so incredibly overkill. But maybe it's
| just right for something like this project, with these
| specific requirements.
| beckingz wrote:
| Do note that D3.js is a lower level library, so you will end
| up writing a lot of code to build a chart.
| [deleted]
| cush wrote:
| Why wouldn't D3 work here?
| tech-historian wrote:
| When I first used D3 years ago, it seemed so incredibly
| overkill. But maybe it's just right for something like this
| project, with these specific requirements.
| da25 wrote:
| Check :
| https://echarts.apache.org/examples/en/editor.html?c=area-st...
| owlninja wrote:
| Yep +1 - just swap xAxis and yAxis and you get really close,
| and echarts has lots of customization. I just don't think
| you'll get images for a background with it.
| tech-historian wrote:
| Will look into this, thanks.
| tech-historian wrote:
| Offhand do you know if that offers:
|
| - 100% stacked area (also known as percentage stacked area)
|
| - inverted axis (so it's vertical, not horizontal)
| jgalt212 wrote:
| No box and whiskers. We've been looking for a nice box and
| whiskers with event handlers. Plotly is really nice, but
| licensing is a bit annoying for our limited use case. pygal is
| nice DX-wise and license-wise, but the styling needs a fair
| amount of customization to look more professional.
| visarga wrote:
| No scatter plot?
| CPLX wrote:
| The little logo at the top is cool, but then there's no
| pie/circular chart styles.
| dharmaturtle wrote:
| Looks like its a WIP: https://chartscss.org/charts/pie/
| threatofrain wrote:
| As someone else mentioned down below, this library hasn't
| seen commits in 2 years, so I'd be wary of waiting on the
| progress.
| augasur wrote:
| Has anyone implemented it in their projects?
|
| So far we have been using charts.js for most of the tasks, might
| want to update to something new in the future? Might this be an
| option?
___________________________________________________________________
(page generated 2022-10-30 23:01 UTC)