Canvas based bar graphics

ChartJS 2 is an open source highly customizable Graphics Library for JavaScript.
Here I include an example to achieve this bar chart:

HTML;

<div class="jsBarGraphDiv" data-bardata="95,50,95,50,50,10" data-colors="#F44133,#FFC300,#4BB04F" 
   data-labels="Jul,Ago,Set,Out,Nov,Dec">
  <canvas height="215" id="barCanvas"></canvas>
</div>

JavaScript:

Just instance this class:

function BarChart(pSettings) {
    var data = {
        labels: [],
        datasets: [{
            type: 'bar',
            backgroundColor: [],
            data: []
        }]
    },
        config = {
            type: 'bar',
            data: {},
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                title: {
                    display: false,
                },
                tooltips:
                {
                    enabled: false
                },
                scales: {
                    xAxes: [{
                        barThickness: 14,
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            maxRotation: 0
                        }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
       labelString: 'Baixo         Médio         Alto'
                        },
                        gridLines: {
                            drawTicks: true
                        },
                        ticks: {
                            beginAtZero: true,
                            min: 0,
                            max: 100,
                            stepSize: 34,
                            callback: function () {
                                return '';
                            }
                        }
                    }]
                }
            }
        },
        settings = {
            BarGraphDiv: '.jsBarGraphDiv'
        },
        options = {},
            aColors = [];
    //
    function init(pSettings) {
        options = $.extend(settings, pSettings || {});
        var _$BarGraphDiv = $(options.BarGraphDiv),
            _graphData = _$BarGraphDiv.data('bardata');
        if (_graphData) {
            if (typeof _graphData == 'number') {
                _graphData = [_graphData];
                data.labels = [_$BarGraphDiv.data('labels')];
            }
            else {
                _graphData = _graphData.split(',');
                _graphData = _graphData.map(function (el) { return Number(el) });
                data.labels = _$BarGraphDiv.data('labels').split(',');
            }
            aColors = _$BarGraphDiv.data('colors').split(',');            
            data.datasets[0].backgroundColor = _graphData.map(function (el, i) {
                return aColors[Math.floor(el / 33.4)];
            });
            data.datasets[0].data = _graphData;
            config.data = data;
            var ctx = $(options.BarGraphDiv).find('canvas')[0].getContext('2d');
            new Chart(ctx, config);
            var _cssLowMidHigh = ['low', 'mid', 'high'][Math.floor(_graphData[_graphData.length - 1] / 33.4)];
            _$BarGraphDiv.addClass(_cssLowMidHigh);
        }
    }
    //
    init(pSettings);
}