An animated Bar chart

This is a grouped Bar Bar chart with two bars per group which uses red and blue graduated fills. The background grid has been customised and the background itself is a dark color (so the text has been changed to white). Also, the chart is using the Bar chart wave effect. This grows sequentially from the left-hand-side with a small delay between each group of bars.

The two gradients that are used here (Gradient(white:#ccf:#ccf:#ccf:#ccf) and Gradient(white:#faa:#faa:#faa:#faa)) are created by using the RGraph specific gradient syntax. This is an easy way to produce gradients (it's certainly easier than the canvas api method!) and can be utilised to produce gradients for your own charts.

If you wanted to add further information to the chart to identify the meaning of the two bars you could add a key in either the graph or margin modes or you could perhaps use the labelsAbove option.

For smaller screens, the responsive function reduces the size of the chart, reduces the size of the text on the chart and reduces the size of the margins.

This demo shows the new highlighting style - invert. This reverses the highlighting from adding a rectangle over the focused bar to adding rectangles to every rectangle except the focused bar.

The tooltips have no fade effect and are positioned at the top right of the canvas tag by using the tooltip event. This runs a snippet of code that gets the canvas tag x/y coordinates and sets the position of the tooltip accordingly.

This goes in the documents header:

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

Put this where you want the chart to show up:

<canvas id="cvs" width="500" height="250" style="background-color: #333; border-radius: 5px; box-shadow: 2px 2px 2px #999; float: right">[No canvas support]</canvas>

<!-- Center align the tooltip key -->
<style>
    /*
    * .RGraph_tooltip table {
    *    margin-left: auto;
    *    margin-right: auto;
    * }
    */
</style>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    // This is the data that gets displayed on the Bar chart. It's a
    // 2D array so that a grouped Bar chart can be shown. A 2D array
    // is also how you show a stacked chart but you have to also specify
    // the grouping configuration property.
    data = [[45,56],[75,32],[39,47],[34,48],[46,47],[48,52]];

    // Create the Bar chart and pass it the data
    bar = new RGraph.Bar({
        id: 'cvs',
        data: data,
        options: {
            shadow: false,
            colorsStroke: 'rgba(0,0,0,0)',
            grouping: 'grouped',
            
            // Use the RGraph specific syntax for gradients
            colors: [
                'Gradient(white:#ccf:#ccf:#ccf:#ccf)',
                'Gradient(white:#faa:#faa:#faa:#faa)'
            ],

            // No vertical background grid lines or border
            backgroundGridVlines: false,
            backgroundGridBorder: false,

            textColor: 'white',
            xaxisLabels: ['2007','2008','2009','2011','2012','2013'],
            marginTop: 15,
            marginRight: 5,
            xaxis: false,
            yaxis: false,
            
            // These configuration properties make up the tooltips using the
            // new formatted tooltips feature and the tooltipsCss property.
            myNames: ['Peter','Charles'],
            tooltips: 'Sales results in <span style="font-size: 14pt;font-style:italic">%{property:xaxisLabels[%{dataset}]}:%{key}',
            tooltipsFormattedKeyColors: ['#aaf', 'pink'],
            tooltipsFormattedUnitsPre: '$',
            tooltipsFormattedUnitsPost:',000,000',
            tooltipsPointer: false,
            tooltipsPositionStatic: false,
            tooltipsCss: {
                fontSize: '16pt',
                border: '5px solid #666',
                textAlign: 'left',
                pointerEvents: 'none',
            },
            tooltipsEffect: 'none',
            tooltipsEvent: 'mousemove',
            
            // Use the newer highlight inverting so that the bars that aren't highlighted
            // are faded out.
            highlightStyle: 'invert',
            highlightFill: 'rgba(0,0,0,0.5)'
        }
    
    // The wave() effect is used to show the chart
    }).wave().responsive([        
        {maxWidth: null, width: 500, height: 250, options: {textSize: 16, marginLeft: 35, marginBottom: 35}},
        {maxWidth: 900,  width: 300, height: 150, options: {textSize: 10,  marginLeft: 25, marginBottom: 20}}
    
    // This tooltip event code runs when a tooltip is shown and positions the tooltip at the top of,
    // and on the left of, the canvas.
    ]).on('tooltip', function (obj)
    {
        // Get a reference to ths canvas
        var canvas = obj.canvas;

        // Use the RGraph API to get the canvas coordinates
        var canvasXY = RGraph.getCanvasXY(obj.canvas);
        
        // Get the tooltip DIV tag object from the RGraph Registry
        var tooltip  = RGraph.Registry.get('tooltip');
        
        // Set the x/y coordinates of the tooltip DIV tag
        tooltip.style.top  = canvasXY[1] - (tooltip.offsetHeight / 2) - 5 + 'px';
        tooltip.style.left = canvasXY[0] + canvas.width - tooltip.offsetWidth - 5 + 'px';
    });
</script>