A thin Bar chart

This is a demo of a chart that has a good deal of thin bars - most of which are negative. The chart is animated using the grow() effect and the borders of the tooltips are colored according to the color of the bars. The whole thing is generated by using the CSV reader along with CSV data.

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.csv.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up:
<div style="width: 950px; height: 350px; display: inline-block" id="chart-container"></div>
This is the code that generates the chart:
<script>
    csv = "`87 Q1,-0.1\n`87 Q2,-1.6\n`87 Q3,-1.8\n`87 Q4,-3\n`88 Q1,-3.3\n`88 Q2,-3.3\n`88 Q3,-3.3\n`88 Q4,-5.1\n`89 Q1,-4.2\n`89 Q2,-4.6\n`89 Q3,-4.9\n`89 Q4,-3.8\n`90 Q1,-4.3\n`90 Q2,-4.1\n`90 Q3,-2.4\n`90 Q4,-2.5\n`91 Q1,-1.8\n`91 Q2,-1\n`91 Q3,-1.5\n`91 Q4,-1.1\n`92 Q1,-1.3\n`92 Q2,-1.7\n`92 Q3,-1.9\n`92 Q4,-1.6\n`93 Q1,-1.3\n`93 Q2,-1.8\n`93 Q3,-1.3\n`93 Q4,-1.2\n`94 Q1,-0.5\n`94 Q2,-0.9\n`94 Q3,-0.2\n`94 Q4,-0.3\n`95 Q1,0.4\n`95 Q2,-1.5\n`95 Q3,-1.2\n`95 Q4,-0.5\n`96 Q1,-0.7\n`96 Q2,-0.5\n`96 Q3,-0.6\n`96 Q4,-0.5\n`97 Q1,-0.3\n`97 Q2,-0.2\n`97 Q3,0.7\n`97 Q4,-1\n`98 Q1,-1\n`98 Q2,-1.3\n`98 Q3,0.8\n`98 Q4,-0.2\n`99 Q1,-2.7\n`99 Q2,-2.2\n`99 Q3,-2.6\n`99 Q4,-2.1\n`00 Q1,-2.1\n`00 Q2,-2.5\n`00 Q3,-2.2\n`00 Q4,-1.9\n`01 Q1,-1.6\n`01 Q2,-2.3\n`01 Q3,-2.1\n`01 Q4,-1.8\n`02 Q1,-2\n`02 Q2,-2.6\n`02 Q3,-1.6\n`02 Q4,-1.7\n`03 Q1,-0.9\n`03 Q2,-2\n`03 Q3,-2.3\n`03 Q4,-1.3\n`04 Q1,-1.8\n`04 Q2,-1.7\n`04 Q3,-2.8\n`04 Q4,-0.8\n`05 Q1,-1.3\n`05 Q2,-0.1\n`05 Q3,-1.7\n`05 Q4,-1.6\n`06 Q1,-2.1\n`06 Q2,-1.4\n`06 Q3,-2.8\n`07 Q1,-2.6\n`07 Q2,-1.5\n`07 Q3,-3.1\n`07 Q4,-2.5\n`08 Q1,-3.2\n`08 Q2,-3.9\n`08 Q3,-3.1\n`08 Q4,-3.9\n`09 Q1,-4.6\n`09 Q2,-3.9\n`09 Q3,-1.5\n`09 Q4,-1.9\n`10 Q1,-2.5\n`10 Q2,-2.1\n`10 Q3,-3.5\n`10 Q4,-2.8\n`11 Q1,-1\n`11 Q2,-0.2\n`11 Q3,-3\n`11 Q4,-2.9\n`12 Q1,-2.8\n`12 Q2,-4.1\n`12 Q3,-3.5\n`12 Q4,-4.3\n`13 Q1,-3.7\n`13 Q2,-3.2\n`13 Q3,-4.7\n`13 Q4,-6\n`14 Q1,-4.7\n`14 Q2,-3.9\n`14 Q3,-4.6\n`14 Q4,-5.4\n`15 Q1,-5.4\n`15 Q2,-4.7\n`15 Q3,-4.4\n`15 Q4,-7\n`16 Q1,-5.7\n`16 Q2,-5.9"

    new RGraph.CSV('str:' + csv, function (csv)
    {
        var labels   = csv.getCol(0),
            data     = csv.getCol(1),
            colors   = [],
            tooltips = [];

        data.forEach(function (v,k,arr)
        {
            colors[k] = v > 0 ? '#7CB5EC' : '#B03060';
        });
        
        var crlf = false;

        labels.forEach(function (v,k,arr)
        {
            tooltips[k] = '{2}

Current account deficit: {1}'.format( data[k], labels[k] ); if (k % 8 !== 0) { labels[k] = ''; } }); new RGraph.SVG.Bar({ id: 'chart-container', data: data, options: { yaxis:false, yaxisLabelsOffsetx: -10, yaxisScaleMin: -8, yaxisScaleMax: 2, xaxis: false, xaxisLabels: labels, xaxisLabelsOffsety: 10, tooltips: tooltips, tooltipsEvent: 'mouseover', tooltipsEffect: 'none', textSize: 9, textColor: 'gray', title: 'Britain\'s current account deficit is bigger than at the height of the Lawson boom', titleSize: 12, titleBold: true, backgroundGridVlines: false, backgroundGridBorder: false, marginLeft: 50, marginBottom: 50, colors: colors, colorsSequential: true, hmargin: 2 } }).on('tooltip', function (obj) { var tooltip = RGraph.SVG.REG.get('tooltip'); var index = tooltip.__index__; if (data[index] > 0) { tooltip.style.borderColor = 'blue'; } }).grow({frames: 60}); RGraph.SVG.tooltips.style.textAlign = 'left'; RGraph.SVG.tooltips.style.border = '1px solid red'; RGraph.SVG.tooltips.style.backgroundColor = 'white'; RGraph.SVG.tooltips.style.padding = '10px'; }); </script>