# A Horizontal Bar chart showing election results

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.tooltips.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.hbar.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="1000" height="400">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
        new RGraph.HBar({
            id: 'cvs',
            data: [408,242],
            options: {
                labels: ['Leave','Remain'],
                scaleZerostart: true,
                vmargin: 50,
                noxaxis: true,
                axisColor: '#ccc',
                xlabelsCount: 18,
                textColor: '#666',
                backgroundGridBorder: false,
                backgroundGridHlines: false,
                backgroundGridAutofitNumvlines: 18,
                labelsAbove: true,
                tooltips: [
                    'Seats: <b>408</b><br /><span style="color: #666">The Leave campaign won a significant<br />majority with a total of 408 seats.</span>',
                    'Seats: <b>242</b><br /><span style="color: #666">The Remain campaign fought valiantly<br />but, alas, it was to no avail.</span>'
                ],
                highlightFill: 'rgba(255,255,255,0.4)',
                title: 'Leave vs Remain - General election seats won based on EU referendum results',
                titleX: 75,
                titleHalign: 'left',
                titleColor: 'gray'
            }
        }).grow();

        RGraph.tooltips.style.textAlign = 'left';
    </script>