Click here to Skip to main content
Click here to Skip to main content

HTML Horizontal Bar Chart

, 27 Jun 2007
Rate this:
Please Sign up or sign in to vote.
HTML Horizontal Bar Chart generated using HTML Table, DIVs and JavaScript. This mechanism can be clubbed with any web development tool like ASP, ASP.NET, JSP etc. to generate effective charts. Demo Attached: HTML Horizontal Bar Chart using plain HTML/JavaScript

Table of contents

  • Introduction
  • Generating horizontal bar charts
    • Single horizontal bar chart
    • Double horizontal bar chart
  • Benefits
  • Printing the charts
  • Wrapping up


We are now going a step ahead in continuation with what we saw in the HTML Vertical Bar Chart article. In line with what we have seen, we are now going to see how we can generate colorful horizontal bar charts for our web application. As mentioned earlier, we can work with any of the wonderful tools and technologies like Microsoft Office web office components, some third party controls to generate charts, some great ways using System.Drawing things to display charts, etc. Again, I found that using plain HTML with some JavaScript is the simplest among all of them to do the same thing. Well, at first glance, it could seem to be a horrifying idea, but working with basics for achieving big requirements is never bad. Let me keep it very short and simple and see how this can be achieved.

Generating horizontal bar charts

Here we are going to look at the steps we need to follow to have effective HTML-based horizontal bar charts. We are first going to see how we can generate the chart for one data series pair, i.e. a chart for a series that has Y-axis values and corresponding X-axis values. Later we are going to take a step ahead and see a chart for the series that has Y-axis values and a corresponding "set" of X-axis values. So let us get into action.

Single horizontal bar chart

Our single horizontal chart is going to look somewhat like this:

As we have done with the HTML vertical bar chart, we are going to follow some very simple steps and see how this colorful chart is generated. The basic building blocks of this horizontal bar chart are going to be an HTML table, <DIV>s and <P> (the HTML paragraph tag). It is basically a set of <DIV>s and <P>s placed inside the <TD>s of HTML table <TR>s. This chart table needs only two columns in the desired number of rows. The first column will contain the axis values and the other will contain the <DIV>s with colorful backgrounds of the desired width to represent a bar in the chart. The values on each bar can be displayed with the <P></P> tags. Let us cook up this chart step-by-step.

  1. Take an HTML table. Your HTML code looks like this:
  2. Determine how many rows you need in the table by determining the number of items you want to have in the chart. Let us say you got rowNum as the number of rows you need. In the example attached, it is 12.
  3. In each row, add two columns. With this, your HTML code should look something like this:
            <td> </td>
            <td> </td>
  4. In the first column, add a <DIV> or <P> with labels for the Y-axis.
  5. In the second column, add a <DIV> with different background color and with fixed height and width the as same as the corresponding value of the X-axis. For any row with row number i, the code should look somewhat like this:
            <td><div> VerY[i] </div> </td>
                <div style= 'background-color:blue; width:" + HorX[i] + "; />
                <p> HorX[i]</p>

The first <TD> contains the value for the axis. The second <TD> contains the <DIV> with background color as blue and with width the same as that of the X-axis value, along with a <P> tag with the value to display after the blue bar. This is the gist of the entire HTML horizontal bar chart. Steps 4 and 5 are repeated for each Y-axis value and then our bar chart is ready.

Well, HorX[i] is used directly as width in the attached demo, but as per requirement it can be reduced/increased proportionately. Say, for example, that you have only a limited area for displaying the chart. You may consider dividing the width of the blue <DIV> by, say, 2 or 3 in the loop for each row. Note that the bar chart is all about displaying the data proportionately. The bar for value 10 should look half the width of a 20-valued bar.

Double horizontal bar chart

Now let us extend our horizontal bar chart to cater to the second most required feature: comparing sets of values. The chart for the double horizontal bar chart would look something like this:

Now it won't be too hard to understand how to generate this double bar chart. In the same <TD> of Step 5, rather than adding one <DIV> and <P>, we need to place two <DIV>s and <P>s. The width of the second <DIV> should be guided by the second array of information.

That's it. To have better control over it, we can actually add another table inside the <TD> with two rows and one column, each column having a <DIV> representing the value. The HTML code would look somewhat like this:

       <td><div> VerY[i] </div> </td>
                   <div style='background-color:blue;width:"+HorX1[i]+";/>
                   <p> HorX1[i]</p>
                   <div style='background-color:green;width:"+HorX2[i]+";/>
                   <p> HorX2[i]</p>


Charts developed in such ways using basic HTML can be used very effectively in combination with web development tools and technology such as ASP, ASP.NET, JSP, etc. The only requirement is an array of values that needs to be displayed in the graphical manner. It works with Netscape as well, so scope is further increased automatically. HTML and JavaScript being the basic building blocks for this chart, it is easy to develop, easy to customize and, last but not least, easy to find people to maintain it.

Printing the charts

There is an Internet Explorer setting that determines whether the printing of images and <DIV> background colors is to be allowed. By default, IE settings do not allow the printing of background colors. To change this setting in IE 6, go to the "Tools" menu of IE, select "Internet Options..." and then select the "Advanced" tab. Now scroll down to the "Printing" section and check the checkbox for "Print Background Color and Images." We have the equivalent for this in IE 7 and other good browsers.

IE stores and picks this information from a registry. So, if you want to enable the printing of background colors and images with the script, add the following code in the HTML part of the landing page:

<script language="vbscript">
    on error resume next 
    'Change IE Print Settings to Print Background Color and Images 
    Set WSHShell = CreateObject("WScript.Shell") 
        "HKCU\Software\Microsoft\Internet Explorer\Main\Print_Background", 
    Set WSHShell = Nothing 

Wrapping up

Wonders can be created using the basic building blocks of HTML and DHTML in conjunction with scripts such as JavaScript and VBScript. User experience is best guided by UI and for UI to be fascinating, you don't always need to do hi-fi things. This is the second HTML chart that I am putting across; watch out in this space for more.

Please spare some time to rate and provide feedback about this article. Your couple of minutes can really help enhance its quality. If you're interested, click here to view all my CodeProject articles.


  • 28 March, 2007 -- Original version posted
  • 19 April, 2007 -- First update
  • 27 June, 2007 -- Second update: Benefits section added and downloads updated


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Neeraj Saluja
Web Developer
United States United States
.NET Professional, working with a leading global firm.
Primarily works in .NET using C# with Oracle and MS SQL Server 2000 as backend.
Learning .Net ...
[ My Linked In Profile ^ ]

Comments and Discussions

GeneralMy vote of 3 PinmemberSChristmas27-Nov-12 23:27 
GeneralMy vote of 5 Pinmembermanoj kumar choubey27-Mar-12 23:25 
GeneralMy vote of 5 PinmemberSChristmas16-Jun-11 3:32 
GeneralMy vote of 5 Pinmemberdohyah8-Aug-10 21:57 
GeneralAbout Style Pinmemberzhuangyao8-Aug-09 4:00 
GeneralTQ PinmemberSelene7878-Jul-09 16:45 
GeneralVery useful PinmemberMember 280370927-Apr-09 21:33 
GeneralImpressive PinmemberCrusiatus Black19-Mar-09 9:19 
QuestionHorizontal Bar Chart Pinmemberramakrishnajolla21-Mar-08 0:30 
Generalbar chart Pinmemberbillgate_qn29-Feb-08 6:27 
Generalthe bar's length does not display correctly if the X axis data is low number Pinmemberdpthinh26-Feb-08 15:49 
Generaldisplay like a tree struture in 1.1 Pinmemberkarthikeyan_pa3-Jul-07 3:36 
GeneralPrinting the bar chart PinmemberSimonGulliver126-Apr-07 2:51 
GeneralRe: Printing the bar chart PinmemberNeeraj_Saluja27-Apr-07 1:15 
GeneralNeed help [modified] Pinmemberbolar_smitha19-Apr-07 11:51 
GeneralRe: Need help [modified] PinmemberNeeraj_Saluja19-Apr-07 22:02 
GeneralRe: Need help Pinmemberbolar_smitha20-Apr-07 7:26 
Hi Neeraj,
Thank you for your help. I am using asp and html. I get the data from data base and display it in a table. I thought your horizontal graph will be good to display my data. Please let me know is it possible to copy the chart and paste it in excel or power point . I try to export it to Microsoft excel using right mouse click on the graph. but it did not work. Is there any way I can copy and paste please let me know.

GeneralRe: Need help PinmemberNeeraj_Saluja20-Apr-07 7:41 
GeneralRe: Need help [modified] Pinmemberbolar_smitha20-Apr-07 7:46 
GeneralRe: Need help Pinmemberkarthikeyan_pa3-Jul-07 3:31 
Generalerror Pinmemberdoctrane28-Mar-07 3:03 
GeneralRe: error PinmemberNeeraj_Saluja28-Mar-07 3:08 
Generallike it PinmemberSacha Barber28-Mar-07 0:47 
GeneralRe: like it PinmemberNeeraj_Saluja18-Apr-07 22:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150327.1 | Last Updated 27 Jun 2007
Article Copyright 2007 by Neeraj Saluja
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid