This Horizontal Bar chart demonstrates the new marginInner
and marginInnerGrouped
settings. The marginInner
is either
side of the group of bars whilst marginInnerGrouped
is between the bars in that group.
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.common.key.js"></script> <script src="RGraph.hbar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="600"> [No canvas support] </canvas>This is the code that generates the chart:
<script> new RGraph.HBar({ id: 'cvs', data: [[8,6,4,3], [4,8,3,5],[4,9,9,7],[6,5,3,4],[3,7,8,8]], options: { grouping: 'grouped', marginInner: 20, yaxisLabels: ['Charlie','Jake','Luis','Jack','Bernie'], key: ['Monday','Tuesday','Wednesday','Thursday'], keyPosition: 'margin', keyColors: ['#3366CC','#DC3912','#FF9900','#109618'], colors: [ 'Gradient(white:#3366CC:#3366CC)', 'Gradient(white:#DC3912:#DC3912)', 'Gradient(white:#FF9900:#FF9900)', 'Gradient(white:#109618:#109618)' ], textSize: 16, xaxis: false, tooltips: [ 'Monday','Tuesday','Wednesday','Thursday', 'Monday','Tuesday','Wednesday','Thursday', 'Monday','Tuesday','Wednesday','Thursday', 'Monday','Tuesday','Wednesday','Thursday', 'Monday','Tuesday','Wednesday','Thursday' ] } }).draw(); </script>