Here we have a Horizontal Bar chart that has been significantly customised. The DIV tag that the chart sits in has had a gradient applied to the background, the bars themselves have been given a gradient, the background grid has been updated, the labelsAbove option has been added and there is a wave effect too.
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, xaxisUnitsPre: '$', xaxisUnitsPost: 'm' } }).wave(); </script>