在堆叠的条形图的顶部放置标签

Question

在带有折线的条形图上。我想做的是在每个栏的顶部放置一个标题。在下面的示例中，我想将第九行放置在每个条形堆栈顶部的数组中。

要经过顶部的数据。     256.61，643.61，658.11，-445.39，646.11，662.61，-753.39，654.11，662.61，-453.39，654.11，-143.39

https://jsfiddle.net/warwickf/0okrqbdp/5/

html

<canvas id="largeExpenseChart" style="height: 400px;"></canvas>

javascript

var data = [[500,484.21,494.3,492.95,474.88,487.29,469.59,482.95,479.71,447.6,475.78,456.04],[374.39,390.18,380.08,381.44,399.51,387.09,404.8,391.43,394.68,426.78,398.6,418.34],[1669,2182,2167.5,2671,2179.5,2163,2679,2171.5,2163,2679,2171.5,2669],[600,600,600,600,600,600,900,600,600,600,600,900],[200,200,200,200,200,200,200,200,200,200,200,200],[600,0,0,600,0,0,600,0,0,600,0,0],[300,0,0,0,0,0,0,0,0,0,0,0],[256.61,643.61,658.11,0,646.11,662.61,0,654.11,662.61,0,654.11,0],[4243.39,3856.39,3841.88,4945.39,3853.89,3837.38,5253.39,3845.88,3837.39,4953.38,3845.88,4643.38],
[256.61, 643.61, 658.11, -445.39, 646.11, 662.61, -753.39, 654.11, 662.61, -453.39, 654.11, -143.39]];

var label = ["Jun 19","Jul 19","Aug 19","Sep 19","Oct 19","Nov 19","Dec 19","Jan 20","Feb 20","Mar 20","Apr 20","May 20"];

function newExpenseChart(location, data, label) {
    var ctx1 = document.getElementById(location).getContext('2d');
    var mixedChart = new Chart(ctx1, {
        type: 'bar',
        data: {
            datasets: [
                {
                    "type": "line",
                    "fill": false,
                    "label": "Total Expenses",
                    "data": data[8],
                    "borderWidth": 2,
                    "borderColor": '#000000'
                }, {
                    "label": "Interest",
                    "data": data[0],
                    "backgroundColor": ['#F75B5B', '#F75B5B', '#F75B5B', '#F75B5B', '#F75B5B', '#F75B5B', '#F75B5B', '#F75B5B', '#F75B5B', '#F75B5B', '#F75B5B', '#F75B5B']
                }, {
                    "label": "Principal",
                    "data": data[1],
                    "backgroundColor": ['#9D8987', '#9D8987', '#9D8987', '#9D8987', '#9D8987', '#9D8987', '#9D8987', '#9D8987', '#9D8987', '#9D8987', '#9D8987', '#9D8987']
                }, {
                    "label": "Weekly",
                    "data": data[2],
                    "backgroundColor": ['#C2AF8F', '#C2AF8F', '#C2AF8F', '#C2AF8F', '#C2AF8F', '#C2AF8F', '#C2AF8F', '#C2AF8F', '#C2AF8F', '#C2AF8F', '#C2AF8F', '#C2AF8F']
                }, {
                    "label": "Fortnightly",
                    "data": data[3],
                    "backgroundColor": ['#E8DEA9', '#E8DEA9', '#E8DEA9', '#E8DEA9', '#E8DEA9', '#E8DEA9', '#E8DEA9', '#E8DEA9', '#E8DEA9', '#E8DEA9', '#E8DEA9', '#E8DEA9']
                }, {
                    "label": "Monthly",
                    "data": data[4],
                    "backgroundColor": ['#E9EBC3', '#E9EBC3', '#E9EBC3', '#E9EBC3', '#E9EBC3', '#E9EBC3', '#E9EBC3', '#E9EBC3', '#E9EBC3', '#E9EBC3', '#E9EBC3', '#E9EBC3']
                }, {
                    "label": "Quarterly",
                    "data": data[5],
                    "backgroundColor": ['#C4D0BA', '#C4D0BA', '#C4D0BA', '#C4D0BA', '#C4D0BA', '#C4D0BA', '#C4D0BA', '#C4D0BA', '#C4D0BA', '#C4D0BA', '#C4D0BA', '#C4D0BA']
                }, {
                    "label": "Yearly",
                    "data": data[6],
                    "backgroundColor": ['#FF9090', '#FF9090', '#FF9090', '#FF9090', '#FF9090', '#FF9090', '#FF9090', '#FF9090', '#FF9090', '#FF9090', '#FF9090', '#FF9090']
                }, {
                    "label": "Savings",
                    "data": data[7],
                    "backgroundColor": ['#FFFF40', '#FFFF40', '#FFFF40', '#FFFF40', '#FFFF40', '#FFFF40', '#FFFF40', '#FFFF40', '#FFFF40', '#FFFF40', '#FFFF40', '#FFFF40']
                }
            ],
            labels: label
        },
        options: {
            scales: {
                xAxes: [{ stacked: true }],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            showTooltips: false,
            plugins: {
                datalabels: {
                    formatter: (value, ctx) => {                        
                        return value;
                    }
                }
            }
        }
    });
}

newExpenseChart("largeExpenseChart", data, label)