manigandan
Posts: 189
Joined: Fri Jan 22, 2016 7:14 am

Chart not getting resize on parent <div> width change

Hi Team,

Today we encountered issue with chart reflow when chart container changed in width

Please find the below attached image.

Tired few possible ways to solve the issue but doesn't work as expected
1. window:resize event ( this will trigger only when the window gets resized )
2. Change parent CSS position:relative and width to 100% but still issue persist

If we take amCharts.js it atomatically gets resize when the parent div gets changed in width/height

Issue reproduced with below work flow:
- Say chart is inside the panel on <body>
- When I perform toggle sidebar , sidebar gets hide from the application
- Now the panel with the body which contains the chart gets changed in its width according to the sidebar changes
- As attached in the image chart inside the panel is not getting relow according to parent width

Please feel free to ask for any clarification

Thanks in advance :)

Regards,
Mani
Applied Materials
Attachments
ChartResize.PNG
ChartResize.PNG (26.16 KiB) Viewed 20630 times
Regards,
Manigandan
pawel_d
Posts: 1910
Joined: Thu Jun 02, 2016 10:28 am

Re: Chart not getting resize on parent <div> width change

Hi Manigandan,

You can simply change chart's width with Chart.update() function. Take a look at the example posted below.

API Reference:
http://api.highcharts.com/highcharts/Chart.update

Example:
http://jsfiddle.net/juxy42ev/

Regards.
Paweł Dalek
Highcharts Developer
ankita.sharma
Posts: 5
Joined: Sat Jun 19, 2021 8:29 pm

Re: Chart not getting resize on parent <div> width change

Is there any way that instead of calling a function I will specify it in configuration?
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Chart not getting resize on parent <div> width change

Hello ankita.sharma!

Welcome to our forum and thanks for contacting us with your question!

You can use this code in the load event of the chart. Demo: http://jsfiddle.net/BlackLabel/vud9jyps/

Best regards!
Dominik Chudy
Highcharts Developer
kristiana
Posts: 2
Joined: Mon Aug 08, 2022 6:55 pm

Re: Chart not getting resize on parent <div> width change

Hello,

Is there a way to achieve this for highcharts-react-official and functional components? Thanks.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Chart not getting resize on parent <div> width change

Hello kristiana,

Welcome to our forum!

What is the exact feature that you would like to implement in your React project?

Could you reproduce your code in an online editor with React support (i.e Codesandbox, Stackblitz) and show us your issue, so that we can work on a solution for you?

Regards!
Kamil Musiałowski
Highcharts Developer
kristiana
Posts: 2
Joined: Mon Aug 08, 2022 6:55 pm

Re: Chart not getting resize on parent <div> width change

Can you please provide an example of how to implement an update function for the chart when using highcharts-react-official and functional components?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Chart not getting resize on parent <div> width change

Here you can find the very simple demo for updating the chart options in React: https://stackblitz.com/edit/react-nbrhfg?file=index.js

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”