Bar Chart HTML Create Beautiful Bar Charts Using HTML Tags

Creating a bar chart ONLY with HTML and without JavaScript is challenging, but possible with a couple of HTML and CSS tricks.

Let’s see how it’s done!

We will create the bar chart with plain HTML without JavaScript or any fancy programming.

If you are interested to see how you can use JavaSript and canvas to draw bar charts check out this complete guide on How to Draw Bar Charts Using JavaScript and HTML5 Canvas

We will look at two methods for creating bar charts with HTML only.

Method #1 – We will simply create the bar chart using only HTML and CSS. The result looks awesome and anybody can do it.

Method #2 – We can also create a HTML bar graph using CSS flexbox.

Method #3 – We will use the Infographic Charts HTML Tag Library. Basically, we will include the library and write a few lines of HTML to create the bar chart.

Method #4 – Creating a bar chart from a HTML table

Bar Charts - What The Heck Is A Bar Chart?

Well, it’s that thing with colored bars in it. Some bigger, some smaller, you know, a bar chart.

No need to go into fancy definitions. But, if we want to draw a bar chart with HTML, we need to know what elements make up a bar chart.

Here’s a list of elements that make up a bar chart:

        • A Dataset – all charts display data. Bar chart data looks like key1=value1, key2=value2,… etc.
        • Chart Title – just a line of text usually above the chart
        • Chart Grid – lines that setup a frame of reference for the elements within the chart. Usually the grid contains markers with numerical values.
        • Chart Bars – colored rectangles that correspond in size with the values that the bar chart is representing
        • Chart Labels – for each bar, usually, we want to display some text that indicates what the bar data is showing.

Now that we listed what makes a bar chart, let’s see how we can create these in HTML to make a HTML  bar chart.

#1 Bar Chart HTML - Using Only HTML And CSS

For this article I used some data about content marketing from the SEO guru Neil Patel. It’s data showing how authors distribute their content on various marketing channels.

Here’s what we will create:

Bar Chart HTML Only

Yes, this is an image, but it’s actually a print screen of the HTML bar chart we will create.

Since we want to create the bar chart using only HTML and CSS, we will have to implement each element of the chart using HTML elements.

The title and labels in the bar chart are just regular HTML text elements.

For the grid we will use a div with a border and a bit of a creative CSS gradient trick, which we will look into below.

The obvious choice for the bars is a simple div.  Why? Because a bar is a rectangle, and so is the div element and we can easily fill it with the color of our choice.

Let’s take a look at the bar chart HTML code:

See the Pen Bar Chart HTML by John Negoita (@inegoita) on CodePen.16997

You can play around with changing the bar chart HTML attributes and CSS settings.

You can change the bar chart settings like in the video below:

      • Switch between horizontal bar chart or vertical bar chart by changing the HTML CSS class
      • Change the bar chart values
      • Change labels and tooltips for the bars
      • Choose the bar colors that you want
      • Make the bar charts thinner or thicker
      • Adjust the spacing between the bar chart bars

Bar Chart HTML Live Example: Using Only HTML And CSS

So, what’s going on here?

For the CSS part, we’ve used LESS. If you’re not familiar with LESS, you can quickly take a look at http://lesscss.org/.

Basically LESS writing CSS in a more convenient way. The LESS code will be compiled to CSS, so in the end it’s plain old CSS.

The Chart Area

We have the div.chart-wrap wrapper that holds the entire bar chart area.

Bar charts are usually vertical, meaning that the layout of the chart is such that the bars height are proportional to the data they represent.

Bar charts can also be horizontal, meaning that the bars span from left to right horizontally and proportional to the data they represent.

For our chart we use two classes: vertical and horizontal for the div.chart-wrap element to indicate the type of bar chart.

In CSS/LESS we can change the width and height of the chart by changing the 2 variables @chart-width and  @chart-height.

The Chart Grid And Drawing Area

We also have the div.grid that is used both for holding the bars and for drawing the grid elements.

For convenience, we will use a HTML/CSS trick. We will create our bar chart in a horizontal layout by default.

Why?

Because div elements tend to arrange better one below another. Just what we need our bars to do.

To transform our bar chart into a vertical bar chart, we will simply need to rotate our chart 90 degrees counter clock-wise. Since our chart’s height and width differ, when we rotate it, we also need to translate it by half of the width and height to avoid running off the screen.

We do this using the CSS transform with translate and rotate.

For the grid lines, we simply need a CSS border and for each 20% markers we set the background to a repeating gradient that will draw lines for each 20% of the div like this:

background:repeating-linear-gradient(90deg,transparent,transparent 19.5%,fadeout(@grid-color,30%) 20%);

Bars For The Bar Chart

How about the bars of the bar chart?

As mentioned before, we will use simple div elements that we will stylize and fill with orange.

We need to set the size of our bars according to the chart data. For this we will use another neat HTML/CSS trick.

In the style attribute of the div.bar element we can use custom CSS variables.

So, we use --bar-value to indicate the value for each bar as a percentage.

This is very useful in this case, because that becomes both the value, but also the size of the bar.

How can we use the --bar-value value in CSS?

Easy, we use it as the width of the bar like this:

.bar {
  width: var(--bar-value);
  ...
 }

Please keep in mind that our HTML bar chart is by default horizontal. That’s why we only need to adjust the bar width.

How about the labels for each bar?

We can use yet another HTML/CSS trick. We will add an attribute called data-name to our div.bar element. The string value of this attribute can then be used in the CSS like this:

content:attr(data-name);

We just add this via a CSS ::after pseudo element and style it such that it is displayed near each corresponding bar.

What else?

Well, we can set the bar color, bar thickness, spacing between bars and even how to round the corners of the bars using the CSS/LESS variables at the top:

@bar-color:#F16335;
@bar-thickness:50px;
@bar-rounded: 3px;
@bar-spacing:30px;

That’s pretty much it!

Play around with changing the --bar-value and data-name attributes in the div.bar elements to create an HTML bar chart with your data.

Let me know what features you might like to add to this.

#2 HTML Bar Graph Using CSS Flexbox

Horizontal HTML Bar Graph Made With CSS Flexbox

See the Pen HTML Bar Graph Using Flexbox by Ion Emil Negoita (@inegoita) on CodePen.16997

HTML Bar Graph Live Example Using Flexbox

This looks very similar to the previous HTML bar chart.

What’s different?

In this method I’m using CSS flexbox to layout the grid and the bars in the chart.

Using flexbox means that I will need far less CSS code to create a similar HTML bar graph.

Let me explain in short.

The Chart Area

We also have the div.chart-wrap wrapper that holds the entire bar chart area.

There’s really nothing special about the wrapper. I only use it for setting the bar graph width and height.

The Chart Grid And Drawing Area

Just as before I use div.grid both for holding the bars and for drawing the grid elements.

Here comes the flexbox part. Flexbox allows you to have a CSS grid in which elements can be arranged on columns or rows.

If you want to find out more about flexbox I highly recommend reading this flexbox guide from CSS Tricks

No need to get into the details as the code is pretty self-explanatory.

Basically we use a row flexbox grid for vertical (default) bar graph, and a column flexbox for the horizontal HTML bar chart.

In this way I don’t have to use the previous trick of rotating the entire bar chart.

Bars For The Flexbox HTML Bar Graph

How about the bars of the bar chart?

These are exactly the same as in the previous method. But, as you see in the text I need far less CSS code.

#3 Bar Chart HTML - Using The Infographic Charts Tag Library

Bar Chart HTML Example: Using Only The HTML Charts Tag Library

Number of posts Number of posts Number of posts Number of posts Number of posts Number of posts Number of posts Number of posts

This bar chart is not an image. It’s a live chart created with a custom HTML tags library called: Infographic Charts and Graphics HTML Tags Library. The library comes with full support and full documentation on how to install and use it.

This HTML tag library contains several tags for creating charts. For creating bar charts we can use the <infographic-bargraph> tag.

Please keep in mind that this library can create charts much more complex than what we created in Method #1. The library allows configuration of each and every aspect of the chart by using tag attributes.

For creating the chart above the HTML code looks like this:

<h3 style="text-align:center">Bar Chart HTML Example:  Using Only The HTML Charts Tag Library</h3>

<infographic-bargraph style="padding:0 5%;width:100%" 
  width="90%" height="300" type="vertical" 
  font-size="20px" font-color="#000000" font-family="Open Sans"
  colors="#F16335"
  serie-spacing="35" padding="25" max-value="100"
  grid-scale="20" grid-font-size="14px" grid-color="#aaa">
  <infographic-data>
	<infographic-bargroup name="Your Blog">
		<infographic-bar value="85">Number of posts</infographic-bar>
	</infographic-bargroup>
	<infographic-bargroup name="Medium">
		<infographic-bar value="23">Number of posts</infographic-bar>
	</infographic-bargroup>
	<infographic-bargroup name="Tumblr">
		<infographic-bar value="7">Number of posts</infographic-bar>
	</infographic-bargroup>
	<infographic-bargroup name="Facebook">
		<infographic-bar value="38">Number of posts</infographic-bar>
	</infographic-bargroup>
	<infographic-bargroup name="YouTube">
		<infographic-bar value="35">Number of posts</infographic-bar>
	</infographic-bargroup>
	<infographic-bargroup name="LinkedIn">
		<infographic-bar value="30">Number of posts</infographic-bar>
	</infographic-bargroup>
	<infographic-bargroup name="Twitter">
		<infographic-bar value="5">Number of posts</infographic-bar>
	</infographic-bargroup>
	<infographic-bargroup name="Other">
		<infographic-bar value="20">Number of posts</infographic-bar>
	</infographic-bargroup>	
  </infographic-data>
</infographic-bargraph>

How does this work?

There’s no HTML tag <infographic-bargraph>, but through the magic of the Infographic Tag Library the browser knows to draw a bar chart when it sees this tag.

We can configure the look of the bar chart with HTML attributes. For example the colors attribute configures the colors used for the bars, the grid-color configures the color of the grid, and so on.

For a complete list of attributes check out the Infographic Tag Library Documentation.

For each bar in the bar chart we have to use the tab <infographic-bargroup> and <infographic-bar>. This library allows stacked bars or multiple bar groups, that’s why we need the <infographic-bargroup>. But in our case we only have one bar per group.

We use the value and name attributes to set the bar value and name (… duh!) 

#4 Bar Chart HTML - Creating A Bar Chart From A HTML Table

Bar charts are displaying numerical information. Most often people are creating a bar chart in Excel and start with table data.

So, how about creating a bar chart from an HTML table?

I have to admit this is not my idea. I got it off a forum where I asked the question:

“What would be the easiest way to create a bar chart in HTML?”

Jason Knight at cutcodedown.com was kind enough to provide a fully working HTML bar chart that starts as a simple <table> HTML  element.

We will use the same data, which we will place in an HTML table like this:

<table class="graph">
<caption>Describe this Data</caption>
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Percent</th>
</tr>
</thead><tbody class="horizontal">
<tr style="height:85%">
<th scope="row">Your Blog</th>
<td><span>85%</span></td>
</tr>
<tr style="height:23%">
<th scope="row">Medium</th>
<td><span>23%</span></td>
</tr>
<tr style="height:7%">
<th scope="row">Tumblr</th>
<td><span>7%</span></td>
</tr>
<tr style="height:38%">
<th scope="row">Facebook</th>
<td><span>38%</span></td>
</tr>
<tr style="height:35%">
<th scope="row">Youtube</th>
<td><span>35%</span></td>
</tr>
<tr style="height:30%">
<th scope="row">LinkedIn</th>
<td><span>30%</span></td>
</tr>
<tr style="height:5%">
<th scope="row">Twitter</th>
<td><span>5%</span></td>
</tr>
<tr style="height:20%">
<th scope="row">Other</th>
<td><span>20%</span></td>
</tr>
</tbody>
</table>

Which by default is rendered like this:

Describe this Data
Item Percent
Your Blog 85%
Medium 23%
Tumblr 7%
Facebook 38%
Youtube 35%
LinkedIn 30%
Twitter 5%
Other 20%

But with the help of a bit of CSS, we can use the .graph CSS class to transform this into an HTML bar chart that looks exactly like the ones above.

Here’s a simplified version of Jason’s code:

See the Pen Bar Chart HTML Only (table version alternative) by Ion Emil Negoita (@inegoita) on CodePen.16997

The CSS is pretty self explanatory. We basically transform each of the HTML table’s td cell into a bar of the bar chart.

The tbody becomes the grid of the bar chart so we end up with something like this:

Bar Chart HTML From HTML Table
Item Percent
Your Blog 85%
Medium 23%
Tumblr 7%
Facebook 38%
Youtube 35%
LinkedIn 30%
Twitter 5%
Other 20%

Congrats! Now You Can Create Your Own HTML Bar Charts

Now you know more than one method for creating HTML bar charts.

What charts will you create? How will you configure their look? Please share your results by dropping me a comment below.

I will answer any questions you have about HTML bar charts.

Scroll to top