How to enable scrolling in CanvasJS charts on mobile?
I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
reactjs mobile canvasjs
asked Nov 18 '18 at 4:33
mangomagicmangomagic
407
add a comment |
I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
reactjs mobile canvasjs
asked Nov 18 '18 at 4:33
mangomagicmangomagic
407
add a comment |
I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
reactjs mobile canvasjs
asked Nov 18 '18 at 4:33
mangomagicmangomagic
407
I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
reactjs mobile canvasjs
reactjs mobile canvasjs
asked Nov 18 '18 at 4:33
mangomagicmangomagic
407
asked Nov 18 '18 at 4:33
mangomagicmangomagic
407
asked Nov 18 '18 at 4:33
mangomagicmangomagic
407
asked Nov 18 '18 at 4:33
mangomagicmangomagic
407
asked Nov 18 '18 at 4:33
mangomagicmangomagic
407
407
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.
answered Nov 19 '18 at 5:04
mangomagicmangomagic
407
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53357921%2fhow-to-enable-scrolling-in-canvasjs-charts-on-mobile%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.
answered Nov 19 '18 at 5:04
mangomagicmangomagic
407
add a comment |
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.
answered Nov 19 '18 at 5:04
mangomagicmangomagic
407
add a comment |
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.
answered Nov 19 '18 at 5:04
mangomagicmangomagic
407
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.
answered Nov 19 '18 at 5:04
mangomagicmangomagic
407
edited Nov 19 '18 at 17:06
answered Nov 19 '18 at 5:04
mangomagicmangomagic
407
answered Nov 19 '18 at 5:04
mangomagicmangomagic
407
answered Nov 19 '18 at 5:04
mangomagicmangomagic
407
407
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53357921%2fhow-to-enable-scrolling-in-canvasjs-charts-on-mobile%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
