This is a demo of a 3D Bar chart that's configured to look like a vertical progress bar - ie which has just a single bar. It has a tooltip, uses the tooltip
RGraph event to set the border color and uses the RGraph.SVG.tooltips.style
object to set some default styles. Because there's only a single bar/dataset there's actually no need to use the tooltip
event - you could just set the border color as a default instead.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="width: 350px; height: 300px" id="chart-container"></div>This is the code that generates the chart:
<script> value = 89; vprogress = new RGraph.SVG.Bar({ id: 'chart-container', data: [value], options: { variant: '3d', grouping: 'stacked', colorsStroke: 'rgba(0,0,0,)', colors: ['Gradient(#aaa:#bfb)'], marginTop: 30, marginLeft: 65, marginRight: 35, marginBottom: 35, xaxisLabels: ['Result'], xaxisColor: '#ddd', xaxisTickmarks: false, yaxisColor: '#ddd', yaxisScaleUnitsPost: 'km', yaxisTickmarks: false, shadow: false, backgroundGridColor: '#eee', titleY: 10, marginInner: 3, tooltips: ['Result: {1},000m'.format(value)], yaxisScaleMax: 100 } }).draw().on('tooltip', function (obj) { var tooltip = RGraph.SVG.REG.get('tooltip'), idx = RGraph.SVG.sequentialIndexToGrouped(tooltip.__index__, obj.data); tooltip.style.borderColor = '#0f0'; }); // Some CSS that gets used for the tooltips RGraph.SVG.tooltips.style.fontSize = '105%'; RGraph.SVG.tooltips.style.fontFamily = 'Arial, sans-serif'; RGraph.SVG.tooltips.style.fontWeight = 'bold'; RGraph.SVG.tooltips.style.paddingRight = '10px'; RGraph.SVG.tooltips.style.paddingLeft = '10px'; RGraph.SVG.tooltips.style.paddingTop = '10px'; RGraph.SVG.tooltips.style.paddingBottom = '10px'; RGraph.SVG.tooltips.style.textAlign = 'center'; RGraph.SVG.tooltips.style.backgroundColor = 'white'; RGraph.SVG.tooltips.style.border = '3px #0f0 solid'; RGraph.SVG.tooltips.style.borderWidth = '3px'; </script>