jquery bar chart

HTML

<div id="bar-chart-1" class="bar-chart"></div>

CSS

.bar-chart { margin: 20px 0; }
.bar-chart__list { margin: 0 0 15px; padding: 0; list-style-type: none; }
.bar-chart__item { position: relative; height: 40px; line-height: 40px; margin: 0; padding: 0 16px; font-size: 16px; }
.bar-chart__item-text { position: relative; z-index: 1; }
.bar-chart__item-bar { position: absolute; top: 0; left: 0; right: 0; height: 40px; }

.bar-chart__item:nth-child(1) .bar-chart__item-bar { background-color: #a4faa1; }
.bar-chart__item:nth-child(2) .bar-chart__item-bar { background-color: #f2f38d; }
.bar-chart__item:nth-child(3) .bar-chart__item-bar { background-color: #6ff3d6; }
.bar-chart__item:nth-child(4) .bar-chart__item-bar { background-color: #bcb6f4; }
.bar-chart__item:nth-child(5) .bar-chart__item-bar { background-color: #fe6d9e; }

.bar-chart__rating { position: relative; height: 48px; }
.bar-chart__rating-range { position: absolute; top: 0; line-height: 18px; }
.bar-chart__rating-range:nth-child(1) { left: 0; }
.bar-chart__rating-range:nth-child(2) { left: 44%; text-align: center; }
.bar-chart__rating-range:nth-child(3) { right: 0; text-align: right; }

JavaScript

$.fn.barChart = function (settings) {
	var self = this;
    var data;
    
    if (settings.data && settings.data.length) {
        var data = settings.data;
        var $list = $('<ul class="bar-chart__list" />');
        
        for (var i = 0; i < data.length; i++) {
            var $item = $(
            	'<li class="bar-chart__item"> \
					<span class="bar-chart__item-text">' + data[i].label + '</span> \
					<span class="bar-chart__item-bar" style="width:' + data[i].bar + '%"></span> \
				</li>'
            );
            
        	$list.append($item);
        }
        
        self
            .html($list)
            .append('<p align=right>Full</p>');
    }
    
    return this;
};

$(function () {
	$('#bar-chart-1').barChart({
    	data: [
            { label: 'Table-1', bar: 20 }, 
            { label: 'Table-2', bar: 60 },
            { label: 'Table-3', bar: 40 },
            { label: 'Table-4', bar: 80},
            { label: 'Table-5', bar: 100 }
        ]
    });
});