Skip to content
loading...

What's the best charts library with a small bundle size?

twitter logo github logo ・1 min read  

I just made this feature request for DEV...

Allow users to create charts via liquid tag #6362

Using the opentag/closetag liquid tag style used in the katex tag end elswehere I think we should allow users to define charts.

e.g. something like this....

{% chart %}
  type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
{% endchart %}

That is literally a copy/paste from the API for defining [chartjs](https://www.chartjs.org/) functionality and maybe we can come up with an interface that's a little less _codey_. But either way I think if we were to do this it would be super cool.

I mentioned chartjs, but it is [117.7
kB minified and gzipped](https://bundlephobia.com/result?p=chart.js@2.9.3). Now, we should definitely ensure we only load this when needed and not on articles that do not need it, but we should also search for the option that provides us the best experience with the fewest bytes if possible. But we should also find something fairly standard.

**xss**

Of course, this should be compiled and checked in order to prevent cross-site scripting. This goes without saying but will require extra diligence with something like this.

**Bottom line**

I think this would be _super cool_. Let's make sure we get the API right and then give users who want to create charts declaratively something really powerful they can play with.

And looking at some of the popular chart libs, you see some fairly sizeable bundles...

117.7kb gzipped and minified for chart.js

82.6kb gzipped and minified for highcharts

Do you know of any smaller alternatives that are still really useful?

twitter logo DISCUSS (9)
markdown guide
 

πŸ‘ This is Wonderful ✨

By the way I think this idea is amazing! I agree that the format is a bit code-y, wonder if you can have a { % chartjs % } tag that gives full control of everything. Then have a simple interface with good defaults that tend to match the reader's selected theme. I would suggest a few generic formats that would just take csv data as the input, then it could be copy and paste from any relational data. I would suggest at least 4 types; line, barv, barh, and scatter. After those 4 I would lean into whichever charting library you pick for something more complicated. Those 4 can do 90% of what most people need.

Playground

It would also be nice if there was an easy playground. I am not familiar with a lot of them, but c3.js has really nice examples, and you can jump in and edit the json input on any of them. c3js.org/samples/simple_multiple.html

Simple Example

I just put this into excel and pasted it into dev. It would be really nice if this worked, even if it wasn't fully customizable, without a more json like format.

{ % linechart % }
data1   data2
30  50
200 20
100 10
400 40
150 15
250 25
{ % end linechart %}
 

I think this is the right line of thinking.

 

This will bring a whole new community of folks from other blogging platforms over!

 

I often use c3.js. I do quite a bit of python and I find it easy to go from a pandas DataFrame to json to c3.js without needing to go a lot of work.

It looks like c3.js with d3.js is about 120kb. If I remember right d3 is tree shakable and could be bundled down depending on the parts you need.

c3js

Example

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});

 
 

Rich Harris posted about a really clever solution for responsive charts that doesn't need much (or any) JS. He packaged it up as a Svelte component also, if you wanted to use it client side.

dev.to/richharris/a-new-technique-...

 
 

I think Canvas JS can fit though it's big in size but provides a lot of styles and all.

 
Classic DEV Post from Jun 3 '19

Arrow functions break JavaScript parsers

Esoteric musings on JavaScript's ambiguous arrow function

Ben Halpern profile image
A Canadian software developer who thinks he’s funny. He/Him.