Variable margin sizes

Information on variable margin 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.

Warning: This page refers to updated property names that are forthcoming in the (as yet unreleased) version 4.70. Refer to the documentation for the relevant chart to find the correct names to use.
[No canvas support]

New in June 2011 is the much requested feature of seperate margin sizing. As the chart to the right shows, this means that you can now easily set the left/right/top/bottom margins 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 margin 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: {
                    yaxisScaleMax: 5,
                    xaxisLabels: [
                        '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'
                    ],
                    xaxisLabelsAngle: 45,
                    contextmenu: [['Zoom in', RGraph.Zoom]],
                    zoomHdir: 'left',
                    title: '2010 statistics (tooltips)',
                    titleVpos: 0.5,
                    yaxisLabelsSpecific: ['100,000','10,000','1,000','100','10','0'],
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    marginLeft:65,
                    marginRight: 5,
                    marginBottom: 60
                    shadow: false,
                    xaxis: false
                    textSize: 14
                }
            }).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 margin 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.

Margin sizing tool

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