Negative horizontal margin on a Bar chart
This is a demo of a combined (grouped) Bar and Line chart
where the marginInnerGrouped
setting on the Bar chart
has been set to -15
, This gives the appearance of the bars
overlapping each other slightly.
It has dual Y-axes
by utilising the drawing api
y-axis
object and the colors have been specifically set
to what they are to link the bars and lines together.
The Lines also have slightly larger-than-normal tickmarks for a nicer aesthetic and the whole chart uses slightly larger-than-the-default text.
In terms of responsive
features, there's not much done by the Line chart
- though there's a lot done
by the Bar chart
- particularly to accommodate the y-axis
objects. To make it easier to understand
you will do well to "un-minify" it and spread it across multiple lines.
This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script> <script src="RGraph.line.js"></script> <script src="RGraph.drawing.yaxis.js"></script>Put this where you want the chart to show up:
<div style="padding: 25px; display: inline-block; margin:20px"> <canvas id="cvs" width="650" height="250">[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):
<script> marginLeft = 75; marginBottom = 35; marginRight = 75; marginTop = 45; canvas = document.getElementById('cvs'); // Draw the Y-axis that's positioned on the right-hand-side. It's colored // red so that it matches the color of the Line and it's therefore easier // to read the chart. axes = new RGraph.Drawing.YAxis({ id: 'cvs', x: canvas.width - marginRight, options: { textSize: 16, yaxisScaleMax: 10, yaxisPosition: 'right', // This is not just a normal space character - it comes from // the Windows 'charmap' program and is a non-breaking space. // This means that it doesn't get removed like normal space // characters do. You may need to get this character from // 'charmap' as when you copy the code from this page it // might be converted to a regular space - which is not the // same. yaxisScaleUnitsPre: ' ', yaxisScaleUnitsPost: 'ma', yaxisColor: 'red', yaxisLinewidth: 3, yaxisTickmarksLength: 5, marginBottom: marginBottom } }).draw(); // Create the Y-axis that appears on the left-hand-side of the chart. It // has a different scale to the other Y-axis. It's colored gray so that // it's easier to tally with the correct Line and Bars. axes2 = new RGraph.Drawing.YAxis({ id: 'cvs', x: marginLeft, options: { textSize: 16, yaxisScaleMax: 20, // This is not just a normal space character - it comes from // the Windows 'charmap' program and is a non-breaking space. // This means that it doesn't get removed like normal space // characters do. You may need to get this character from // 'charmap' as when you copy the code from this page it // might be converted to a regular space - which is not the // same. yaxisScaleUnitsPost: 'ma ', yaxisColor: 'gray', yaxisLinewidth: 3, yaxisTickmarksLength: 5, marginBottom: marginBottom, marginTop: marginTop } }).draw(); // Create the Bar chart. The marginInnerGrouped setting is set to // -15 and this is what gives the chart the overlapping appearance. bar = new RGraph.Bar({ id: 'cvs', data: [[4,8],[6,5],[5,4],[1,9],[4,8],[8,6]], options: { marginBottom: marginBottom, marginLeft:marginLeft, marginRight:marginRight, marginTop:marginTop, colors: ['red','gray'], backgroundGrid: false, yaxisScale: false, xaxis: false, yaxis: false, yaxisScaleMax: 20, yaxisScaleUnitsPost: '%', xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat'], responsive: [ {maxWidth: null, width: 650, height: 250, options: {marginInnerGrouped: -15, marginInner: 30, textSize: 14}, callback:function () {axes.x = canvas.width - marginRight; RGraph.redraw();}}, {maxWidth: 750,width: 450,height: 250,options: {marginInnerGrouped: -5,marginInner: 15,textSize: 12}, callback:function () {axes.x = canvas.width - marginRight; RGraph.redraw();}} ] } }).wave({frames: 30}); // Create the Line chart (both lines are added by this Line chart). // It's a spline chart so that its curvy. line = new RGraph.Line({ id: 'cvs', data: [ [14,18,16,12,15,13], [10,16,13,19,16,20] ], options: { spline: true, backgroundGrid: false, tickmarksStyle: 'filledcircle', tickmarksSize: 7, shadow: false, linewidth: 5, marginLeft:marginLeft, marginBottom: marginBottom, marginLeft:marginLeft, marginRight:marginRight, marginTop:marginTop, xaxis: false, yaxis: false, yaxisScale: false, colors: ['red', 'gray'], yaxisScaleMax: 20, yaxisScale: false, responsive: [ {maxWidth: null, options: {linewidth: 5,tickmarksSize: 7,marginInner: 55}}, {maxWidth: 750, options: {linewidth: 3,tickmarksSize: 3,marginInner: 30}} ] } }).trace(); </script>