Hello. I want to add bar charts to my website to help people visualize data.
I see lots of different approaches online, but am unsure which is the right way to do things.
What is the most modern (and responsive) way to create bar charts using just HTML and CSS?
(*Note: I am not interested in using Google or any Javascript libraries.)
Well like everything else with technology, there is never truly a “right” way to do things. However, I will say that if you are looking to do something without JavaScript, you are going to be hard pressed. Charts are usually interactive. Even if that interaction is just to show data when someone hovers over one of the bars.
I am not quite sure why you are against JavaScript libraries. But if you truly want to go that way, you probably will need to look at something like vector graphics (SVG) and CSS animations (like keyframes). Even canvas based charts usually work with some kind of JavaScript so you may not find anything with that.
Honestly, if you can, I would reconsider having some JS libraries because there are a lot of nice ones… amcharts, highcharts, D3.js etc.
Right now I don’t need/want interactive bar charts. And I have seen lots of examples just using HTML/CSS/maybe SVG that look very professional.
But why I started this thread, is that I do not want to spend a lot of time learning how to create a bar chart and then find out it is an outdated approach or that it is not responsive. (I have a bad habit of learning the wrong/outdated way of doing things, and that really hurts down the road!)
1.) They are cheating.
2.) I don’t know Javascript, nor do I have time to learn it right now.
But I don’t need animation.
And I will add that this will be driven by PHP and MySQL, so in that sense the bar charts are dynamic, but I don’t need people hovering or clicking right now to see more.
Maybe I can learn JavaScript in 2022 and then that is an option. But not right now.
I started looking into this a month ago, but have been busy finishing my website.
While skimming, I saw one approach was to use HTML tables, but that seems like a bad idea.
Another approach I think used DIVs.
Then there were some much fancier approaches using parts of CSS3 that I haven’t even heard of, so I wasn’t sure about those.
Hopefully some of the gurus hear can point me into the right direction so any code I write is proper code and will last me a while and work on mobile too…
Here ya go I made one you can use click edit on codepen for the correct view.
Thanks for the sample.
Is using HTML tables a good idea in 2021?
Seems like your approach might be outdated.
Any thoughts from other which approaches might be better than others?
Also, I’ll add that ideally I want to learn how to make all kinds of professional looking graphs and charts (e.g. pie charts, horizontal bar charts, vertical bar charts, graphs, etc.)
So any approach that will work for those different types probably makes more sense. (Which is another reason that maybe learning to use HTML tables isn’t so flexible.)
I think it is a Bad Idea unless it is styled that’s because with advanced coding your website will look dumb without styling the visitor has a higher chance of leaving because all the other websites are styled so they find yours weird and bad.
The good thing is if you use a table with styling it might look like a normal one that you see in cartoons, newspapers and etc…
I can give you a pie chat is that OK?
Hi there ULP,
here is a very basic svg example…
Full Page View:-
https://codepen.io/coothead/full/jOVoQyG
Editor View:-
https://codepen.io/coothead/pen/jOVoQyG
Of course, being an svg, it is fully responsive
from the outset. 
SVG eats Pie charts for breakfast. 
coothead
This might be worth looking into: https://chartscss.org/
Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts.
Here’s how you would do a bar chart: https://chartscss.org/charts/bar/
@Coot,
You are always amazing!
So I am waking up and looking at your code now.
Can you please explain what this does…
<rect x="12" y="10" I mean I understand basic geometry, but the coordinates combined with the heights aren’t making sense. (I would expect an increasing “X” and a “Y=0” since each bar is coming off the Y-axis which would always be “0”.
Since you are a design guru, which approach do you think is best?
I’m old-school and believe a lot in leveraging semantics on web pages - which is one reason I hate Javascript - but @coothead has provided some pretty cool examples in the past using SVG!
Is it bad to lose the underlying HTML table/semantics aspect when you go with SVG?
Or is it possible to get a pretty (and responsive) bar chart like @Coot provided, and still make things more search-engine friendly and accessible for visually impaired users?
For now, I mostly need horizontal bar charts, vertical bar charts, and pie charts. (Down the road, having exploded pie charts, area charts and line graphs would be a plus.)
What do you think about all of that?
It sets the position of the top left corner of the rectangle.
This means that this rectangle…
<rect x="12" y="10" width="24" height="110" fill="#f00"/>…will have these other coordinates…
I will make another example using path instead of rect,
which will, unlike the rect, create a rectangle from bottom
to top. 
coothead
When I learned charting in junior-high, the X-axis and Y-axis formed a large “+” in the center of your paper. As you went to the right, X increased, and as you went up, Y increased.
So (3,3) would go from the center of the page to the right 3 units, then up 3 units.
(-3,3) would go left 3 units, and up 3 units.
(-3,-3) would go left 3 units, and down 3 units.
(3,-3) would go right 3 units, and down 3 units.
That is how I learned X,Y coordinates, but it seems that SVG’s are different?
So with SVG, (0,0) is in the top left corner of your screen (or parent container)?
If the bar is 24 units wide, would the top-right be X=“36”, as in X=12 + 24?
Where is Y=10 compared to Y=110?
This is how I learned plotting…
In simple language y=10 is above y=110 in SVG code
and has no relationship with plane geometry.
I forgot to mention that in my svg example the plane geometry’s 0, 0
position is represented by x="12 and y=“110”.
coothead
I like Coot’s example above.
Any reasons to not use an SVG approach tp graphs and charts?
From the little I have read, it sounds like SVG should be accessible, but that’s not entirely clear to me. (It sounds like using HTML5’s canvas element is evil…)
@UpstateLeafPeeper
My first venture into SVG was to follow this tutorial:
I prefer to resist the temptation of using the width and height SVG coordinates and to specify dimensions of viewBox(…) instead. This method creates a scalable SVG which expands to the parent container, ideal for making the web page responsive without resorting to convoluted CSS rules,
<svg width="500" height="200" viewBox="0 0 50 20" >
<rect x="20" y="10" width="10" height="5"
style="stroke: #000000; fill:none;"/>
</svg>
Very cool… Thanks!
is there a way to make the coordinates so they follw normal conventions on a graph, where the crossing of X and Y is (0,0)?
I found by plotting the coordinates using a pen and paper was easier to visualize. Just accept the difference and go with the flow
No, as was pointed out in post #13…
“SVG code has no relationship with plane geometry convention.”
SVG’s 0,0 is the top left.
Picture it this way, if you were making a Cartesian diagram on
a piece of paper, you would draw the two intersecting lines in a
position that suited your requirements. You would then assign
( 0, 0 ) to be the coordinates of that intersection. But you must
understand that the Cartesian ( 0, 0 ) of your construction which
you seem to consider as absolute is actually just an arbitrary
position relative to the top left of your piece of paper.
In my example, as I was only concerned with quadrant one, the
( 0, 0 ) was set at 12 to the right of the left corner and 110 down
from the left corner.
coothead
@Coot,
Apparently I’m not the only grumbling about this. And I did see a few “hacks” to make the lower-left corner (0,0), but they seemed convoluted, and not knowing SVG yet, I didn’t bother to investigate further.
Unless anyone speaks up, I guess using SVG would be the best way to go for any graphs and charts that I want to create. (Definitely better thank Javascript and not reliant on HTML5 canvas.)
Assuming SVG is the way to go, and since you are much more versed in SVG than I am…
1.) Is it safe to say that I can create nearly any graph or chart that I want using SVG, or does it have limitations?
2.) And other than Javascript, is there some other approach - maybe CSS3 - that can do things that SVG cannot do?
I’m not a design guru but since you asked…
First and foremost the important part is that the data is presented in semantic elements suitable for the purpose. Most data should likely be in a table and provide the correlation between rows and columns as expected. However it is also possible to make svg’s accessible but is quite convoluted.
If you have accounted for the semantics and displayed the data correctly then you can visually add your bar chart by other means (such as images or svg or whatever) as the semantics are already catered for on the table version. i.e. That assumes you have both the table/list for the actual data and an image/svg as a separate visual.
However if you only want data displayed as a drawing (and not as a table or list etc) then you either need first to create the semantic html (most likely a table) and change the look of that html to look like your graph or bar chart. Or alternatively, if you use SVG only for your graph then you will need to jump through some hoops to make it accessible. There’s is an in-depth tutorial here for a bar chart example.
For simple bar charts you can convert a table with data into a bar chart in plain css and html and that would be my preferred approach.
Something like this which will scale down for mobile.
(The inline css is so that the data can be populated by the backend more easily).
My preference is to use html tables to display the data and then try to style the table as a graph/bar chart but this is not always possible or easy. In more complex examples you may indeed have to resort to svg or suitable libraries as others have already mentioned.