Tiny jQuery Plugin for Creating Beautiful Bar Pie Charts

Spending time on Codepen website is always a pleasure. There are so many talented and creative web designers and developers who are sharing their knowledge with everyone.

Today’s coding treasure is coming from Joe Dix who has created a simple bar chart plugin that can be useful for any website or app that requires some kind of a data to be presented. I think it can be particularly useful for company websites to show any kind of data related to clients and products.

Portfolio websites also can benefit from such plugin as it can be used to present certain level of knowledge and ability in particular software or expertise in any field.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

Private: Tiny jQuery Plugin for Creating Beautiful Bar Charts

Using the plugin is dead easy and I am going to explain how to use it so you can have some lovely bar charts on your site or app.

Make sure that you check the demo at the end of the article.

#1 – Add the jQuery library and plugin itself

First of all you need to include the latest jQuery library and the bar chart plugin.

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/barchart.js"></script>

#2 – Create the structure in the HTML doc

To have a bar chart, you need to create a div with a circle-chart class and data-percent value.

<div class="circle-chart" data-percent="80"></div>
<div class="circle-chart small" data-percent="60"></div>
<div class="circle-chart small green" data-percent="73"></div>

#3 – Styling it all

The last step is to add some CSS styling so you can have beautiful bar charts. The CSS is fully customizable so it can be adjusted to fit any colour scheme or look and feel.

.circle-chart { cursor:pointer;  float:left;  margin:10px;  height:400px;  position:relative;  width:400px;}
.circle-chart.small { height:200px; width:200px;}
.circle-chart p {  color:#DA1D52;  font-family:sans-serif;  font-size:6em;  font-weight:600;  line-height:1em;  margin-top:-0.5em;  position:absolute;   top:50%;   left:0;  text-align:center;  width:100%;
-webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 1.5s; /* Firefox < 16 */ -ms-animation: fadein 1.5s; /* Internet Explorer */  -o-animation: fadein 1.5s; /* Opera < 12.1 */ animation: fadein 1.5s;}
.circle-chart.small p { font-size:3.3em;}
.circle-chart .bar { height:80%; margin:-40% 0 0 -5px;  position: absolute;  left:50%;  top: 50%;  width:3%;}
.circle-chart .bar:after { background:#DA1D52;  border-radius:10px;  content:"";  height:15%;  position: absolute;    top:-10%;    left:0;  width:100%;}
.circle-chart.green p {  color:#8CC63F;}
.circle-chart.green .bar:after {  background:#8CC63F;}
.circle-chart .bar:nth-child(2) {  -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); }
.circle-chart .bar:nth-child(3) {  -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); }
.circle-chart .bar:nth-child(4) {  -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); }
.circle-chart .bar:nth-child(5) {  -ms-transform: rotate(40deg); -webkit-transform: rotate(40deg); transform: rotate(40deg); }
.circle-chart .bar:nth-child(6) {  -ms-transform: rotate(50deg); -webkit-transform: rotate(50deg); transform: rotate(50deg); }
.circle-chart .bar:nth-child(7) { -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); }
.circle-chart .bar:nth-child(8) { -ms-transform: rotate(70deg); -webkit-transform: rotate(70deg); transform: rotate(70deg); }
.circle-chart .bar:nth-child(9) { -ms-transform: rotate(80deg); -webkit-transform: rotate(80deg); transform: rotate(80deg); }
.circle-chart .bar:nth-child(10) {  -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.circle-chart .bar:nth-child(11) {  -ms-transform: rotate(100deg); -webkit-transform: rotate(100deg); transform: rotate(100deg); }
.circle-chart .bar:nth-child(12) {  -ms-transform: rotate(110deg); -webkit-transform: rotate(110deg); transform: rotate(110deg); }
.circle-chart .bar:nth-child(13) { -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg); }
.circle-chart .bar:nth-child(14) { -ms-transform: rotate(130deg); -webkit-transform: rotate(130deg); transform: rotate(130deg); }
.circle-chart .bar:nth-child(15) { -ms-transform: rotate(140deg); -webkit-transform: rotate(140deg); transform: rotate(140deg); }
.circle-chart .bar:nth-child(16) { -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); }
.circle-chart .bar:nth-child(17) { -ms-transform: rotate(160deg); -webkit-transform: rotate(160deg); transform: rotate(160deg); }
.circle-chart .bar:nth-child(18) { -ms-transform: rotate(170deg); -webkit-transform: rotate(170deg); transform: rotate(170deg); }
.circle-chart .bar:nth-child(19) { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.circle-chart .bar:nth-child(20) { -ms-transform: rotate(190deg); -webkit-transform: rotate(190deg); transform: rotate(190deg); }

.circle-chart .bar:nth-child(21) { -ms-transform: rotate(200deg); -webkit-transform: rotate(200deg); transform: rotate(200deg); }
.circle-chart .bar:nth-child(22) { -ms-transform: rotate(210deg); -webkit-transform: rotate(210deg); transform: rotate(210deg); }
.circle-chart .bar:nth-child(23) { -ms-transform: rotate(220deg); -webkit-transform: rotate(220deg); transform: rotate(220deg); }
.circle-chart .bar:nth-child(24) { -ms-transform: rotate(230deg); -webkit-transform: rotate(230deg); transform: rotate(230deg); }
.circle-chart .bar:nth-child(25) { -ms-transform: rotate(240deg); -webkit-transform: rotate(240deg); transform: rotate(240deg); }
.circle-chart .bar:nth-child(26) { -ms-transform: rotate(250deg); -webkit-transform: rotate(250deg); transform: rotate(250deg); }
.circle-chart .bar:nth-child(27) { -ms-transform: rotate(260deg); -webkit-transform: rotate(260deg); transform: rotate(260deg); }
.circle-chart .bar:nth-child(28) { -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); }
.circle-chart .bar:nth-child(29) { -ms-transform: rotate(280deg); -webkit-transform: rotate(280deg); transform: rotate(280deg); }
.circle-chart .bar:nth-child(30) { -ms-transform: rotate(290deg); -webkit-transform: rotate(290deg); transform: rotate(290deg); }
.circle-chart .bar:nth-child(31) { -ms-transform: rotate(300deg); -webkit-transform: rotate(300deg); transform: rotate(300deg); }
.circle-chart .bar:nth-child(32) { -ms-transform: rotate(310deg); -webkit-transform: rotate(310deg); transform: rotate(310deg); }
.circle-chart .bar:nth-child(33) { -ms-transform: rotate(320deg); -webkit-transform: rotate(320deg); transform: rotate(320deg); }
.circle-chart .bar:nth-child(34) { -ms-transform: rotate(330deg); -webkit-transform: rotate(330deg); transform: rotate(330deg); }
.circle-chart .bar:nth-child(35) { -ms-transform: rotate(340deg); -webkit-transform: rotate(340deg); transform: rotate(340deg); }
.circle-chart .bar:nth-child(36) { -ms-transform: rotate(350deg); -webkit-transform: rotate(350deg); transform: rotate(350deg); }
@keyframes fadein {   from { opacity: 0; }   to   { opacity: 1; }}
/* Firefox < 16 */
@-moz-keyframes fadein {   from { opacity: 0; }   to   { opacity: 1; }}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {   from { opacity: 0; }   to   { opacity: 1; }}
/* Internet Explorer */
@-ms-keyframes fadein {    from { opacity: 0; }    to   { opacity: 1; }}
/* Opera < 12.1 */
@-o-keyframes fadein {   from { opacity: 0; }    to   { opacity: 1; }}

That’s it. Simple and great bar charts. You can download the plugin and give it a try yourself.

DEMO Download Bar Pie Charts

Related post:  Sign Up Form - HTML and CSS Code Snippet
Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.