javascriptrgraph

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


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.


Solution

  • 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']
    
            }
        }
    ]);