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