Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

3 Steps Simple Bar Chart With Pure CSS & JS

INTRODUCTION
NO ADDED CHEMICALS

Welcome to a step-by-step tutorial on how to create a responsive horizontal and vertical simple bar chart. So you are looking for a way to create bar charts, and do not want to load any of those bloated complicated libraries. You have come to the right place, and in this guide, we will walk through how to create simple bar charts – With pure CSS and vanilla Javascript. Read on!

I have included a zip file with all the example code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

CONFESSION
AN HONEST DISCLOSURE

Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!

NAVIGATION
TABLE OF CONTENTS

Prelude
Download & Demo

Step 1
Basic Bars

Step 2
Javascript Power

Step 3
More Cosmetics

Closing
What’s Next?

PRELUDE
DOWNLOAD & DEMO

Here is the download link to all the example scripts in this tutorial, and a small demo on how the charts will look like at the end of this tutorial.

HORIZONTAL BAR CHART DEMO

VERTICAL BAR CHART DEMO

DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

SECTION A
BASIC BAR CHARTS

Let us start with the simplest version of the bar chart – One that you can build with only HTML and CSS.

THE HTML

1-basic-bars.html


  
    Basic CSS Bar Chart Examples

HORIZONTAL BAR CHART

First
Second
Third


VERTICAL BAR CHART

First
Second
Third

THE CSS

1-basic.bars.css
/* [HORIZONTAL BARS] */
#bar-horzontal {
  max-width: 600px;
  border: 1px solid #333;
  background: #f2f2f2;
}
#bar-horzontal div {
  color: #fff;
  padding: 10px 0 10px 5px;
  box-sizing: border-box;
}

/* [VERTICAL BARS] */
#bar-vertical {
  display: table;
  width: 100%;
  min-width: 320px;
  max-width: 600px;
  height: 400px;
  border: 1px solid #333;
  background: #f2f2f2;
}
.vcell {
  display:table-cell;
  vertical-align: bottom;
  color: #fff;
  text-align: center;
}

/* [DOES NOT MATTER] */
html, body {
  font-family: arial;
  padding: 0;
  margin: 10px;
}
h1 {
  font-size: 1.4em;
  padding: 0;
  margin: 5px 0;
}

Yep, the basic strategy to building bar charts with pure CSS is to use 

blocks to draw the bars.
  • The horizontal bar chart should be very straightforward –  Putting 
    blocks into a container, then specify their percentage width and background color.
  • Vertical bar charts are a little more complicated. We set the container to display as a table, and the internal bars as table cells – Simply because we need to set vertical-align: bottom to properly flush the bars to the bottom of the container.
  • Similarly, we have to set the percentage height and background color of each bar in the vertical setup.
  • STEP 2
    JAVASCRIPT POWER

    For some of you guys who may be extracting some data and reports from the server, this section will walk you through a small example on how to use Javascript to generate the bar charts.

    THE HTML

    2-javascript.html
    
    
      
        Bar Chart With JS Examples

    HORIZONTAL BAR CHART



    VERTICAL BAR CHART

    The HTML and CSS pretty much remain the same – The only difference is that the bars within the chart containers are now “gone”, and we will be generating them with Javascript instead.

    THE JAVASCRIPT

    2-javascript.js
    /* [THE GRAPH DATA] */
    // Let's say that you AJAX load these data from the server
    var horizontal = [
      ["First", 33],
      ["Second", 100],
      ["Third", 50]
    ];
    var vertical = [
      ["First", 40],
      ["Second", 65],
      ["Third", 98]
    ];
    
    /* [RANDOM COLOR GENERATOR] */
    // SOURCE: https://gist.github.com/Chak10/dc24c61c9bf2f651cb6d290eeef864c1
    function randDarkColor() {
      var lum = -0.25;
      var hex = String('#' + Math.random().toString(16).slice(2, 8).toUpperCase()).replace(/[^0-9a-f]/gi, '');
      if (hex.length 

    Holy cow! This looks complicated… But if you look closer, it is actually a simple and straightforward script. All it does is to:

    • Loop through the array of data.
    • Create the bar chart
      .
    • Set a random color and the width/height.
    • Attach them to the respective containers.
    • STEP 3
      MORE COSMETICS

      Finally, this is kind of optional… For you guys who are thinking “not cool enough”, here is how we add some animation effects and stuff.

      THE HTML

      3-fancy.html
      
      
        
          Fancy CSS Bar Chart Examples

      HORIZONTAL BAR CHART



      VERTICAL BAR CHART

      THE CSS

      3-fancy.css
      /* [HORIZONTAL BARS] */
      #bar-horzontal {
        max-width: 600px;
        border: 1px solid #333;
        /* FANCY BACKGROUND */
        background: repeating-linear-gradient(
          to right,
          #ffdfd3,
          #ddd 2px,
          #fff 2px,
          #fff 5%
        );
      }
      #bar-horzontal div {
        color: #fff;
        padding: 10px 0 10px 5px;
        box-sizing: border-box;
        /* [CSS ANIMATION] */
        transition: width 1s;
      }
      
      /* [VERTICAL BARS] */
      #bar-vertical {
        display: table;
        width: 100%;
        min-width: 320px;
        max-width: 600px;
        height: 400px;
        border: 1px solid #333;
        /* FANCY BACKGROUND */
        background: repeating-linear-gradient(
          to bottom,
          #ffdfd3,
          #ddd 2px,
          #fff 2px,
          #fff 10%
        );
      }
      .vcell {
        display:table-cell;
        vertical-align: bottom;
        color: #fff;
        text-align: center;
      }
      /* [CSS ANIMATION] */
      .vbar {
        transition: height 1s;
      }
      
      /* [DOES NOT MATTER] */
      html, body {
        font-family: arial;
        padding: 0;
        margin: 10px;
      }
      h1 {
        font-size: 1.4em;
        padding: 0;
        margin: 5px 0;
      }

      There are 2 small differences in this CSS:

      • The background of the bar chart containers have been changed to repeating-linear-gradient – This “hack” will draw nice graph paper looking lines, instead of a boring solid block of color.
      • CSS transition is added to the bars, so that the chart will rock a nice animation as it is being built by Javascript.

      THE JAVASCRIPT

      3-fancy.js
      /* [THE GRAPH DATA] */
      // Let's say that you AJAX load these data from the server
      var horizontal = [
        ["First", 33],
        ["Second", 100],
        ["Third", 50]
      ];
      var vertical = [
        ["First", 40],
        ["Second", 65],
        ["Third", 98]
      ];
      
      /* [RANDOM COLOR GENERATOR] */
      // SOURCE: https://gist.github.com/Chak10/dc24c61c9bf2f651cb6d290eeef864c1
      function randDarkColor() {
        var lum = -0.25;
        var hex = String('#' + Math.random().toString(16).slice(2, 8).toUpperCase()).replace(/[^0-9a-f]/gi, '');
        if (hex.length 

      This version of the Javascript pretty much does the same thing in step 2, except that the bars have 0 width/height when first created. The width/height is then dynamically changed with code, and thus firing the CSS animation.

      CLOSING
      WHAT’S NEXT?

      We have come to the end of this guide, and I hope that it has given you some good ideas on how to create your bar charts. If you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!


      The post 3 Steps Simple Bar Chart With Pure CSS & JS appeared first on Code Boxx.



This post first appeared on Xxxxxxxxx, please read the originial post: here

Share the post

3 Steps Simple Bar Chart With Pure CSS & JS

Email
Facebook
Pinterest
Twitter
×

Subscribe to Xxxxxxxxx

Get updates delivered right to your inbox!

Thank you for your subscription

×