Chart Js Template

Base for Chart JS

by jimkennelly

HTML

<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@3"></script>
   <canvas id="siloChart" width="400px" height="200px"></canvas>

JavaScript

var siloData = [73,80,0,55,67,49];
             
            var canvas = document.getElementById('siloChart');
            var data = {
                labels: ["Dolo 1", "Dolo 2", "Dolo 3", "MetGrade 4", "MetGrade 5", "LMF 6"],
                datasets: [
                    {
                        label: "Silo Levels",
                        backgroundColor: "rgba(255,99,132,0.2)",
                        borderColor: "rgba(255,99,132,1)",
                        borderWidth: 2,
                        hoverBackgroundColor: "rgba(255,99,132,0.4)",
                        hoverBorderColor: "rgba(255,99,132,1)",
                        data: siloData,
                    }
                ]
            };
            var option = {
                responsive: false,
                "animation": {
                    "duration": 1,
                    "onComplete": function () {
                        var chartInstance = this.chart,
                          ctx = chartInstance.ctx;

                          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                var data = dataset.data[index];
                                ctx.fillText(data, bar._model.x, bar._model.y - 5);
                            });
                        });
                    }
                },
                scales: {
                    yAxes: [{
                        stacked: true,
                        gridLines: {
                            display: true,
                            color:...