# 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