Video of how to use the responsive function

Video transcript

Here's the transcript of the video that you can see above. It details how you use the responsive function in RGraph in order to support different screen sizes.

In this video, we're going to take a look at the RGraph responsive function which you can use to accommodate different screen sizes and configurations. Previously, the responsive configuration was given to a function that was appended to the draw function.

Now, however, the responsive configuration can be specified inline along with the rest of the chart configuration.

Whether you choose to use the method or the inline configuration way of specifying the responsive options is entirely up to you. Personally, I think it feels a little more natural to have the configuration details as part of the main configuration of the chart.

Whichever method you choose though, the responsive functionality in RGraph allows you to specify multiple sets of options for accommodating different sizes of screens and each configuration can consist of the maximum screen size that a configuration applies to and has various options for that screen size. For example, it has options that should be applied, CSS properties that should be applied to the canvas tag (or the div in the case of SVG charts), any CSS properties that should be applied to the parent of the canvas or div tag and there's also an option for a callback function which can be used to run your own custom code if required.

Here we have the basic bar chart demo which I've added responsive configurations to and we can go through those now. Normally this configuration would be condensed down to fit on one line just to save space, however here I've expanded it out so that it's easier to read and go through.

The first thing that you can see is the maxWidth directive. As you'd imagine, this stipulates the maximum width of screen that this set of configuration options applies to. This would normally be a number indicating the maximum width of screen, however for this configuration null has been specified which means that this set of options applies to larger screens with no limit on screen size.

If on the other hand, the maxWidth directive was given a number then the configuration options would only be applied to screens up to that maximum width.

Then, the width and the height options are given and these are what the chart will be resized to when this set of options are applied.

Then we have the options block which are a set of options that are applied to the chart when this configuration is triggered. these are just regular options just like when you initially configure the chart and if you're specifying multiple configurations then you may need to move options from the main configuration of the chart to here, in the responsive section - specifying the option for each set of configuration values.

Next is the css block which can be used to specify css options that are applied to the canvas tag (or the div tag in the case of SVG charts). This could be useful when initially setting up the responsive configuration as you can specify different border colors for example, for different configurations so that it's quite clear to you which configuration is being applied at a particular screen size.

The parentCSS option is similar to the css option but instead of being applied to the canvas or div tag this is applied to the parent tag - which is usually a div. So by using this option you could for example easily center the chart on smaller screens.

Finally, there is the callback option which as you can probably guess allows you to stipulate a function that is run after the configuration is applied.

For canvas charts, as an alternative to the responsive functionality, you could use a little bit of css on the canvas tag. This allows the canvas tag to grow more fluidly as you increase the screen size. You can still combine this with the responsive function meaning that the canvas can fluidly grow up to a point and then the responsive function applies some new width and height values to it.

There's an example of this at the bottom of the responsive configuration documentation page on the RGraph website.

And that's all there is to using the RGraph responsive functionality. Thanks for listening and if you have any questions then feel free to post me a message in the RGraph support forum. See you in the next video.