7 ms·

A Beginner’s Guide to Chart.js

213 points by stanulilic 7y ago

TicklishTiger 7y ago
Now 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 ... I have no idea how to read this, what this means and how to invoke a construct like this.
- fleetfox 7y ago
  That is an UMD bundle. What is more disappointing is that Chartjs itself seems to be written in ES5.
  - ergo14 7y ago
    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.
    - vimslayer 7y ago
      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.
      - benmccann 7y ago
        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/integration.html https://www.chartjs.org/docs/latest/getting-started/integrat...
- tjwds 7y ago
  > 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 https://devhints.io/umdjs > I have no idea how to read this ... I tried to add some comments [0] which will hopefully help! [0] https://gist.github.com/tjwds/8883b20d5981518bad66497f0466acb5 https://gist.github.com/tjwds/8883b20d5981518bad66497f0466ac...
  - TicklishTiger 7y ago
    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: <script type="module" src="Chart.js"></script> As a module dependency: import * as chart from 'Chart.js';
    - ng12 7y ago
      Yes, this is the point of that code. It's boilerplate to ensure the module loads in different environments.
      - spankalee 7y ago
        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.
        ng12 7y ago
        I'm not sure what you mean. Obviously UMD cannot support native es6 modules since they're syntactical invalid for non-es6 applications.
        spankalee 7y ago
- spankalee 7y ago
  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.
Escapado 7y ago
I 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.
- dfhfkslhhj 7y ago
  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.
augstein 7y ago
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.
jwilber 7y ago
For a hand-drawn aesthetic chart.js alternative (that uses SVG), check out roughViz.js https://github.com/jwilber/roughViz https://github.com/jwilber/roughViz
- benmccann 7y ago
  There's a Chart.js plugin that will do that for you as well: https://nagix.github.io/chartjs-plugin-rough/ https://nagix.github.io/chartjs-plugin-rough/
- danso 7y ago
  That's very cool; you should submit that as your own Show HN!
  - jwilber 7y ago
    Thanks. As soon as I finish the readme :)
typpo 7y ago
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 https://github.com/typpo/quickchart. Maybe some reading this thread will find it useful.
- etimberg 7y ago
  That looks super cool!. Feel free to PR that to our list of plugins https://github.com/chartjs/awesome https://github.com/chartjs/awesome
- a_wild_dandan 7y ago
  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/ https://deck.gl/ (The navbar dropdown lists all of their libraries for easy exploration.)
  - benmccann 7y ago
    It looks cool. The only examples I see though are for drawing maps. Any pointers on how you could draw a x/y chart?
mrdoops 7y ago
What do y'all recommend for frequently updating charts i.e. streaming data sources with histograms, etc?
- rchaud 7y ago
  Highcharts would be my goto for live data charts that updated continuously. The framework is free to use for non-commercial or personal projects via a CC license: https://www.highcharts.com/docs/working-with-data/live-data https://www.highcharts.com/docs/working-with-data/live-data It's a popular framework, so a lot of my questions were answered on Stack Overflow.
all2 7y ago
I looked and didn't see Gantt charts. Could the horizontal bar chart be hacked to do this?
- dgabriel 7y ago
  I would personally recommend Highcharts for that. https://www.highcharts.com/gantt/demo https://www.highcharts.com/gantt/demo
anon1m0us 7y ago
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.

213 points by stanulilic 7y ago

Now 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 ... I have no idea how to read this, what this means and how to invoke a construct like this.

fleetfox 7y ago
That is an UMD bundle. What is more disappointing is that Chartjs itself seems to be written in ES5.
- ergo14 7y ago
  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.
  - vimslayer 7y ago
    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.
    - benmccann 7y ago
      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/integration.html https://www.chartjs.org/docs/latest/getting-started/integrat...
tjwds 7y ago
> 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 https://devhints.io/umdjs > I have no idea how to read this ... I tried to add some comments [0] which will hopefully help! [0] https://gist.github.com/tjwds/8883b20d5981518bad66497f0466acb5 https://gist.github.com/tjwds/8883b20d5981518bad66497f0466ac...
- TicklishTiger 7y ago
  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: <script type="module" src="Chart.js"></script> As a module dependency: import * as chart from 'Chart.js';
  - ng12 7y ago
    Yes, this is the point of that code. It's boilerplate to ensure the module loads in different environments.
    - spankalee 7y ago
      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.
      - ng12 7y ago
        I'm not sure what you mean. Obviously UMD cannot support native es6 modules since they're syntactical invalid for non-es6 applications.
        spankalee 7y ago
spankalee 7y ago
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.

Escapado 7y ago

I 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.

dfhfkslhhj 7y ago
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.

augstein 7y ago

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.

jwilber 7y ago

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

benmccann 7y ago
There's a Chart.js plugin that will do that for you as well: https://nagix.github.io/chartjs-plugin-rough/ https://nagix.github.io/chartjs-plugin-rough/
danso 7y ago
That's very cool; you should submit that as your own Show HN!
- jwilber 7y ago
  Thanks. As soon as I finish the readme :)

typpo 7y ago

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 https://github.com/typpo/quickchart. Maybe some reading this thread will find it useful.

etimberg 7y ago
That looks super cool!. Feel free to PR that to our list of plugins https://github.com/chartjs/awesome https://github.com/chartjs/awesome
a_wild_dandan 7y ago
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/ https://deck.gl/ (The navbar dropdown lists all of their libraries for easy exploration.)
- benmccann 7y ago
  It looks cool. The only examples I see though are for drawing maps. Any pointers on how you could draw a x/y chart?

mrdoops 7y ago

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

rchaud 7y ago
Highcharts would be my goto for live data charts that updated continuously. The framework is free to use for non-commercial or personal projects via a CC license: https://www.highcharts.com/docs/working-with-data/live-data https://www.highcharts.com/docs/working-with-data/live-data It's a popular framework, so a lot of my questions were answered on Stack Overflow.

all2 7y ago

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

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

anon1m0us 7y ago

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.