Variable gutter sizes

  Read comments...

Summary
Information on variable gutter sizes that you can now configure. This is useful if you're combining charts or if you're trying to make the most of the space available to you.

[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.

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 gutter property has been completely removed, so you will need to start using the new properties immediately. The width and height properties are completely unused from this point and the last two will be phased out starting immediately.


<script>
        window.onload = (function ()
        {
            var bar = new RGraph.Bar({
                id: 'cvs',
                data: [0.2,0.2,0.5,0.6,0.5,0.3,0.5,0.1,0.2,0.7,4.2,3.5],
                options: {
                    ymax: 5,
                    labels: [
                        'January', 'February', 'March',
                        'April',   'May',      'June',
                        'July',    'August',   'September',
                        'October', 'November', 'December'
                    ],
                    tooltips: [
                        'January', 'February', 'March',
                        'April',   'May',      'June',
                        'July',    'August',   'September',
                        'October', 'November', 'December'
                    ],
                    textAngle: 45,
                    contextmenu: [['Zoom in', RGraph.Zoom]],
                    zoomHdir: 'left',
                    title: '2010 statistics (tooltips)',
                    titleVpos: 0.5,
                    ylabelsSpecific: ['100,000','10,000','1,000','100','10','0'],
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    gutterLeft:65,
                    gutterRight: 5,
                    gutterBottom: 60
                    shadow: false,
                    noxaxis: true
                    textSize: 14,
                    textAccessible: true,
                    scaleZerostart: true
                }
            }).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 tooltips.coords.adjust or 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.

Gutter sizing tool

If you want help with the gutter sizing, there is a tools here which can help.

Share RGraph
X

Comments