An SVG HBar chart showing the annual revenue for Star Tech

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:

<style>
    div#chart-container {
        width: 650px;
        height: 300px;
        display: inline-block;
        background-image: linear-gradient(45deg, #000049,#0000CB);
        border-bottom-right-radius: 25px;
        border-top-left-radius: 25px;
    }
</style>

<div id="chart-container"></div>

This is the code that generates the chart:

<script>
    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [2650, 2300, 1950, 1600, 1350],
        options: {
            data: [2650, 2300, 1950, 1600, 1350],
            options: {
            yaxisLabels: ['2005','2004', '2003', '2002','2001'],
            yaxisColor: 'white',
            yaxisTickmarks: null,
            xaxis: false,
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            backgroundGridColor: 'white',
            title: 'Annual revenue for Star Tech',
            titleColor: 'white',
            textColor: 'white',
            textSize: 8,
            textFont: 'sans-serif',
            colors: [
                'Gradient(#9B68C0:#E4C1FD)',
                'Gradient(#9B9B9B:#E5E5E5)',
                'Gradient(#B38D1A:#F7DD91)',
                'Gradient(#4E81B4:#B2D4F6)',
                'Gradient(#9B0303:#E57F7F)'
            ],
            colorsSequential: true,
            labelsAbove: true,
            attributionX: '-50',
            attributionSize: 6,
            attributionColor: 'white',
            xaxisUnitsPre: '$',
            xaxisUnitsPost: 'm'
        }
    }).wave();
</script>

« Back