4 ms·

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

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 https://github.com/apexcharts/apexcharts.js (MIT License)

Spiritus 7y ago
Interesting. Do you know how Apexcharts.js performs with real-time graphs? We're currently using Chart.js via react-chartjs-2 and while it works, it's consuming quite a bit of CPU.
- benmccann 7y ago
  There have been two major changes in Chart.js that will dramatically improve performance in the upcoming 2.9.0 release. We're also adding a section to the documentation about options you can set to improve performance over the defaults. We're hoping to release soon, but there are a couple pending PRs we'd like to review first Also, if you're interested in realtime charts, here's a related plugin I've seen: https://github.com/nagix/chartjs-plugin-streaming https://github.com/nagix/chartjs-plugin-streaming
GordonS 7y ago
Wow, this looks really good! I was looking at different chart libraries recently, don't know how I didn't find Apexcharts, but wish I had!
benmccann 7y ago
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 than probably any SVG library. It's an area we'll continue to work on since it's one of the main reasons to choose a canvas implementation over an SVG implementation. I think the other advantage SVG has can be is if you want to do some advanced interactivity. That can sometimes be easier in SVG.
- cseelus 7y ago
  Thank you for your work on Chart.js. I used it exclusively for a couple of years and still think its great.
- tmd83 7y ago
  So Chart.js doesn't have a way to generate sharp images for print and such purposes?
  - ldad 7y ago
    There's an option that'll increase the resolution... options: { devicePixelRatio: 2 }
  - etimberg 7y ago
    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 https://github.com/chartjs/Chart.js/issues/1350
IshKebab 7y ago
SVG is way slower than canvas though. Not that chartjs is fast.
leeoniya 7y ago
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 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/ https://mourner.github.io/simplify-js/
- etimberg 7y ago
  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 :)
  - leeoniya 7y ago
    sweet, i'll add this. is this mentioned anywhere in the docs? seems non-obvious.
    - etimberg 7y ago
      The option is documented at https://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-source https://www.chartjs.org/docs/latest/axes/cartesian/time.html... but the performance implications aren't. I'll work on adding something there.
- antman 7y ago
  That really looks fast! Does it work in.live mode also?
  - leeoniya 7y ago
    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.

Spiritus 7y ago

Interesting. Do you know how Apexcharts.js performs with real-time graphs? We're currently using Chart.js via react-chartjs-2 and while it works, it's consuming quite a bit of CPU.

benmccann 7y ago
There have been two major changes in Chart.js that will dramatically improve performance in the upcoming 2.9.0 release. We're also adding a section to the documentation about options you can set to improve performance over the defaults. We're hoping to release soon, but there are a couple pending PRs we'd like to review first Also, if you're interested in realtime charts, here's a related plugin I've seen: https://github.com/nagix/chartjs-plugin-streaming https://github.com/nagix/chartjs-plugin-streaming

GordonS 7y ago

Wow, this looks really good! I was looking at different chart libraries recently, don't know how I didn't find Apexcharts, but wish I had!

benmccann 7y ago

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 than probably any SVG library. It's an area we'll continue to work on since it's one of the main reasons to choose a canvas implementation over an SVG implementation. I think the other advantage SVG has can be is if you want to do some advanced interactivity. That can sometimes be easier in SVG.

cseelus 7y ago
Thank you for your work on Chart.js. I used it exclusively for a couple of years and still think its great.
tmd83 7y ago
So Chart.js doesn't have a way to generate sharp images for print and such purposes?
- ldad 7y ago
  There's an option that'll increase the resolution... options: { devicePixelRatio: 2 }
- etimberg 7y ago
  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 https://github.com/chartjs/Chart.js/issues/1350

IshKebab 7y ago

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

leeoniya 7y ago

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 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/ https://mourner.github.io/simplify-js/

etimberg 7y ago
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 :)
- leeoniya 7y ago
  sweet, i'll add this. is this mentioned anywhere in the docs? seems non-obvious.
  - etimberg 7y ago
    The option is documented at https://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-source https://www.chartjs.org/docs/latest/axes/cartesian/time.html... but the performance implications aren't. I'll work on adding something there.
antman 7y ago
That really looks fast! Does it work in.live mode also?
- leeoniya 7y ago
  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.