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

Comments

Projects
None yet
3 participants
@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

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Aug 17, 2018

Contributor

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)

Contributor

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 Bug label Aug 17, 2018

@leokury

This comment has been minimized.

Show comment
Hide comment
@leokury

leokury Aug 17, 2018

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

Any workaround for this?

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

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 22, 2018

Collaborator

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.

Collaborator

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

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 22, 2018

Collaborator

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/

Collaborator

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