Creating Bar Chart with jQuery and CSS

A bar chart is a graph that represents group data with vertical or horizontal bars. Basically, the bar chart is used to shows the comparison which can easily understand. The bar chart helps to make the web application more user-friendly. To demonstrate comparison data among categories in percentage, the bar chart is the best choice.

In this tutorial, we will show how you can create a responsive bar chart using pure CSS and jQuery. You don’t need to use any jQuery chart plugin for add a bar chart in the web page. You can easily create your own bar chart with pure CSS and jQuery.

Let’s start to create responsive bar chart with CSS. In the example code, the Levels of Expertise will be shown on a bar chart.

HTML Code

The following HTML shows the bar chart with the percentage value. Also, the respective label will appear below the chart.

<div class="container">
    <h2>Levels of Expertise</h2>
    <div class="bar-chart">
        <!-- legend label -->
        <div class="legend">
            <div class="label">
                <h4>Beginner</h4>
            </div>
            <div class="label">
                <h4>Intermediate</h4>
            </div>
            <div class="label">
                <h4>Proficient</h4>
            </div>
            <div class="label last">
                <h4>Expert</h4>
            </div>
        </div>
        
        <!-- bars -->
        <div class="chart clearfix">
            <div class="item">
                <div class="bar">
                    <span class="percent">85%</span>
    
                    <div class="progress" data-percent="85">
                        <span class="title">PHP KNOWLEDGE</span>
                    </div>
                </div>
            </div>
            
            <div class="item">
                <div class="bar">
                    <span class="percent">68%</span>
    
                    <div class="progress" data-percent="68">
                        <span class="title">MySQL KNOWLEDGE</span>
                    </div>
                </div>
            </div>
            
            <div class="item">
                <div class="bar">
                    <span class="percent">59%</span>
    
                    <div class="progress" data-percent="59">
                        <span class="title">JavaScript KNOWLEDGE</span>
                    </div>
                </div>
            </div>
    
            <div class="item">
                <div class="bar">
                    <span class="percent">91%</span>
    
                    <div class="progress" data-percent="91">
                        <span class="title">HTML&CSS KNOWLEDGE</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript Code

At first the jQuery library need to be included.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

The barChart() function is used to assign the width of the bar based on the specified percentage. On document ready and window resize the barChart() function is loaded.

<script>
$(document).ready(function(){
    barChart();
    
    $(window).resize(function(){
        barChart();
    });
    
    function barChart(){
        $('.bar-chart').find('.progress').each(function(){
            var itemProgress = $(this),
            itemProgressWidth = $(this).parent().width() * ($(this).data('percent') / 100);
            itemProgress.css('width', itemProgressWidth);
        });
    }
});
</script>

CSS Code

The following CSS is used to styling the bar chart and make bar graph responsive.

.bar-chart {
    position: relative;
    width: 100%;
    margin-top: 15px;
    padding-bottom: 1px;
}
.bar-chart > .legend {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    margin-bottom: -45px;
    border-top: 1px solid #000;
}
.bar-chart > .legend > .label {
    position: relative;
    display: inline-block;
    float: left;
    width: 25%;
    text-align: center;
}
.bar-chart > .legend > .label:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 1px;
    height: 8px;
    background-color: #000;
    margin-top: -8px;
}
.bar-chart > .legend > .label.last:after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    content: '';
    width: 1px;
    height: 8px;
    background-color: #000;
    margin-top: -8px;
}
.bar-chart > .legend > .label h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.bar-chart > .chart {
    position: relative;
    width: 100%;
}
.bar-chart > .chart > .item {
    position: relative;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    color: #fff;
    text-transform: uppercase;
}
.bar-chart > .chart > .item > .bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff4081;
    z-index: 5;
}
.bar-chart > .chart > .item > .bar > .percent {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    line-height: 40px;
    padding-right: 12px;
    z-index: 15;
}
.bar-chart > .chart > .item > .bar > .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #3e50b4;
    z-index: 10;
}
.bar-chart > .chart > .item > .bar > .progress > .title {
    display: block;
    position: absolute;
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
    letter-spacing: 2px;
    z-index: 15;
}