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

Chart.setSize to allow setting only width or height #5513

Closed
peterchoo opened this Issue Jul 20, 2016 · 6 comments

Comments

Projects
None yet
4 participants
@peterchoo

peterchoo commented Jul 20, 2016

Expected behaviour

When a chart is initialised with no specific width or height attribute, it fills the container. This allows the chart to grow/shrink with the width of the element/page.

I wish to be able to set the height of the chart without changing the width, as setting the width will prevent the chart from resizing with the browser.

I expect that calling chart.setSize(null, 500) will adjust only the height of the chart.

Actual behaviour

Errors are thrown in the console, graph resizing doesn't work.

Live demo with steps to reproduce

This demo has plenty of errors in the console, and is using the example chart:
http://jsfiddle.net/aybw5zbv/1/

This example is using a chart similar to the one in our application, and uses 4.1.4. Note this does not have errors when setting height:
http://jsfiddle.net/d0m7t0rq/1/

Note that in our application we didn't have any errors for our specific graph resizing, as we were adjusting just the height on the graph and there was not an error thrown at that moment in time. We had to upgrade highcharts for another reason, and I have noticed that it appears to be Version 4.2.0 that introduced the issue I am seeing.

If any further details are required, please let me know.

Affected browser(s)

Chrome Version 51.0.2704.106 (64-bit)
FireFox Version 47.0
Not tested any other browsers

@mikecentiq

This comment has been minimized.

Show comment
Hide comment
@mikecentiq

mikecentiq Jul 20, 2016

I think it would also be useful to have "setHeight" and "setWidth" functions

mikecentiq commented Jul 20, 2016

I think it would also be useful to have "setHeight" and "setWidth" functions

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Jul 20, 2016

Contributor

Workaround
Extract width / height from container.

Example:

Contributor

sebastianbochan commented Jul 20, 2016

Workaround
Extract width / height from container.

Example:

@peterchoo

This comment has been minimized.

Show comment
Hide comment
@peterchoo

peterchoo Jul 20, 2016

@mikecentiq These would be useful functions

@sebastianbochan While that fixes the errors, it doesn't meet my expectations; the width/height are now fixed to that of their container at the time of setting, and will not reflow with the resizing of the browser.

peterchoo commented Jul 20, 2016

@mikecentiq These would be useful functions

@sebastianbochan While that fixes the errors, it doesn't meet my expectations; the width/height are now fixed to that of their container at the time of setting, and will not reflow with the resizing of the browser.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Jul 21, 2016

Collaborator

Thanks for reporting, this has been on the plan for a while. In the commit above, two new possible values for width or height are added:

  • undefined: Do nothing with the setting. So calling setSize with the width set to undefined doesn't change the width setting. Use this when only changing the height.
  • null: Change the setting to auto, meaning the width will scale with the width of the container and the height will follow the height or default to 400 when too small. Use this when you need to set a specific width, then reset it to reflow to the container, for example in responsive designs.

Demo: http://jsfiddle.net/jb9bd8p2/1/

Collaborator

TorsteinHonsi commented Jul 21, 2016

Thanks for reporting, this has been on the plan for a while. In the commit above, two new possible values for width or height are added:

  • undefined: Do nothing with the setting. So calling setSize with the width set to undefined doesn't change the width setting. Use this when only changing the height.
  • null: Change the setting to auto, meaning the width will scale with the width of the container and the height will follow the height or default to 400 when too small. Use this when you need to set a specific width, then reset it to reflow to the container, for example in responsive designs.

Demo: http://jsfiddle.net/jb9bd8p2/1/

@peterchoo

This comment has been minimized.

Show comment
Hide comment
@peterchoo

peterchoo Jul 21, 2016

@TorsteinHonsi Thank you! That is exactly what I need! It may be impertinent to ask, but do you know when this will be released?

peterchoo commented Jul 21, 2016

@TorsteinHonsi Thank you! That is exactly what I need! It may be impertinent to ask, but do you know when this will be released?

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Jul 21, 2016

Collaborator

We'll work toward a maintenance release now. We have to review some issues for the last weeks, then do test rounds, so I assume a release should be out in two or three weeks.

Collaborator

TorsteinHonsi commented Jul 21, 2016

We'll work toward a maintenance release now. We have to review some issues for the last weeks, then do test rounds, so I assume a release should be out in two or three weeks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment