Multi Chart with Bar & 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>
<canvas id="multiChart"></canvas>

JavaScript

var data = [{
            label: 'Varience 1',
            data: [15, -6, -6, 7],
            borderColor: '#03A9F4',
            pointBackgroundColor: '#03A9F4',
            pointBorderWidth: 2,
            pointStyle: 'rect',
            type: 'line',
            steppedLine: true,
            borderWidth: 2
        }, {
            label: 'Varience 2',
            data: [24, -2, 3, 19],
            borderColor: '#FF5722',
            pointBackgroundColor: '#FF5722',
            pointBorderWidth: 2,
            pointStyle: 'rect',
            type: 'line',
            steppedLine: true,
            borderWidth: 2
        }, {
            label: 'Available',
            data: [72, 62, 55, 65],
            borderDash: [5, 5],
            borderColor: '#bbb',
            pointBackgroundColor: '#bbb',
            pointBorderWidth: 2,
            borderWidth: 2,
            type: 'line'
        }, {
            label: 'Budget',
            data: [50, 55, 45, 51],
            borderDash: [5, 5],
            borderColor: '#f0ab00',
            pointBackgroundColor: '#fff',
            pointBorderWidth: 2,
            borderWidth: 2,
            type: 'line'
        }, {
            label: 'Actual',
            data: [65, 49, 39, 58],
            backgroundColor: '#607D8B',
            pointBorderWidth: 3,
            borderWidth: 3
        }, {
            label: 'Last Year',
            data: [41, 51, 36, 39],
            borderColor: '#607D8B',
            backgroundColor: 'rgba(96, 125, 139, 0.25)',
            pointBorderWidth: 3,
            borderWidth: 3
        }];

    data.forEach(function (obj) {
        obj.fill = 'false';
    });
    
    
    var options = {
        tooltips: {
            callbacks: {
                label: function tooltipWithoutTotal(tooltipItem, data) {
                    var type = data.datasets[tooltipItem.datasetIndex].label;
                    var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        ...