The responsive function

Summary: Information about making your charts responsive with the responsive() function. This is new in October 2019 and makes supporting different screen sizes (eg computers, tablets and phones) much easier.

Even though this documentation page is in the canvas section of the website, it also applies to the SVG version of the responsive() function.

Introduction
What does the responsive code look like
Some definitions of this code
Options to the responsive function
Examples of responsive charts

Introduction

Since October 2019 the responsive features of RGraph have improved with the new responsive() function, added to both canvas and SVG charts.

The Bar charts shown here are canvas and SVG examples of responsive charts so you can change the size of your browser window and see the effect on them.

They have three rules specified - one for a largest screen width of 600px, one for 900px and one for larger screens.

If you can resize your browser then go ahead and see the effect that different widths have on the charts.

These rules can add a lot to your configuration so usually it's enough to have two rules - one for screens smaller than 900px where the chart is smaller (for example 400px wide). And another for screens larger than 900px where you have the default chart size.

Of course if you're designing for small screens first then you will want to choose the default size based on the smaller screen size.

Whichever you choose, for a public website at least, your rules should try to accommodate both.

What does the responsive code look like?

Here are canvas and SVG examples of configurations that use the responsive() function:

Canvas:

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,8,6,3,5,4,1],
        options: {
            title: 'An example of a responsive chart',
            titleBold: true,
            xaxis: false,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
        }
    }).draw().responsive([
        {maxWidth: 600,  width: 400, height: 200, options: {titleSize: 12,xaxisLabelsAngle: 45,xaxisLabelsOffsety: 7, marginBottom:30,textSize: 10,marginInner: 10}},
        {maxWidth: 1100, width: 600, height: 250, options: {titleSize: 14,xaxisLabelsAngle: 0, textSize: 12,xaxisLabelsOffsety: 0,marginBottom: 5,marginInner: 20}},
        {maxWidth: null, width: 700, height: 275, options: {titleSize: 18,xaxisLabelsAngle: 0, textSize: 14,xaxisLabelsOffsety: 0,marginBottom: 5,marginInner: 25}}
    ]);
</script>

SVG:

<script>
        new RGraph.SVG.Bar({
            id: 'chart-container',
            data: [4,8,6,3,5,4,1],
            options: {
                title: 'An example of a responsive chart',
                titleBold: true,
                axes: false,
                backgroundGridVlines: false,
                backgroundGridBorder: false
            }
        }).draw().responsive([
            {maxWidth: 600,  width: 400, height: 200, options: {titleSize: 12, textSize: 10, marginInner: 10, xaxisLabels: ['Mon','Tues','Wed','Thu','Fri','Sat','Sun']}, parentCss: {'float': 'none'}},
            {maxWidth: 1100, width: 600, height: 250, options: {titleSize: 14, textSize: 12, marginInner: 20, xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']}, parentCss: {'float': 'none'}},
            {maxWidth: null, width: 700, height: 275, options: {titleSize: 18, textSize: 14, marginInner: 25, xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']}, parentCss: {'float': 'right'}}
        ]);
</script>

As you can see from the highlighted code the responsive() function is added on to the end of your configuration. In the code that's shown above it's been reduced down to one configuration per line. But let's have a look at it when it's expanded out so that it can be read in all of its glory (we'll use the canvas example for this):

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,8,6,3,5,4,1],
        
        // These options are not changed by the responsive() function.
        options: {
            title: 'An example of a responsive chart',
            titleBold: true,
            xaxis: false,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
        }
    }).draw().responsive([
        // The smallest screen configuration goes at the top and progressively larger screen
        // size configurations follow it.
        {
            // This is the maximum screen size that this configuration should be applied to.
            maxWidth: 600,
            
            // This is the size that the canvas should be changed to
            width: 400,
            height: 200,
            
            // These options are applied when this configuration is matched. Common things
            // to change are sizes of margins and sizes of text
            options: {
                titleSize: 12,
                xaxisLabelsAngle: 45,
                xaxisLabelsOffsety: 7,
                marginBottom: 30,
                textSize: 10,
                marginInner: 10
            },
            
            // The css: option allows you to give CSS properties that are set
            // on the canvas tag - though normally the canvas tag is wrapped in a <div>
            // tag so that the textAccessible option can work, so the CSS properties are
            // actually applied to that.
            //
            // In the case of SVG charts the CSS properties are set on the <div> wrapper that wraps
            // the SVG tag - the one that you write in your HTML page to put the chart where you want to
            // see it.
            css: {
            },
            
            // This applies CSS to the parent HTML node of the chart. So in the case of canvas - ignore the
            // textAccessible wrapper - this is the parent to the canvas tag in your page. So
            // if you wrap the canvas in a <div> tag then this will be that tag.
            // You might find that using this option is easier than navigating the DOM.
            //
            // In the case of SVG charts the parent HTML node that's referred to here is similar - NOT the
            // <div> tag that's the direct parent of the SVG tag - but the parent
            // HTML node of that.
            parentCss: {
                cssFloat: 'none',            // Use the JavaScript version of the CSS property name
                // 'background-color': 'red' // Put the property name in quotes so that we can use the exact
                                             // CSS property name
            },
            
            // This callback function is run when this configuration is matched. It
            // allows you to change other things on the page that you may need to.
            // Remember that it runs AFTER the chart has been redrawn
            callback: function (obj)
            {
            }
        },








        // Another set of configuration options that are applied to a maximum screen width of
        // 1100px. Remember that you may need to give configuration parameters
        // here with different values than what you've given in other sets of configuration.
        {
            maxWidth: 1100,
            width: 600,
            height: 250,
            options: {
                titleSize: 14,
                xaxisLabelsAngle: 0,
                textSize: 12,
                xaxisLabelsOffsety: 0,
                marginBottom: 5,
                marginInner: 10
            },
            parentCss: {'float': 'none'}
        },








        // This is the final set of configuration values and it has the maxWidth
        // set to null. This means that it will match when the previous rules do not. A 'default'
        // set of rules. So you can add configuration values here that should be used
        // when the screen is big. Keep in mind that if you've set something in a previous rule then
        // you may need to override it - as shown below.
        {
            maxWidth: null,
            width: 700,
            height: 275,
            options: {
                titleSize: 18,
                xaxisLabelsAngle: 0,
                textSize: 14,
                xaxisLabelsOffsety: 0,
                marginBottom: 5,
                marginInner: 25
            },
            parentCss: {'float': 'right'}
        }
    ]);
</script>

Some definitions of this code

The above code has three configurations defined - one for the smallest screen sizes with a maximum screen width of 600px, one for a maximum screen width of 1100px and another for larger screens (which has the width property set to null.

These rules are checked from top to bottom (ie the first rule is checked first) so the last rule should accommodate the largest size of screen. Here are some definitions:

maxWidth
This is the maximum browser/screen width that this configuration should be applied to. So larger screen sizes would not qualify for these properties.
width
This is the width that the canvas should be resized to. If you use the textAccessible feature (which is enabled by default now) then the wrapper that RGraph adds is also resized. In the case of SVG charts the SVG tag and its container <div> are resized for you.
height
This is the height that the canvas (or SVG) tag should be resized to. As with the width, this is also applied to the textAccessible wrapper (or the SVG tag container).
options
These are the options that should be set when this configuration is matched. Configuration options that you add here may need to be removed from the main configuration and added to each responsive section.
For example you might want to remove the textSize option from the main configuration and add it to each responsive section - one for small screens and another for the default settings.
css
This is an object that should contain CSS properties that should be added to the canvas tag when this configuration is matched. It's important to remember though that normally the canvas tag is wrapped in a <div> tag in order to allow the textAccessible option to work - and the CSS properties are actually added to that. When the textAccessible option is not being used then these CSS properties are added directly to the canvas tag.
parentCss
It's common for people to put the canvas or SVG <div> wrapper tag inside another <div> and apply CSS to that as well as or instead of the chart container.
This option allows you to apply CSS properties to that tag.

callback
The callback option should be a function which is run when this configuration is used. You can have this function resize or change other things on the page as needed or if you have many charts on the same canvas you may need to apply settings to those other charts. Note that it runs AFTER the settings have been updated and the chart redrawn.

Important: If you're navigating the DOM in the callback function then you should keep in mind that the canvas normally has the textAccessible <div> around it. So if you've also placed a <div> around your canvas or if you are using an SVG chart like this:
Canvas:

<div style="border: 1px red solid">
    <canvas id="cvs" width="750" height="300">[No canvas support]</canvas>
</div>

SVG:

<div id="chart-container" style="width: 750px; height: 300px; border: 1px solid red"></div>

And your chart code is this (a simple example of a Bar chart):
Canvas:

new RGraph.Bar({
    id: 'cvs',
    data: [4,8,6,3,5,2,9],
    options: {
        xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
    }
}).draw().responsive([
    {maxWidth: 900,  width: 400, height: 200, options: {textSize: 10}, callback: function () {}},
    {maxWidth: null, width: 600, height: 300, options: {textSize: 14}, callback: function () {}}
]);

SVG:

new RGraph.SVG.Bar({
    id: 'chart-container',
    data: [4,8,6,3,5,2,9],
    options: {
        xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
    }
}).draw().responsive([
    {maxWidth: 900,  width: 400, height: 200, options: {textSize: 10}, callback: function () {}},
    {maxWidth: null, width: 600, height: 300, options: {textSize: 14}, callback: function () {}}
]);

Then in your responsive callback you can change the border on the container by adding this to your configuration:
Canvas:

parentCss: {
    border: '1px green solid'
};

SVG:

parentCss: {
    border: '1px green solid'
};

Options to the responsive function

The responsive() functions second argument is optional and if given it should be an object map of options to the responsive() function - though currently there's only one available - the delay option.

Normally the responsive() function operates by using the window.onresize event and since this event can fire a lot, a delay is used so the resizing only occurs when the window resize is complete. Like a window.onresizeend pseudo-event.

So the responsive() function doesn't, by default, run every time that the window.onresize fires - a delay is used before the resize happens. By default this delay is set to just 200 milliseconds. If you're happy to though feel free to increase this to 500 or 1000 (a whole second).

// ...
.draw().responsive(..., {delay: 200});

Examples of responsive charts

Here are examples of responsive charts. One Bar chart is 3D and the others are 2D and there's a Line chart there as well. The code for making a chart responsive can add a lot to your configuration - though it can be as simple as specifying the new width and height and adjusting the textSize option. It all depends on your requirements.

There are more examples of responsive charts in the demos/ folder of the download. All of the basic SVG demos have been made to be responsive along with various canvas demos. Also, all of the demos shown on the RGraph website have been made to be responsive. You can see them all here.

A Bar chart with a dark theme. It illustrates how versatile RGraph can be when you're configuring your charts.

RGraph can make realistic looking 3D Bar charts. This demo is a multi-row example of such a chart. There are three rows of bars which are animated sequentially.

An SVG black and white Line chart which is simple in appearance but is aesthetically pleasing. It has a little bit of custom drawing too.

A combined Bar and Line chart using a negative horizontal margin. This gives the bars on the chart an overlapping appearance.

An example of a Horizontal Bar chart that's showing the result of the 2016 UK referendum that decided the question of EU membership.

A sketchy variation of the Bar chart that's showing that the French Mastiff dog breed is far and away the best dog breed!

This is an example of a Bar chart with an interactive key. Various charts support interactive keys.

Other demos in the download archive commonly (but not exclusively) use -responsive in their filenames.

If you use Linux or Unix and have access to the grep command, then you can also run these commands to find demos that use the responsive function:

cd RGraph/demos
grep "\.responsive(" * | less