A Beginner’s Guide to Chart.js • Hacker News Board

Re: A Beginner’s Guide to Chart.js

#31

Post by leeoniya » Sun, Oct 06, 2019, 5:56 PM UTC

etimberg wrote: post #29

leeoniya wrote: post #27

Earlier quoted context omitted.

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 :)

sweet, i'll add this.

is this mentioned anywhere in the docs? seems non-obvious.

Re: A Beginner’s Guide to Chart.js

#32

Post by leeoniya » Sun, Oct 06, 2019, 5:57 PM UTC

antman wrote: post #28

leeoniya wrote: post #27

Earlier quoted context omitted.

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?

it will. i'm still fiddling with the final api design to make sure it can accomodate the planned features in a logical manner without hacks.

Re: A Beginner’s Guide to Chart.js

#33

Post by etimberg » Sun, Oct 06, 2019, 6:07 PM UTC

leeoniya wrote: post #31

etimberg wrote: post #29

Earlier quoted context omitted.

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 :)

sweet, i'll add this. is this mentioned anywhere in the docs? seems non-obvious.

The option is documented at https://www.chartjs.org/docs/latest/axes/cartesian/time.html... but the performance implications aren't. I'll work on adding something there.

Re: A Beginner’s Guide to Chart.js

#34

Post by ldad » Sun, Oct 06, 2019, 6:12 PM UTC

tmd83 wrote: post #30

benmccann wrote: post #19

Earlier quoted context omitted.

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?

There's an option that'll increase the resolution...

options: { devicePixelRatio: 2 }

Re: A Beginner’s Guide to Chart.js

#35

Post by mrdoops » Sun, Oct 06, 2019, 7:09 PM UTC

What do y'all recommend for frequently updating charts i.e. streaming data sources with histograms, etc?

Re: A Beginner’s Guide to Chart.js

#36

Post by all2 » Sun, Oct 06, 2019, 7:36 PM UTC

I looked and didn't see Gantt charts. Could the horizontal bar chart be hacked to do this?

Re: A Beginner’s Guide to Chart.js

#37

Post by etimberg » Sun, Oct 06, 2019, 7:38 PM UTC

tmd83 wrote: post #30

benmccann wrote: post #19

Earlier quoted context omitted.

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?

For printing, it should be sharp unless you are have specific print CSS. There's a bunch of discussion in https://github.com/chartjs/Chart.js/issues/1350

Re: A Beginner’s Guide to Chart.js

#38

Post by dgabriel » Sun, Oct 06, 2019, 7:40 PM UTC

all2 wrote: post #36

I looked and didn't see Gantt charts. Could the horizontal bar chart be hacked to do this?

I would personally recommend Highcharts for that. https://www.highcharts.com/gantt/demo

Re: A Beginner’s Guide to Chart.js

#39

Post by jwilber » Sun, Oct 06, 2019, 7:59 PM UTC

danso wrote: post #25

jwilber wrote: post #11

For a hand-drawn aesthetic chart.js alternative (that uses SVG), check out roughViz.js https://github.com/jwilber/roughViz

That's very cool; you should submit that as your own Show HN!

Thanks. As soon as I finish the readme :)

Re: A Beginner’s Guide to Chart.js

#40

Post by anon1m0us » Sun, Oct 06, 2019, 10:29 PM UTC

Over the years, I've narrowed my focus to: d3.js via dc.js and crossfilter.js.

This 3 punch combo creates an incredible user experience. The only downside is that dc.js doesn't have all the charts. The interactivity with the basic charts they do have is worth the absence of other types of charts.