Vertical Progress bar
The Bar chart
can be customised to appear as a Vertical Progress bar
. This
means that all of the properties that pertain to the Bar chart
, such as
tooltips, can be used as well.
There's an example in the download archive
that you can see here.
Example
<script> // This Bar chart becomes the background of the progress bar new RGraph.SVG.Bar({ id: 'chart-container', data: [100], options: { colors: ['Gradient(#eee:white)'], marginLeft: 45, marginRight: 5, backgroundGrid: false, colorsStroke: '#ccc', marginInner: 10, yaxis: false, yaxisScale: false, xaxis: false, linewidth: .5, shadow: true, shadowOpacity: .1 } }).draw(); // This Bar chart becomes the inner bar of the progress bar new RGraph.SVG.Bar({ id: 'chart-container', data: [73], options: { yaxisScaleMax: 100, yaxisScaleUnitsPost: '%', yaxisTextColor: '#666', yaxis: false, xaxis: false, shadow: true, shadowOffsetx: 1, shadowOffsety: 1, shadowBlur: 1, titleColor: '#666', colors: ['Gradient(red:#fcc)'], backgroundGrid: false, tooltips: ['Monday was an average day'], tooltipsCss: { backgroundColor: '#333', fontWeight: 'bold', fontSize: '14pt', opacity: 0.85 }, marginLeft: 45, marginRight: 5, marginInner: 15 } }).grow(); </script>