Menu
I'm trying to create a horizontal bar chart in plain HTML. (For what I'm trying to do, the requirement is that everything fit in a single foo.html file; inline CSS is okay, but no JavaScript, no external PNG images.) The classic technique for this kind of thing seems to be setting the width and background color of table cells, so I got as far as this simple test case:
<!DOCTYPE html>
<html lang="en">
<body>
<table>
<tr>
<td>First</td>
<td>
<div style='background-color:blue; width:500'>
Blue
</div>
</td>
</tr>
<tr>
<td>Second</td>
<td>
<div style='background-color:green; width:1000'>
Green
</div>
</td>
</tr>
</table>
</body>
</html>
This does not work; when I load it in the latest version of Chrome, the blue and green bars appear in their correct colors, but both at the same very short length, ignoring the specified width numbers.
However, if I delete the first line, the DOCTYPE tag, it works perfectly! The blue and green bars appear at their specified lengths.
But the HTML validator says DOCTYPE really should be present, and I'm afraid omitting it just drops the browser into some older mode that might be now deprecated and might stop being supported in the future.
What is the best way to get this to work?
345
Just add 'px' after the values.
<!DOCTYPE html>
<html lang="en">
<body>
<table>
<tr>
<td>First</td>
<td>
<div style='background-color:blue; width:500px'>
Blue
</div>
</td>
</tr>
<tr>
<td>Second</td>
<td>
<div style='background-color:green; width:1000px'>
Green
</div>
</td>
</tr>
</table>
</body>
</html>
113
answered Mar 26 '26 17:03
You can embed inline SVG code using the <svg> tag in HTML5, and even apply CSS properties to its elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<Title>Bar Chart Example</title>
<style>
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<svg class="chart" width="100%" height="120">
<g transform="translate(0,0)">
<rect width="40" height="19" fill="blue"></rect>
<text x="37" y="9.5" dy=".35em">4</text>
</g>
<g transform="translate(0,20)">
<rect width="80" height="19" fill="green"></rect>
<text x="77" y="9.5" dy=".35em">8</text>
</g>
<g transform="translate(0,40)">
<rect width="150" height="19" fill="orange"></rect>
<text x="147" y="9.5" dy=".35em">15</text>
</g>
<g transform="translate(0,60)">
<rect width="160" height="19" fill="magenta"></rect>
<text x="157" y="9.5" dy=".35em">16</text>
</g>
<g transform="translate(0,80)">
<rect width="230" height="19" fill="darkcyan"></rect>
<text x="227" y="9.5" dy=".35em">23</text>
</g>
<g transform="translate(0,100)">
<rect width="420" height="19" fill="red"></rect>
<text x="417" y="9.5" dy=".35em">42</text>
</g>
</svg>
</body>
</html>
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
} <svg class="chart" width="100%" height="120">
<g transform="translate(0,0)">
<rect width="40" height="19" fill="blue"></rect>
<text x="37" y="9.5" dy=".35em">4</text>
</g>
<g transform="translate(0,20)">
<rect width="80" height="19" fill="green"></rect>
<text x="77" y="9.5" dy=".35em">8</text>
</g>
<g transform="translate(0,40)">
<rect width="150" height="19" fill="orange"></rect>
<text x="147" y="9.5" dy=".35em">15</text>
</g>
<g transform="translate(0,60)">
<rect width="160" height="19" fill="magenta"></rect>
<text x="157" y="9.5" dy=".35em">16</text>
</g>
<g transform="translate(0,80)">
<rect width="230" height="19" fill="darkcyan"></rect>
<text x="227" y="9.5" dy=".35em">23</text>
</g>
<g transform="translate(0,100)">
<rect width="420" height="19" fill="red"></rect>
<text x="417" y="9.5" dy=".35em">42</text>
</g>
</svg>The above is based on an example from here or here, and you can tweak it to your heart’s content. For example, specifying dark caption text to display on top of a light color, adding a border, changing the background color, or adding rules. I haven’t tested with every browser out there, but it passes the W3C validator.
You could also use this with SVGs generated by an image editor or spreadsheet, and with different kinds of graphs.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
