
A Beginner’s Guide to Chart.js - stanulilic
https://www.stanleyulili.com/javascript/beginner-guide-to-chartjs/
======
augstein
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)

~~~
leeoniya
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
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
sweet, i'll add this.

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

~~~
etimberg
The option is documented at
[https://www.chartjs.org/docs/latest/axes/cartesian/time.html...](https://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-
source) but the performance implications aren't. I'll work on adding something
there.

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

~~~
tjwds
> 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/8883b20d5981518bad66497f0466ac...](https://gist.github.com/tjwds/8883b20d5981518bad66497f0466acb5)

~~~
TicklishTiger
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
Yes, this is the point of that code. It's boilerplate to ensure the module
loads in different environments.

~~~
spankalee
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
I'm not sure what you mean. Obviously UMD cannot support native es6 modules
since they're syntactical invalid for non-es6 applications.

~~~
spankalee
The GP wants to import into JS modules, and you said:

> Yes, this is the point of that code. It's boilerplate to ensure the module
> loads in different environments.

but the UDM header does not allow the module to load in JS modules. So I'm not
quite sure what you meant actually. The header does nothing for standard
modules.

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

~~~
a_wild_dandan
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
It looks cool. The only examples I see though are for drawing maps. Any
pointers on how you could draw a x/y chart?

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

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

~~~
jwilber
Thanks. As soon as I finish the readme :)

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

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

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

~~~
rchaud
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
I looked and didn't see Gantt charts. Could the horizontal bar chart be hacked
to do this?

~~~
dgabriel
I would personally recommend Highcharts for that.
[https://www.highcharts.com/gantt/demo](https://www.highcharts.com/gantt/demo)

