Mention RGraph on Twitter

RGraph: HTML5 Javascript charts library - Variable gutter sizes

[No canvas support]

New in June 2011 is the much requested feature of seperate gutter sizing. As the chart to the right shows, this means that you can now easily set the left/right/top/bottom gutters independently. This makes it easy to give yourself the space that you need for labels, which will be most noticeable with the Bar chart, the Line chart and similar chart types. There is another example on the HBar example page.

Because of the fundamental nature of this change (every chart type has been affected) you should rigorously test your charts if you choose to upgrade.

The new properties are:

They all default to 25 pixels (with a few exceptions) and each can be set independently.

These new properties eliminate the need for certain others. So starting immediately the following properties are no longer used:

The chart.gutter property has been completely removed, so you will need to start using the new properties immediately. The chart.width and chart.height properties are completely unused from this point and the last two will be phased out starting immediately.


<script>
        window.onload = function (e)
        {
            var bar = new RGraph.Bar('cvs', [0.2,0.2,0.5,0.6,0.5,0.3,0.5,0.1,0.2,0.7,4.2,3.5]);
            bar.Set('chart.ymax', 5);
            bar.Set('chart.labels', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
            bar.Set('chart.tooltips', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
            bar.Set('chart.text.angle', 45);
            bar.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom]]);
            bar.Set('chart.zoom.hdir', 'left');
            bar.Set('chart.title', '2010 statistics (tooltips)');
            bar.Set('chart.ylabels.specific', ['100,000','10,000','1,000','100','10']);
            bar.Set('chart.background.grid.autofit', true);
            bar.Set('chart.background.grid.autofit.align', true);
            bar.Set('chart.title.vpos', 0.5);

            bar.Set('chart.gutter.left', 65);
            bar.Set('chart.gutter.right', 5);
            bar.Set('chart.gutter.bottom', 60);

            bar.Draw();
        }
</script>

Upgrading from a previous version of RGraph

If you're upgrading from a previous version of RGraph then there are a few points you should bear in mind:

  1. Remove any calls to .translate(). If you use the .translate() method to give yourself extra space, this should be converted to the new gutter properties.
  2. If you use chart.tooltips.coords.adjust or chart.resize.handle.adjust then you should remove them. These properties will cease to have any effect eventually, but not immediately.
  3. If you use caching, then you may need to use a CTRL/SHIFT+Refresh on your page to bypass any cached copy of the RGraph libraries.