# An SVG Bar chart using tooltips

A Bar chart with offset axes (so the upper part of the chart is larger than the lower). The data and labels have been adjusted to highlight the weekdays as opposed to the weekends. The tooltips have been customised so that they have a significantly different appearance than what is the default.

This goes in the documents header:

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

Put this where you want the chart to show up:

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

This is the code that generates the chart:

    <script>
        new RGraph.SVG.Bar({
            id: 'chart-container',
            data: [
                112,118,110,91,-49,0,0,
                81,61,-11,51,-31,0,0,
                51,61,-45,-38,-26,0,0,
                58,84,54,63,35,0,0
            ],
            options: {
                xaxisLabels: [
                    'M','T','W','T','F','','',
                    'M','T','W','T','F','','',
                    'M','T','W','T','F','','',
                    'M','T','W','T','F','',''
                ],
                tooltips: [
                    'Monday','Tuesday','Wednesday','Thursday','Friday','','',
                    'Monday','Tuesday','Wednesday','Thursday','Friday','','',
                    'Monday','Tuesday','Wednesday','Thursday','Friday','','',
                    'Monday','Tuesday','Wednesday','Thursday','Friday','',''
                ],
                yaxisUnitsPre: '$',
                yaxisUnitsPost: 'k',
                yaxisDecimals: 1,
                strokestyle: 'rgba(0,0,0,0)',
                gutterLeft: 75,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                colors: ['#aaa'],
                yaxisMin: -50,
                yaxisMax: 200,
                title: 'A Bar chart using tooltips'
            }
        }).draw();

        RGraph.SVG.tooltips.style.fontWeight = 'bold';
        RGraph.SVG.tooltips.style.backgroundColor = 'black';
        RGraph.SVG.tooltips.style.color = 'white';
    </script>