A sketchy Bar chart

Here's a nice, amusing chart that's rather different from the other charts that are shown on this site.

It uses the variant: 'sketch' option so that instead of the normal style that Bar charts are drawn with the chart is drawn with a sketchy style. The title also uses this font.

The y-axis labels are done using the yaxisLabelsSpecific option with just two labels - so one appears at the top and one at the bottom.

The font that's used by the chart is set by setting the textFont property (which is the default font for the chart) and is set to Comic San MS which complements the style of the chart well.

The labelsAbove and labelsAboveSpecific options are used to get the text that appears above the bars - and this text ends up using the default font that is set on the chart (Comic Sans MS).

With smaller screens, the chart looks much the same - just smaller. This is done by changing sizes of text (eg the labels and the title), the size of the canvas is reduced and the parent elements css float is removed.

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:

<div style="float: right; margin-top: 25px">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
</div>

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

<script>
    // Create the Bar chart and give it some data. This chart is
    // made to look sketchy by supplying the variant property and
    // setting it to 'sketch'
    new RGraph.Bar({
        id: 'cvs',
        data: [50,40,10,-25,-50,50],
        options: {
            colors: ['black'],
            yaxis: false,
            yaxisLabelsSpecific: ['Very cool', 'Uncool'],
            marginLeft: 100,
            marginBottom: 115,
            marginTop: 75,
            variant: 'sketch',
            
            /// You can uncomment this if you don't want the inner vertical
            // lines
            //variantSketchVerticals: false,

            // The font that's used for the text on the chart is set to
            // Comic sans MS. This style of font fits well with the
            // sketchy drawing style.
            textFont: 'Comic sans MS',

            linewidth: 1,
            backgroundGrid: false,
            title: 'Things to release at a wedding',
            
            // The labelsAbove labels serve as the labels for the chart
            labelsAbove: true,
            labelsAboveOffsety: 10,
            labelsAboveSpecific: ['Butterflies', 'Doves', 'Pidgeons', 'Wasps', 'Prisoners', 'The Kraken'],
            
            responsive: [
                {maxWidth: null,width:600,height: 250,options: {titleY:25,textSize: 12,marginInner: 15,marginBottom:100,titleSize: 20},parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth: 800,width:400,height: 200,options: {titleY: 10,textSize: 8,marginInner: 5,marginBottom:65,titleSize: 15},parentCss:{'float':'none',textAlign:'center'}}
            ]
        }
    }).draw();
</script>