RGraph : Uncaught TypeError: (intermediate value).draw(...).responsive is not a function

Question

I want to add a responsive for my Chart using RGraph Library, the problem is every time I'm using a responsive() method (from the library) https://www.rgraph.net/canvas/responsive.html

this error message always shows up, and the chart won't render as usual (before adding a responsive method my chart works well)

Uncaught TypeError: (intermediate value).draw(...).responsive is not a function

this is my code to draw a chart :

            twgScatter = new RGraph.SVG.Scatter({
            id: 'chart-containertwc',
            data: dataset1,
            options: {
            marginTop: 80,
                hmargin: 35,
                xaxisScaleMax: 80,
                backgroundGrid: true,
                colors: ['#41a827', '#2d79c4'],
                title: 'Total Wage Change (%)',
                xaxisLabels: ['Rank & File', 'Junior \n Management', 'Senior \n Management', 'All Employees'],
                key: ['Benchmark Group', 'Your Organisation'],
                keyTextSize: 11,
                keyColorShape: 'circle',
                keyPosition: 'margin',
                keyOffsetx: 30,
                keyOffsety: -60,
                xaxis: false,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                backgroundGrid: false,
                yaxis: false,
                yaxisLabelsOffsetx: 25,
                titleSize: 12,
                titleBold: true,
                labelsAbove: true,
                labelsAboveSize: 10,
                labelsAboveBold: false,
                xaxisLabelsSize: 10,
                yaxisLabelsSize: 10,
                titleY: 55,
                tickmarksStyle: 'circle',
                tickmarksSize: 10,
                yaxisScaleMin: yaxisNegative,
                yaxisScaleMax: yaxisPositive,
                yaxisLabelsOffsetx: 25,
                yaxisLabelsOffsety: -10,
                yaxisLabelsColor: "#6f7373"
            }
        }).draw().responsive([
            {
                maxWidth: 321,
                options: {
                    xaxisLabels: ['Test', 'Junior \n Management', 'Senior \n Management', 'All Employees']
                }
            }
        ]);

still searching for the solutions, I've seen it on a similar question but it won't solve my problems, appreciate your help, thanks in advance.

Answer 1

I've rearranged your code slightly - in particular there are now two responsive conditions (one for large and one for small screens).

There's a codepen here:

https://codepen.io/rgraph/pen/YzpoOrN

The code of which is this:

dataset1 = [{x:16,y:12},{x:45,y:12},{x:45,y:69},{x:42,y:59},{x:13,y:26},{x:43,y:12},{x:26,y:43}];
dataset2 = [{x:1,y:12},{x:2,y:12},{x:3,y:69},{x:4,y:59},{x:5,y:26},{x:6,y:12},{x:7,y:43}];

twgScatter = new RGraph.SVG.Scatter({
    id: 'cc',
    data: [dataset1, dataset2],
    options: {
        marginTop: 80,
        marginBottom: 80,
        backgroundGrid: true,
        colors: ['#41a827', '#2d79c4'],
        title: 'Total Wage Change (%)',
        key: ['Benchmark Group', 'Your Organisation'],
        keyTextSize: 11,
        keyColorShape: 'circle',
        keyPosition: 'margin',
        keyOffsetx: 30,
        keyOffsety: -60,
        //xaxis: false,
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        backgroundGrid: false,
        //yaxis: false,
        //yaxisLabelsOffsetx: 25,
        titleSize: 12,
        titleBold: true,
        //labelsAbove: true,
        //labelsAboveSize: 10,
        //labelsAboveBold: false,
        xaxisLabelsSize: 10,
        titleY: 55,
        tickmarksStyle: 'circle',
        tickmarksSize: 10,
        //yaxisLabelsOffsetx: 25,
        //yaxisLabelsOffsety: -10,
        yaxisLabelsColor: "#6f7373",
        xaxisScaleMax: 80,
        yaxisScaleMin: -25,
        yaxisScaleMax: 100,
    }
}).draw().responsive([
    {
        maxWidth: null,
        options: {
            xaxisLabels: ['Rank & File', 'Junior \n Management', 'Senior \n Management', 'All Employees']
        }
    },
    {
        maxWidth: 600,
        options: {
            xaxisLabels: ['Test', 'Junior \n Management', 'Senior \n Management', 'All Employees']

        }
    }
]);