A "Who wants to be a millionaire?" style Bar chart

This is an example of a Bar chart that has been customised to have an appearance similar to the "Who wants to be a millionaire?" "Ask the audience" results bar chart. It uses the draw event in conjunction with the API to draw the text above the bars. The background gradient is done with a CSS linear gradient - it's not drawn on the canvas. The background grid is customised in linewidth and colors, the axes are disabled and the text color is customised too.

The CSS gradient that's used in the canvas tag's style attribute is a straightforward linear gradient but achieves a nice effect for the background of the chart. The relevant CSS is this:

background-image: linear-gradient(45deg, black, blue, black);

It's made up of three parts - an angle for the gradient (which in this case is 45 degrees) and the colors that the gradient uses. There's a whole HOWTO document about CSS gradients here that shows you the various options that are available to you.

There's also an SVG version of this chart in the download archive.

This goes in the documents header:

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

Put this where you want the chart to show up:

<canvas id="cvs" width="300" height="250" style="border-radius: 6px; background-image: linear-gradient(45deg, black, blue, black); box-shadow: #aaa 2px 2px 2px; float: right">[No canvas support]</canvas>

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

<script>    
    // These are the labels that are placed above the Bar chart
    labels = [50,20,15,15];
    
    // Copy the labels and create the data out of them
    data   = RGraph.arrayClone(labels);

    // Create the Bar chart
    bar = new RGraph.Bar({
        id: 'cvs',
        data: data,
        options: {
            
            // Note that the background of the canvas tag is a CSS gradient
            // as well as these configuration properties.
            backgroundGridAlign: false,
            backgroundGridVlinesCount: 8,
            backgroundGridHlinesCount: 10,
            backgroundGridColor: '#6A93CA',
            backgroundGridLinewidth: 3,
            
            // A pink gradient for the bar colors
            colors:['Gradient(#EC06D8:#FEB2FB:#FEB2FB)'],

            yaxisScaleMax: 100,
            marginLeft: 10,
            marginRight: 10,
            marginTop: 30,
            marginBottom: 45,
            yaxisScale: false,
            xaxisLabels: ['A','B','C','D'],
            xaxisLabelsColor: 'yellow',
            xaxis: false,
            yaxis: false,
            textSize: 22,
            textColor: 'rgba(0,0,0,0)',
            textFont: 'Verdana',
            colorsStroke: 'rgba(0,0,0,0)'
        }
    // Use the grow() effect and add a draw event listener
    }).grow().on('draw', function ()
    {
        // Add the labels that are positioned in the top margin. The
        // labelsAbove option places the text just above each bar and
        // we want all the labels in the top margin. Therefore a little
        // custom text is required.
        for (var i=0; i<4; i++) {
            RGraph.text({
                object: bar,
                text:   labels[i] + '%',
                x:      bar.coords[i][0] + (bar.coords[i][2] / 2),
                y:      30,
                color:  'white',
                size:   18,
                halign: 'center',
                font:   'Verdana'
            });
        }
    });
</script>