How do I make the gap between the bars narrower?

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by TomW on 5th August 2017
This may be a dumb question, but my bar graphs are all pretty much right up against each other. Is there a way to increase the space between them?
Posted by Richard on 5th August 2017
Hi there,

Increase the value of the hmargin property.
...
hmargin: 10,
...

Eg

www.rgraph.net/demos/svg-bar-thin-grouped.html


(If you use the canvas libraries the property name is the same.


Richard
Posted by TomW on 5th August 2017
Hi, Richard. Thank you for the prompt reply. I think I may have asked this question backwards. Please see the code below. What I am wanting to do is make the spacing between the bars larger. The space between the blue and green and the green and orange. When I change the hmargin, it makes the bars themselves narrower, but the space between the bars stays constant. That is what I want to increase...that gap. Thanks again!

<!DOCTYPE html>
<html>
<head>
     <title>Sales</title>
  <script src="../js/jquery.1.12.js"></script>
     <script src="../RGraph/libraries/RGraph.common.core.js" ></script>
  <script src="../RGraph/libraries/RGraph.common.key.js" ></script>
  <script src="../RGraph/libraries/RGraph.common.dynamic.js"></script>
  <script src="../RGraph/libraries/RGraph.common.tooltips.js"></script>
     <script src="../RGraph/libraries/RGraph.bar.js" ></script>
</head>
<body>
<div id="container3" style="position: relative; padding: 45px">
  <canvas id="cvs3" width="500" height="200">
     [No canvas support]
  </canvas>
</div>
<script>
     $(document).ready ( function ()
     {
         // Draw the key first
         RGraph.HTML.Key('container3', {
             labels: ['2016','2017','2018'],
             colors: ['#27afe9','#50B332','#EC561B'],
             tableCss: {
                 top: '120px',
                 left: '725px',
                 position: 'absolute'
             }
         });
         var bar = new RGraph.Bar({
             id: 'cvs3',
             data: [[234542,342456,543235],[998749,665432,542342]],
             options: {
     title: 'Sales by Year',
     titleY: 1,
                 tooltips: ['$234,542','$342,456','$543,235','$998,749','$665,432','$542,342'],
                 tooltipsEvent: 'mousemove',
                 backgroundGridVlines: false,
                 backgroundGridBorder: true,
     //unitsPost: 'M',
     unitsPre: '$',
                 noyaxis: true,
                 labels:['Originatination', 'Realized'],
     //labelsAbove: true,
                 colors: ['Gradient(#99f:#27afe9:#058DC7:#058DC7)', 'Gradient(#94f776:#50B332:#B1E59F)', 'Gradient(#fe783e:#EC561B:#F59F7D)'],
                 hmargin: 15,
                 strokestyle: 'black',
                 linewidth: 1,
                 shadow: true,
                 shadowColor: '#999',
                 shadowOffsetx: 0,
                 shadowOffsety: 0,
                 shadowBlur: 25,
                 textAccessible: true,
     gutterLeft: 50
             }
         }).draw().on('mouseout', function (obj) {RGraph.redraw();})
     });
</script>

<?php

?>
</body>
</html>
Posted by Richard on 5th August 2017
Hi there,

Increase the value of the hmargin property.
...
hmargin: 10,
...

Eg

Do you mean the gap between the bars (not the gap between the groups)? Like this:

www.rgraph.net/tests/tomw.html

I so then the property you want is hmarginGrouped.


Richard
Posted by TomW on 5th August 2017
That's exactly it. Thanks so much, Richard!

Add a reply




« Back to message list