How to create a Bar Chart Using CSS and jQuery

Bar Chart CSS and jQuery
How to create a Bar Chart Using CSS and jQuery

How to create a Bar Chart with jQuery and CSS – Bar charts are graphs representing group data with vertical or horizontal charts. Bar charts used to show comparisons that are easy to understand. Bar charts help make Web applications more user-friendly. To display the comparison of data between categories in percentages, Bar Chart is the right choice.

In this tutorial, I will show you how to create a responsive bar chart using CSS and jQuery. You don’t need to use the jQuery chart plugin to add Bar charts on the website. You can easily create your Bar Chart with pure CSS and jQuery.

HTML

The following HTML shows a bar chart with a percentage values. Also, each label will appear below the graph.

<div class="container">
    <h2>Skill level</h2>
    <div class="bar-chart">
        <!-- legend label -->
        <div class="legend">
            <div class="label">
                <h4>Newbie</h4>
            </div>
            <div class="label">
                <h4>Medium</h4>
            </div>
            <div class="label">
                <h4>Professional</h4>
            </div>
  <div class="label">
                <h4>Legend</h4>
            </div>
        </div>
        <!-- bar -->
        <div class="chart clearfix">
            <div class="item">
                <div class="bar">
                    <span class="persen">85%</span>
                    <div class="progress" data-persen="85">
                        <span class="title">PHP Skills</span>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="bar">
                    <span class="persen">68%</span>
                    <div class="progress" data-persen="68">
                        <span class="title">MySQL Skill</span>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="bar">
                    <span class="persen">59%</span>
                    <div class="progress" data-persen="59">
                        <span class="title">JavaScript Skill</span>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="bar">
                    <span class="persen">92%</span>
                    <div class="progress" data-persen="91">
                        <span class="title">HTML&amp;CSS Skill</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript

First, the jQuery library needs to include.

READ  How to Create Email Marketing To Attract Visitors

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

The barChart() function is used to specify the row width based on the specified percentage. In the function barChart() document ready and window resize loading.

<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('persen') / 100);
            itemProgress.css('width', itemProgressWidth);
        });
    }
});
</script>

CSS

CSS berikut digunakan untuk menata Bar Chart dan membuat Bar Chart 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 > .persen {
    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;
}

Demo & Download
That’s How to create a Bar Chart with jQuery and CSS easiest by AlgoritmComputer.com, share this article if useful.

READ  How to view your Saved Passwords in Google Chrome

Leave a Reply

Your email address will not be published. Required fields are marked *