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.

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.

Don’t struggle alone with projects

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

DEMO Download Bar Pie Charts

You may also like...

Leave a Reply

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