An attractive new Horizontal Bar chart demo

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,
            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,

            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>