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?
Top comments (10)
👏 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.
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
Nice thoughts
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've always used chartist (minified 11.2kb)
github.com/gionkunz/chartist-js/bl...
gionkunz.github.io/chartist-js/
I think Canvas JS can fit though it's big in size but provides a lot of styles and all.
uplot
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....
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.