Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A Beginner’s Guide to Chart.js

stanleyulili.com

Post reply on HN
Print view View original

21–30 of 45 posts

Re: A Beginner’s Guide to Chart.js

#21

Post by typpo »

I work on a data viz product and we've always struggled with a myriad of charting libraries. IMO Chart.js is one of the best tools for charting that has quickly surpassed existing libraries in aesthetics, ease of use, robust community, etc. Big thanks to the Chart.js team for their work!

I wound up building an open-source web service for rendering Chart.js to images for embedding in static contexts without JS support such as email and chat: https://github.com/typpo/quickchart. Maybe some reading this thread will find it useful.

Re: A Beginner’s Guide to Chart.js

#22

Post by IshKebab »

augstein wrote: post #6

Chart.js still uses the HTML Canvas element, so charts generated with it look blurred when printed or zoomed in. Nowadays I prefer Apexcharts.js, which renders to SVG. https://github.com/apexcharts/apexcharts.js (MIT License)

SVG is way slower than canvas though. Not that chartjs is fast.

Re: A Beginner’s Guide to Chart.js

#23

Post by cseelus »

benmccann wrote: post #19
augstein wrote: post #6

Chart.js still uses the HTML Canvas element, so charts generated with it look blurred when printed or zoomed in. Nowadays I prefer Apexcharts.js, which renders to SVG. https://github.com/apexcharts/apexcharts.js (MIT License)

I think most chart libraries use SVG. There are trade-offs between the two approaches and both have their advantages. One of the places that canvas really shines is performance. In the past I've found Chart.js and some of the faster SVG libraries to be about on par with each other, but the upcoming Chart.js 2.9.0 release has had a couple major performance improvements that I think will make it significantly faster th…

Thank you for your work on Chart.js. I used it exclusively for a couple of years and still think its great.

Re: A Beginner’s Guide to Chart.js

#24

Post by etimberg »

typpo wrote: post #21

I work on a data viz product and we've always struggled with a myriad of charting libraries. IMO Chart.js is one of the best tools for charting that has quickly surpassed existing libraries in aesthetics, ease of use, robust community, etc. Big thanks to the Chart.js team for their work! I wound up building an open-source web service for rendering Chart.js to images for embedding in static contexts without JS support…

That looks super cool!. Feel free to PR that to our list of plugins https://github.com/chartjs/awesome

Re: A Beginner’s Guide to Chart.js

#26

Post by a_wild_dandan »

typpo wrote: post #21

I work on a data viz product and we've always struggled with a myriad of charting libraries. IMO Chart.js is one of the best tools for charting that has quickly surpassed existing libraries in aesthetics, ease of use, robust community, etc. Big thanks to the Chart.js team for their work! I wound up building an open-source web service for rendering Chart.js to images for embedding in static contexts without JS support…

I've been using Uber's graphing libraries, and they're nothing short of stunning.[1] It's easy to get started, and customizing or extending functionality is straightforward, with myriad example to help. And charting is rendering agnostic. SVG? Canvas? You choose. My only gripe is the lack of TypeScript support. I won't touch vanillaJS with a 20 foot pole if I can help, and the the missing type annotations can be painful.

[1] https://deck.gl/ (The navbar dropdown lists all of their libraries for easy exploration.)

Re: A Beginner’s Guide to Chart.js

#27

Post by leeoniya »

augstein wrote: post #6

Chart.js still uses the HTML Canvas element, so charts generated with it look blurred when printed or zoomed in. Nowadays I prefer Apexcharts.js, which renders to SVG. https://github.com/apexcharts/apexcharts.js (MIT License)

i'm working on a micro timeseries plotter that easily handles 150k+ datapoints. it uses canvas but accounts properly for display pixel density, so is as sharp as SVG.

here is how it performs vs Chart.js:

https://github.com/leeoniya/uPlot#performance

i will add Apex charts to the bench list in a day or so

i think the only practical way to get acceptable perf with SVG is to simplify the paths via something like https://mourner.github.io/simplify-js/

Re: A Beginner’s Guide to Chart.js

#28

Post by antman »

leeoniya wrote: post #27
augstein wrote: post #6

Chart.js still uses the HTML Canvas element, so charts generated with it look blurred when printed or zoomed in. Nowadays I prefer Apexcharts.js, which renders to SVG. https://github.com/apexcharts/apexcharts.js (MIT License)

i'm working on a micro timeseries plotter that easily handles 150k+ datapoints. it uses canvas but accounts properly for display pixel density, so is as sharp as SVG. here is how it performs vs Chart.js: https://github.com/leeoniya/uPlot#performance i will add Apex charts to the bench list in a day or so i think the only practical way to get acceptable perf with SVG is to simplify the paths via something like https:/…

That really looks fast! Does it work in.live mode also?

Re: A Beginner’s Guide to Chart.js

#29

Post by etimberg »

leeoniya wrote: post #27
augstein wrote: post #6

Chart.js still uses the HTML Canvas element, so charts generated with it look blurred when printed or zoomed in. Nowadays I prefer Apexcharts.js, which renders to SVG. https://github.com/apexcharts/apexcharts.js (MIT License)

i'm working on a micro timeseries plotter that easily handles 150k+ datapoints. it uses canvas but accounts properly for display pixel density, so is as sharp as SVG. here is how it performs vs Chart.js: https://github.com/leeoniya/uPlot#performance i will add Apex charts to the bench list in a day or so i think the only practical way to get acceptable perf with SVG is to simplify the paths via something like https:/…

If you change the `scales.xAxes[0].ticks.source config option to `'auto'` you can drop ~1s off the render the time. It's still not great, but it is an improvement. I'll take a look through the profile I generated and see if there are any obvious improvements in Chart.js.

Thanks for creating this :)

Re: A Beginner’s Guide to Chart.js

#30

Post by tmd83 »

benmccann wrote: post #19
augstein wrote: post #6

Chart.js still uses the HTML Canvas element, so charts generated with it look blurred when printed or zoomed in. Nowadays I prefer Apexcharts.js, which renders to SVG. https://github.com/apexcharts/apexcharts.js (MIT License)

I think most chart libraries use SVG. There are trade-offs between the two approaches and both have their advantages. One of the places that canvas really shines is performance. In the past I've found Chart.js and some of the faster SVG libraries to be about on par with each other, but the upcoming Chart.js 2.9.0 release has had a couple major performance improvements that I think will make it significantly faster th…

So Chart.js doesn't have a way to generate sharp images for print and such purposes?
Post reply on HN