For a hand-drawn aesthetic chart.js alternative (that uses SVG), check out roughViz.js
A Beginner’s Guide to Chart.js
11–20 of 45 posts
Re: A Beginner’s Guide to Chart.js
#12Earlier quoted context omitted.
That is an UMD bundle. What is more disappointing is that Chartjs itself seems to be written in ES5.
Why it still works, no need to refactor the code for the sake of refactoring if this is free work. Change to ES modules would be welcome though.
They seem to be using Rollup for builds, which supports ESM output, so they wouldn't even need to do any refactoring for that. Couple of configuration changes would suffice.
Re: A Beginner’s Guide to Chart.js
#13Earlier quoted context omitted.
> is all this trickery on top of a library like this one still needed? If the library is imported in the way that the article recommends in step two, it's not actually loaded as an ES6 module. This code checks to see if we're currently acting as a module and accordingly makes sure that the library is available as a global object. See this link for some examples: https://devhints.io/umdjs > I have no idea how to read…
Nowadays, I either include javascript as a module or as a module dependency. I am still not sure if these will work with the given code: As a module: As a module dependency: import * as chart from 'Chart.js';
Yes, this is the point of that code. It's boilerplate to ensure the module loads in different environments.
Re: A Beginner’s Guide to Chart.js
#14Now that we have Javascript modules, is all this trickery on top of a library like this one still needed? This is how the Chart.js code begins: (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Chart = factory()); }(this, (function () { 'use strict'; ... now comes all the code…
This is legacy UMD code to make the file compatible with AMD, CommonJS, and globals, but not standard JS modules.
Please file an issue! Libraries need to upgrade to JS modules ASAP.
Re: A Beginner’s Guide to Chart.js
#15Earlier quoted context omitted.
Nowadays, I either include javascript as a module or as a module dependency. I am still not sure if these will work with the given code: As a module: As a module dependency: import * as chart from 'Chart.js';
Yes, this is the point of that code. It's boilerplate to ensure the module loads in different environments.
UMD does _not_ support standard JS module imports. The UMD code won't detect `exports` or `define` and will write to globals instead of producing any exports.
Re: A Beginner’s Guide to Chart.js
#16Chart.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)
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.
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
Re: A Beginner’s Guide to Chart.js
#17Earlier quoted context omitted.
Why it still works, no need to refactor the code for the sake of refactoring if this is free work. Change to ES modules would be welcome though.
They seem to be using Rollup for builds, which supports ESM output, so they wouldn't even need to do any refactoring for that. Couple of configuration changes would suffice.
I'd be happy to review any PR to improve our rollup & package.json config as long as it's backwards compatible with the documented methods of using Chart.js: https://www.chartjs.org/docs/latest/getting-started/integrat...
Re: A Beginner’s Guide to Chart.js
#18I love chartjs. It's so easy to get started with it and comes with a lot of great features out of the box. I just wish its animation system was a little more extensive like giving me the option to animate ticks and grid lines for eye candy on load.
I like Chart.js as well. I found it very easy to pick up as an ad-hoc Javascript programmer, producing some nice visual depictions of the data coming out of my C/C++ code.
Re: A Beginner’s Guide to Chart.js
#19Chart.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 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.
Re: A Beginner’s Guide to Chart.js
#20For a hand-drawn aesthetic chart.js alternative (that uses SVG), check out roughViz.js https://github.com/jwilber/roughViz
There's a Chart.js plugin that will do that for you as well: https://nagix.github.io/chartjs-plugin-rough/