An SVG HBar chart with a highlighted bar using the wave effect

This is a Horizontal Bar chart where a single bar has been highlighted with a different color. The chart also has the labelsAbove option enabled, uses the wave effect and also has the background grid disabled.

This goes in the documents header:

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

Put this where you want the chart to show up:

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

This is the code that generates the chart:

<script>
    // The data
    data = [0.1,0.2,0.3,3.2,0.2,0.5,0.5,0.2,0.4,0.8,0,0.1];

    // Build the colors
    colors = RGraph.SVG.arrayFill({
        array: [],
        length: data.length,
        value: '#164366'
    });
    
    // Change the color of the fourth bar
    colors[3] = '#FDB515';

    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: data,
        options: {
            backgroundGrid: false,
            xaxisMax: 3.5,
            xaxis: false,
            xaxisScale: false,
            colors: colors,
            colorsSequential: true,
            yaxisLlabels: ['Norway','Australia','Netherlands','United States','New Zealand','Canada','Ireland','Germany','Sweden','Switzerland','Japan','England and Wales'],
            yaxisLabels: ['January','February','March','April','May','June','July','August','September','October','November','December'],
            labelsAbove: true,
            labelsAboveDecimals: 1,
            yaxisTickmarks: false
        }
    }).wave();
</script>