An attractive new Horizontal Bar chart demo
Written by Richard Heyes, on 27th April 2021
Now that the majority of the demos are no longer online I've stopped making new demos as
frequently - but here's a new Horizontal Bar chart
demo that can be made with
the existing release
- version 6 - so you could take the source code that you see below and make your own demo
if you wanted to. It's just a normal Horizontal Bar chart
but it uses a Vertical Bar chart
behind it to get the background bars. It's animated, though to see it you need to click the
button that's below the chart (because when the page loads the chart is out-of-sight).
Here's the chart:
<!-- Load all of the necessary RGraph libraries -->
<script src="RGraph.common.core.js" ></script>
<script src="RGraph.common.dynamic.js" ></script>
<script src="RGraph.common.tooltips.js" ></script>
<script src="RGraph.bar.js" ></script>
<script src="RGraph.hbar.js" ></script>
<!--
The chart itself only requires the canvas
. The container div tag
and the button are just there for this website
and the animation.
-->
<div style="text-align: center; margin-top: 50px">
<canvas id="cvs_hbar_fortune_500" width="820" height="250">[No canvas support]</canvas><br />
<button style="font-size: 16pt; cursor: pointer" onclick="hbar_fortune_500.grow({frames: 45})">Animate!</button>
</div>
<script> // This is used for both the tooltips and the Y-axis labels countries = ['US','China','Japan','France','Germany','Britain','Switzerland','Netherlands','South Korea','Canada','Australia','Italy','India','Brazil','Spain','Russia','Taiwan','Sweden']; // The data that's shown on the HBar chart data = [134,103,52,29,28,25,15,12,15,11,8,9,7,7,9,5,7,3]; // The Bar chart is used to get the background vertical bars bar_fortune_500 = new RGraph.Bar({ id: 'cvs_hbar_fortune_500', data:[1,0,1,0,1,0,1], options: { backgroundGrid: false, marginInner: 0, xaxis: false, yaxis: false, yaxisScale: false, marginBottom: 5, marginTop: 5, marginRight: 5, colors: ['#ccc'] } }).draw(); // The HBar configuration hbar_fortune_500 = new RGraph.HBar({ id: 'cvs_hbar_fortune_500', data: data, options: { xaxisLabelsCount: 7, xaxisLabelsSize: 10, xaxisLabelsOffsety: 5, xaxisPosition: 'top', xaxisTitle: 'Number of Fortune 500 company\'s', xaxisTitleSize: 16, xaxisScaleMax: 140, yaxisLabels: countries, yaxisLabelsSize: 8, xaxis: false, yaxis: false, backgroundGrid: false, colors: ['black'], marginInner: 1, marginBottom: 5, marginTop: 5, marginRight: 5, // Use tooltip templates to specify the tooltips tooltips: '<i style="font-size: 12pt">July 2019 count:</i><br />%{global:countries[%{dataset}]}: %{global:data[%{dataset}]}', tooltipsPointer: false, tooltipsEvent: 'mousemove', tooltipsEffect: 'none', tooltipsPositionStatic: false, // Add some CSS that's applied to the tooltips tooltipsCss: { paddingTop: 0, backgroundColor: 'rgba(255,255,255,0.9)', color: 'black', border: '2px solid black', fontSize: '20pt', pointerEvents: 'none' } } }).draw() // Add the responsive configuration so that the chart // fits on smaller screens hbar_fortune_500.responsive([ {maxWidth: null, width: 600, height: 250}, {maxWidth: 900, width: 400, height: 150} ]); // Set the bar chart left margin to the same as the hbar. bar_fortune_500.set( 'marginLeft', hbar_fortune_500.get('marginLeft') ); RGraph.redraw(); </script>