ChartJS Bar stacked with Line

by King Bethal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="barPlusLine"></canvas>

JavaScript

var data = [{
            label: 'Target',
            data: [21421, 22145, 15014, 15441],
            type: 'line',
            borderColor: '#004368',
            datalabels: {
                display: false
            }
        }, {
            label: 'Online',
            backgroundColor: 'green',
            data: [6310, 5742, 4044, 5564]
        }, {
            label: 'Store',
            backgroundColor: 'red',
            data: [11542, 12400, 12510, 11450]
        }];
        
        
         var options = {
        tooltips: {
            mode: 'label',
            callbacks: {
                label: function (tooltipItem, data) { 
    var type = data.datasets[tooltipItem.datasetIndex].label;
    var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
    var total = 0;
    for (var i = 0; i < data.datasets.length; i++)
        total += data.datasets[i].data[tooltipItem.index];
    if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
        return type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,');
    } else {
        return [type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,'), "Achieved : " + total];
    }
}
            }
        },
        plugins: {
            datalabels: {
                formatter: function (value, ctx) {
    let sum = 0;
    let dataArr = ctx.chart.data.datasets[0].data;
    dataArr.map(data => {
        sum += data;
    });
    let percentage = (value * 100 / sum).toFixed(0) + "%";
    return percentage;
},
font: {
weight: "bold"
},
color: "#fff"
            }
        },
        scales: {
            xAxes: [{
                    stacked: true,
                    gridLines: {
                        display: false
                    }
                }],
            yAxes: [{
                    stacked: true,
                    ticks: {
                        beginAtZero: true,
                        callback: function (value) {
                          ...