Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conflict between scrollablePlotArea and responsive tag #8797

Closed
leokury opened this issue Aug 16, 2018 · 4 comments
Closed

Conflict between scrollablePlotArea and responsive tag #8797

leokury opened this issue Aug 16, 2018 · 4 comments
Labels

Comments

@leokury
Copy link

@leokury leokury commented Aug 16, 2018

Expected behaviour

With scrollablePlotArea chart should have scroll and we should use responsive tag normally to adapt to mobile devices

Actual behaviour

When we use scrollablePlotArea toghether with responsive tag we can't scroll the chart.

Live demo with steps to reproduce

http://jsfiddle.net/w5uohq82/1/

Product version

Highchart 6.1.1

Affected browser(s)

Google Chrome

@pawelfus
Copy link
Contributor

@pawelfus pawelfus commented Aug 17, 2018

Hi @leokury

Thank you for reporting the issue. It looks like initialized chart does not apply scrollable area. After redraw (e.g. window resize) it works fine. Could you confirm? Tested on Chrome Version 68.0.3440.106 (Official Build) (64-bit)

@pawelfus pawelfus added the Type: Bug label Aug 17, 2018
@leokury
Copy link
Author

@leokury leokury commented Aug 17, 2018

Yes, after window resize the scroll bar is created but scrollPositionX still does not apply.

Any workaround for this?

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Aug 22, 2018

Internal note
Broken down, it's a problem with calling setSize on a chart with scrollablePlotArea: http://jsfiddle.net/highcharts/w5uohq82/14/. Running reflow makes it even worse.

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Aug 22, 2018

Workaround

We can tap into the endResize event and make it right.

Highcharts.addEvent(Highcharts.Chart, 'endResize', function () {
    if (this.scrollablePixels) {
    	this.container.style.width = (this.chartWidth + this.scrollablePixels) + 'px';
    }
});

Live demo: http://jsfiddle.net/highcharts/w5uohq82/19/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants