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.