Charts.css: CSS data visualization framework | Hacker News Reader

Charts.css: CSS data visualization framework

chartscss.org

309 pointshomarp74 comments

I keep a list of these for fun: https://github.com/sw-yx/spark-joy/blob/master/README.md#lig...

Lightweight Charts/Dataviz

- Sparkline fonts in text: https://github.com/aftertheflood/sparks and https://www.scribbletone.com/typefaces/ff-chartwell

- https://vizzuhq.com/

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/

added, cheers

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.

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.

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

This is also the buisness model of Qt and I agree this is messy.

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.

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"

Our team is in a similar position right now — I’m curious how you decided on Highcharts as opposed to other options like Plotly.

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.

yes

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?

> Are svg/css just less performant than canvas? Yes. And you lose accessibility with canvas so that why there highcharts is mentioned here

yes

Highcharts is an insanely good value

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?

Nice proof of concept. Might be good enough for basic visualisations but once you det into labelling it becomes unwieldy.

This is a pretty smart implementation. Actually css charts, with accessible data. pretty cool

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

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

Check : https://echarts.apache.org/examples/en/editor.html?c=area-st...

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.

Will look into this, thanks.

Offhand do you know if that offers:

- 100% stacked area (also known as percentage stacked area)

- inverted axis (so it's vertical, not horizontal)

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.

Do note that D3.js is a lower level library, so you will end up writing a lot of code to build a chart.

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.

Why wouldn't D3 work here?

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.

Looks like it's all possible that you mentioned:

1) Create a 100% stacked area chart https://www.anychart.com/blog/2020/06/10/stacked-area-chart-...

https://docs.anychart.com/Basic_Charts/Area_Chart + https://docs.anychart.com/Basic_Charts/Stacked/Percent/Area_...

2) Change chart = anychart.area(); to chart = anychart.verticalArea();

3) Tune it up digging into the documentation, for example: https://docs.anychart.com/Common_Settings/ https://docs.anychart.com/Appearance_Settings/ https://docs.anychart.com/Graphics/ etc.

4) Ask Support if not sure re anything (usually pretty fast and helpful): https://www.anychart.com/support/

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

Since when is JS [statistically significantly] not available? Even screen readers interpret DOM updates (though graphs are no good for blind people anyway).

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.

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

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?

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

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

Correct, leftpad ia completely irrelevant for the discussion.

And helloooo eternal september. You haven't a clue.

It really was a non-event.

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.

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

s/fix/break/

What do you mean? The website would literally be broken by the user's miconfiguration of their browser.

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

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.

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.

Highcharts is so cool. I also think it looks much more polished than plotly

Is downsampling not practical?

Downsampling itself requires a good algorithm otherwise you risked losing peak/valley data.

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.

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 !

The little logo at the top is cool, but then there’s no pie/circular chart styles.

Looks like its a WIP: https://chartscss.org/charts/pie/

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.

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?

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

Isn’t this actually supported as „axis titles“? https://chartscss.org/components/axes/#axis-title

Wow, I should have RTFM... Thanks! I wished this would be included in the chart examples.

Yeah, I was looking for it too under bar and column charts, and didn’t find it. Found a closed Github issue instead. :-)

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/

Can anyone share the gotchas of using this ?

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.

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/

hasn't been updated for 2 years

does it not work?

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.

Ah, the good old apple method

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.

Project doesn't look like it has been updated for a couple of years.

previously discussed: https://news.ycombinator.com/item?id=26494819

No scatter plot?

It looks like crap on FireFox

Reply on news.ycombinator.com