An example of a 3D stacked Bar chart. It's animated by using the wave effect and has a title. There's also tooltips which use the ontooltips custom RGraph event in order to colorise the border of the tooltips (using CSS). It also uses the RGraph.SVG.tooltips.style object to set some defaults for the tooltips.
This goes in the documents header:<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> data = [[4,8,3],[5,2,1], [8,4,2],[3,6,1],[5,1,3],[2,5,1],[1,2,3]]; tooltips = RGraph.SVG.arrayLinearize(data); tooltips.forEach(function (v,k,arr) { arr[k] = 'Result: {1},000m'.format( arr[k] ); }); var bar = new RGraph.SVG.Bar({ id: 'chart-container', data: data, options: { variant: '3d', grouping: 'stacked', colorsStroke: 'rgba(0,0,0,)', colors: ['Gradient(#faa:#fbb)','Gradient(#aaa:#bfb)','Gradient(#aaf:#bbf)'], marginTop: 30, marginLeft: 45, marginBottom: 80, xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'], xaxisColor: '#ddd', xaxisTickmarks: false, yaxisColor: '#ddd', yaxisScaleUnitsPost: 'km', yaxisTickmarks: false, tooltips: tooltips, shadow: false, backgroundGridColor: '#eee', title: 'Distance run in the past week', titleY: 10, hmargin: 3 } }).wave().on('tooltip', function (obj) { var tooltip = RGraph.SVG.REG.get('tooltip'), idx = RGraph.SVG.sequentialIndexToGrouped(tooltip.__index__, obj.data), colors = ['red','#0f0','blue']; tooltip.style.borderColor = colors[idx[1]]; }); // 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 black solid'; RGraph.SVG.tooltips.style.borderWidth = '3px'; </script>