8 ms·

Charts.css: CSS data visualization framework

309 points by homarp 4y ago

Inviz 4y ago
This is a pretty smart implementation. Actually css charts, with accessible data. pretty cool
dt2m 4y ago
Nice proof of concept. Might be good enough for basic visualisations but once you det into labelling it becomes unwieldy.
armchairhacker 4y ago
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
- mijowi 4y ago
  Since when is JS [statistically significantly] not available? Even screen readers interpret DOM updates (though graphs are no good for blind people anyway).
  - zasdffaa 4y ago
    from https://www.mediawiki.org/wiki/No-JavaScript_notes 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 4y ago
      > 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 4y ago
        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 4y ago
        > > 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 4y ago
        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 4y ago
        Correct, leftpad ia completely irrelevant for the discussion.
        zasdffaa 4y ago
        And helloooo eternal september. You haven't a clue.
  - capableweb 4y ago
    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 4y ago
      > 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 4y ago
        s/fix/break/
        vntok 4y ago
        What do you mean? The website would literally be broken by the user's miconfiguration of their browser.
- jastr 4y ago
  You can be my first user! https://postgraphs.com/ https://postgraphs.com/ - it’s an old weekend project of mine that I’d like to finish up soon
aerodog 4y ago
hasn't been updated for 2 years
- strobe999 4y ago
  does it not work?
  - RedShift1 4y ago
    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 4y ago
      Ah, the good old apple method
  - vntok 4y ago
    Well no, not really. Half of the examples don't work at all, see here https://chartscss.org/examples/ 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 4y ago
previously discussed: https://news.ycombinator.com/item?id=26494819 https://news.ycombinator.com/item?id=26494819
visarga 4y ago
No scatter plot?
darekkay 4y ago
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 4y ago
  Isn’t this actually supported as „axis titles“? https://chartscss.org/components/axes/#axis-title https://chartscss.org/components/axes/#axis-title
  - darekkay 4y ago
    Wow, I should have RTFM... Thanks! I wished this would be included in the chart examples.
    - alex_suzuki 4y ago
      Yeah, I was looking for it too under bar and column charts, and didn’t find it. Found a closed Github issue instead. :-)
    - croes 4y ago
      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/ https://chartscss.org/components/data/
CPLX 4y ago
The little logo at the top is cool, but then there’s no pie/circular chart styles.
- dharmaturtle 4y ago
  Looks like its a WIP: https://chartscss.org/charts/pie/ https://chartscss.org/charts/pie/
  - threatofrain 4y ago
    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.
tnolet 4y ago
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.
- dmkirwan 4y ago
  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 4y ago
    > 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.
    - ognarb 4y ago
      This is also the buisness model of Qt and I agree this is messy.
      - johannes1234321 4y ago
        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.
tech-historian 4y ago
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/Vertical_Area_Chart https://docs.anychart.com/Basic_Charts/Stacked/Value/Vertica...
- da25 4y ago
  Check : https://echarts.apache.org/examples/en/editor.html?c=area-stack https://echarts.apache.org/examples/en/editor.html?c=area-st...
  - owlninja 4y ago
    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 4y ago
      Will look into this, thanks.
  - tech-historian 4y ago
    Offhand do you know if that offers: - 100% stacked area (also known as percentage stacked area) - inverted axis (so it's vertical, not horizontal)
- cube2222 4y ago
  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.
winnie_ua 4y ago
It looks like crap on FireFox
pookee 4y ago
We've been using https://antv.vision/ https://antv.vision/ for a while now, lots of different charts for free. The documentation is a bit rough sometimes but manageable !
augasur 4y ago
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?
jgalt212 4y ago
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.
aww_dang 4y ago
Can anyone share the gotchas of using this ?
- franciscop 4y ago
  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.
- vntok 4y ago
  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/ https://chartscss.org/development/supported-features/
didip 4y ago
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 4y ago
  Highcharts is so cool. I also think it looks much more polished than plotly
- deleted 4y ago
  [deleted]
- pphysch 4y ago
  Is downsampling not practical?
  - didip 4y ago
    Downsampling itself requires a good algorithm otherwise you risked losing peak/valley data.
maxbaines 4y ago
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 https://echarts.apache.org/en/index.html
swyx 4y ago
I keep a list of these for fun: https://github.com/sw-yx/spark-joy/blob/master/README.md#lightweight-chartsdataviz https://github.com/sw-yx/spark-joy/blob/master/README.md#lig... Lightweight Charts/Dataviz - https://rbitr.github.io/ChartS.css/ https://rbitr.github.io/ChartS.css/ - https://chartscss.org/ https://chartscss.org/ - Sparkline fonts in text: https://github.com/aftertheflood/sparks https://github.com/aftertheflood/sparks and https://www.scribbletone.com/typefaces/ff-chartwell https://www.scribbletone.com/typefaces/ff-chartwell - https://vizzuhq.com/ https://vizzuhq.com/
- sings 4y ago
  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/ https://stephenhutchings.github.io/shown/
  - swyx 4y ago
    added, cheers
keithnz 4y ago
Project doesn't look like it has been updated for a couple of years.
valtism 4y ago
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.

309 points by homarp 4y ago

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

dt2m 4y ago

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

armchairhacker 4y ago

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

mijowi 4y ago
Since when is JS [statistically significantly] not available? Even screen readers interpret DOM updates (though graphs are no good for blind people anyway).
- zasdffaa 4y ago
  from https://www.mediawiki.org/wiki/No-JavaScript_notes 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 4y ago
    > 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 4y ago
      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 4y ago
        > > 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 4y ago
        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 4y ago
        Correct, leftpad ia completely irrelevant for the discussion.
        zasdffaa 4y ago
        And helloooo eternal september. You haven't a clue.
- capableweb 4y ago
  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 4y ago
    > 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 4y ago
      s/fix/break/
      - vntok 4y ago
        What do you mean? The website would literally be broken by the user's miconfiguration of their browser.
jastr 4y ago
You can be my first user! https://postgraphs.com/ https://postgraphs.com/ - it’s an old weekend project of mine that I’d like to finish up soon

aerodog 4y ago

hasn't been updated for 2 years

strobe999 4y ago
does it not work?
- RedShift1 4y ago
  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 4y ago
    Ah, the good old apple method
- vntok 4y ago
  Well no, not really. Half of the examples don't work at all, see here https://chartscss.org/examples/ 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 4y ago

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

visarga 4y ago

No scatter plot?

darekkay 4y ago

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 4y ago
Isn’t this actually supported as „axis titles“? https://chartscss.org/components/axes/#axis-title https://chartscss.org/components/axes/#axis-title
- darekkay 4y ago
  Wow, I should have RTFM... Thanks! I wished this would be included in the chart examples.
  - alex_suzuki 4y ago
    Yeah, I was looking for it too under bar and column charts, and didn’t find it. Found a closed Github issue instead. :-)
  - croes 4y ago
    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/ https://chartscss.org/components/data/

CPLX 4y ago

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

dharmaturtle 4y ago
Looks like its a WIP: https://chartscss.org/charts/pie/ https://chartscss.org/charts/pie/
- threatofrain 4y ago
  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.

tnolet 4y ago

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.

dmkirwan 4y ago
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 4y ago
  > 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.
  - ognarb 4y ago
    This is also the buisness model of Qt and I agree this is messy.
    - johannes1234321 4y ago
      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.

tech-historian 4y ago

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/Vertical_Area_Chart https://docs.anychart.com/Basic_Charts/Stacked/Value/Vertica...

da25 4y ago
Check : https://echarts.apache.org/examples/en/editor.html?c=area-stack https://echarts.apache.org/examples/en/editor.html?c=area-st...
- owlninja 4y ago
  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 4y ago
    Will look into this, thanks.
- tech-historian 4y ago
  Offhand do you know if that offers: - 100% stacked area (also known as percentage stacked area) - inverted axis (so it's vertical, not horizontal)
cube2222 4y ago
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.

winnie_ua 4y ago

It looks like crap on FireFox

pookee 4y ago

We've been using https://antv.vision/ https://antv.vision/ for a while now, lots of different charts for free. The documentation is a bit rough sometimes but manageable !

augasur 4y ago

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?

jgalt212 4y ago

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.

aww_dang 4y ago

Can anyone share the gotchas of using this ?

franciscop 4y ago
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.
vntok 4y ago
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/ https://chartscss.org/development/supported-features/

didip 4y ago

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 4y ago
Highcharts is so cool. I also think it looks much more polished than plotly
deleted 4y ago
[deleted]
pphysch 4y ago
Is downsampling not practical?
- didip 4y ago
  Downsampling itself requires a good algorithm otherwise you risked losing peak/valley data.

maxbaines 4y ago

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 https://echarts.apache.org/en/index.html

swyx 4y ago

I keep a list of these for fun: https://github.com/sw-yx/spark-joy/blob/master/README.md#lightweight-chartsdataviz https://github.com/sw-yx/spark-joy/blob/master/README.md#lig... Lightweight Charts/Dataviz - https://rbitr.github.io/ChartS.css/ https://rbitr.github.io/ChartS.css/ - https://chartscss.org/ https://chartscss.org/ - Sparkline fonts in text: https://github.com/aftertheflood/sparks https://github.com/aftertheflood/sparks and https://www.scribbletone.com/typefaces/ff-chartwell https://www.scribbletone.com/typefaces/ff-chartwell - https://vizzuhq.com/ https://vizzuhq.com/

sings 4y ago
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/ https://stephenhutchings.github.io/shown/
- swyx 4y ago
  added, cheers

keithnz 4y ago

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

valtism 4y ago

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.