# An SVG HBar chart showing property prices

A Horizontal Bar chart that's showing property prices using the grow effect. The tooltips are customised using the default CSS values (which are applied to the tootlips after they've been created).

This goes in the documents header:

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

Put this where you want the chart to show up:

    <div style="padding: 15px">
        <div style="width: 700px; height: 500px" id="chart-container"></div>
    </div>

This is the code that generates the chart:

    <script>
        data     = [16944000, 16918000, 16029000, 12830000, 12534000, 10842000, 10185000, 4398000, 3656000, 3606000];
        tooltips = [];
        labels   = [
            'Eaton Square (SW1W)',
            'Grovenor Crescent (SW1X)',
            'Ilchester Place (W148)',
            'Lansdowne Road (W112)',
            'Chester Square (SW1W)',
            'Lansdowne Crescent (W112)',
            'Kensington Road (W85N)',
            'Coombe Park (KT27)',
            'The Green (TW91)',
            'Ham Common (TW10)'
        ];

        bar = new RGraph.SVG.HBar({
            id: 'chart-container',
            data: RGraph.SVG.arrayClone(data),
            options: {
                title: 'Average house price (GBP), Jan 2011 - Oct 2016',
                xaxis: false,
                yaxis: false,
                xaxisLabelsCount: 2,
                textSize: 12,
                gutterRight: 50,
                backgroundGridHlines: false,
                backgroundGridBorder: false,
                colors: ['#80004D'],
                yaxisLabels: labels,
                highlightFill: 'rgba(255,255,255,0.25)'
            }
        }).grow({frames: 60, callback: function ()
        {
            RGraph.SVG.redraw();
        }});

        labels.forEach(function (v,k,arr)
        {
            tooltips[k] = '{1}
    {2}'.format(
                v,
                RGraph.SVG.numberFormat({
                    object: bar,
                    num: data[k]
                })
            );
        });

        bar.set('tooltips', tooltips);

        RGraph.SVG.tooltips.style.backgroundColor = 'black';
        RGraph.SVG.tooltips.style.color           = 'white';
        RGraph.SVG.tooltips.style.boxShadow       = '';
        RGraph.SVG.tooltips.style.textAlign       = 'left';
    </script>