A Bar chart with thin bars

It's quite easy to get thin bars in your Bar chart by using the marginInner property. This property doesn't directly specify the width of the bar, but specifies the amount of space each side of the bar. If you set it to 0 to start with and gradually increase it you can more easily see the effect that it has.

This also applies to the Horizontal Bar chart and the vmargin property.

Warning: If you set this property too high it can make the width of the bars negative. The Bars may appear to be OK but dynamic features such as tooltips will cease to work.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<div style="float: right">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas><br />
    
    <div style="position: relative; left: 25px">
        <input type="text" id="marginInner" value="5" />
        <button onclick="bar.set('marginInner', Number(document.getElementById('marginInner').value)); RGraph.clear(bar.canvas); bar.draw();">Set marginInner</button>
    </div>
</div>

This is the code that generates the chart: