DEV Community

loading...

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

ben profile image Ben Halpern ・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 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. 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?

Discussion (10)

pic
Editor guide
Collapse
waylonwalker profile image
Waylon Walker

👏 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 %}
Collapse
ben profile image
Ben Halpern Author • Edited

I think this is the right line of thinking.

Collapse
waylonwalker profile image
Waylon Walker

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

Collapse
waylonwalker profile image
Waylon Walker

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]
      ]
    }
});

Collapse
ben profile image
Collapse
skaterdad profile image
Mike

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

Collapse
crimsonmed profile image
Collapse
delta456 profile image
Swastik Baranwal

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

Collapse
waylonwalker profile image
Waylon Walker

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

Collapse
mhsnprvr profile image