ChartJS2VariableBars

by Bernat Comerma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="jsDivSalaryChart" data-x-axis="1321,1472,1623,1774,1925,2076,2227,2378,2529,2680" data-y-axis="1,0,1,2,3,7,3,0,2,0" data-q1="#FEE7D8" data-q2="#FCCDAF" data-q3="#FAA771" data-q4="#F88132">
    <canvas></canvas>
 </div>
 
 <div class="jsDivSalaryChart" data-x-axis="3453,3476,3499,3522,3545,3568,3591,3614,3637,3660" data-y-axis="0,0,0,0,5,2,0,0,0,0" data-q1="#FEE7D8" data-q2="#FCCDAF" data-q3="#FAA771" data-q4="#F88132">
	<canvas></canvas>
</div>

JavaScript

$('.jsDivSalaryChart').each(function () {
            new SalaryBarChart({ SalaryChart: $(this) });
   });


function SalaryBarChart(pSettings) {
    var settings = {
        SalaryChart: '.jsDivSalaryChart' // Overwritten
    },
    options = {},
    data = {
        labels: [],
        datasets: [{
            type: 'bar',
            backgroundColor: [],
            data: []
        }]
    },
        config = {
            type: 'bar',
            data: {},
            options: {
                responsive: false,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                title: {
                    display: false,
                },
                layout: {
                    padding: {
                        bottom: 20
                    }
                },
                scales: {
                    xAxes: [{
                        barThickness: 20,
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            maxRotation: 0,
                            callback: function (value, index, values) {
                                return !index || index == values.length - 1 ? ['R$ ' + (!index ? minVal : maxVal), !index ? 'Mínimo' : 'Máximo'] : '';
                            }
                        }                        
                    }],
                    yAxes: [{
                        display: false
                    }]
                },
                tooltips:
                {
                    backgroundColor: 'rgba(0,0,0, 1)',
                    titleFontColor: '#fff',
                    displayColors: false,
                    callbacks: {
                        title: function (tooltipItem, data) {
                            if (!data) return '';
                            return 'R$ ' +...