In my post yesterday, I inserted a chart using Chart.js. I didn't plan to, but after 5 minutes reading the documentation, I was convinced to try - and it turned out to be easy! Here's how it's done.

The Chat.js documentation and samples are quite good and straightforward. You'll have to Inspect their samples to see the code though.

All you have to do is:

1. In the section you want the chart to be rendered, insert <canvas id="myChart"></canvas>
2. Right at the bottom of the page, add the Chart.js script from a CDN, <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
3. Finally, add the chart code and data. This was what I added, and if you're copying, you'll need to change a few things:
   • type: chart type e.g. horizontalBar, bar, line
   • labels: these go on the vertical axis for the horizontal bar
   • datasets: as many a needed, with data elements matching the number of labels above, each with a name (also called label), and optionally color and border settings
   • options: I only used one to set the horizontal axis label

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Test 1", "Test 2", "Test 3", "Test 4"],
        datasets: [{
            label: "Group A",
            backgroundColor: "rgba(75, 192, 192, 0.2)",
            borderColor: "rgb(75, 192, 192)",
            borderWidth: 2,
            data: [283.864, 332.762, 39.515, 323.369]
        }, {
            label: "Group B",
            backgroundColor: "rgba(153, 102, 255, 0.2)",
            borderColor: "rgb(153, 102, 255)", 
            borderWidth: 2,
            data: [286.322, 31.0102, 40.027, 323.369]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Data'
                }
            }]
        }
    }
});
</script>

Et voilà!