An SVG Bar/HBar combo chart
View the bare-bones version of this demo with any interactive features or animations enabled

She founded Bet365 - an online gambling firm. Who would have guessed that gambling could be so profitable?! Ok perhaps everyone in the world! Personally though, if a company that I started earned just (?) five million pounds - I'd retire!
The chart itself is quite straightforward with a single solid color for the bars, a small
marginInner
setting and large text. Being like this though makes the clarity
of the chart quite good.
It also uses the labelsAbove
setting to show the exact figures that the bars
represent.
For smaller screens, the chart is switched from being
a Bar chart to a HBar chart. There's another, canvas
example of this in
the download archive
called bar-hbar-responsive.html
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.bar.js"></script> <script src="RGraph.svg.hbar.js"></script>Put this where you want the chart to show up:
<div style="float: right"> <div style="width: 600px; height: 250px;" id="chart-container1"></div> <div style="width: 350px; height: 650px;" id="chart-container2"></div> </div>This is the code that generates the chart - it should be placed AFTER the
div
tag: