We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Chart does not resize with media query width change

Hi there,

When using ejs-chart, the chart does is only responsive to window changes. It doesn't update the width if changes programmatically or through a media query.

An example can be found here https://github.com/connorearl/chart-demo (the zip failed to upload). A button will change the parent div width programmatically and there is also a print media query to change the width when printing which causes the same issue. All cause the chart not to update and be cut off.

Thanks!


16 Replies 1 reply marked as answer

SB Swetha Babu Syncfusion Team March 29, 2023 03:48 AM UTC

Hi Connor,


We are validating the reported scenario and update you with further details within two business days


Regards,

Swetha



NP Nishanthi Panner Selvam Syncfusion Team March 30, 2023 10:43 AM UTC

Hi Connor,


We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on 11th April 2023. We appreciate your patience until then. You can keep track of the bug from the below feedback link.


Feedback Link: https://www.syncfusion.com/feedback/42515/chart-width-does-not-changing-properly-on-button-click


If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.


Regards,

Nishanthi


Marked as answer

NP Nishanthi Panner Selvam Syncfusion Team April 5, 2023 01:03 PM UTC

Hi Connor,


Thanks for being patience. We have resolved the reported issue in sample level itself using setTimeOut() method . We have prepared sample and attached for your reference. 


bigWidth() {

    debugger

    this.big = !this.big;

    setTimeout(() => {

      this.chart.refresh();

    }, 10);

  }



Please revert us if you have any concerns.


Regards,

Nishanthi


Attachment: angular_chart_9e51e5b1.zip


CE Connor Earl April 5, 2023 02:15 PM UTC

Hi there,


Unfortunately that does not solve the issue when the width is adjusted using the CSS media query for printing as mentioned in the original post, which is my main issue. When printing the chart is cut off since the width has changed, and the timeout isn't a workaround for that. The chart should be responsive to it's size.


Thanks!



NP Nishanthi Panner Selvam Syncfusion Team April 6, 2023 12:36 PM UTC

Connor,


Sorry for the inconvenience caused.

We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on 18th April 2023. We appreciate your patience until then. You can keep track of the bug from the below feedback link.


Feedback Link: https://www.syncfusion.com/feedback/42721/chart-width-is-not-changing-on-print


If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.


Regards,

Nishanthi



CE Connor Earl April 19, 2023 09:20 PM UTC

Hi Nishanthi,


Was this fixed in the release yesterday? After updating it still seems to be a problem.


Thanks!



NP Nishanthi Panner Selvam Syncfusion Team April 20, 2023 09:59 AM UTC

Hi Connor,


Thank you for your patience.


We have fixed the reported issue which is in testing phase. We created a custom patch for the fix that can be downloaded from the attached file. This fix will be included in our weekly patch release, which is scheduled to be rolled out on 2nd May 2023.


Regards,

Nishanthi


Attachment: syncfusionej2charts21.1.38_4b787fe9.zip


NP Nishanthi Panner Selvam Syncfusion Team May 3, 2023 08:51 AM UTC

Hi Connor,

Thankyou for your patience

 

We have included the fix for the reported scenario in our weekly patch release (v 21.2.3) . You can download the latest package from the below link

 

https://www.npmjs.com/~syncfusionorg

 

You can upgrade your package to the latest version to resolve the reported scenario.

 

Please get back to us, if you need any further assistance.



CE Connor Earl May 3, 2023 03:55 PM UTC

Hi there, 


It seems the problem still occurs when printing, the chart does not resize and gets cutoff.



NP Nishanthi Panner Selvam Syncfusion Team May 4, 2023 12:38 PM UTC

Hi Connor,


We have created an stackblitz angular sample in fix version (v 21.2.3) .Chart gets rendered properly while printing it.


We have attached the tested sample and screenshot for your reference. Please check with below snippet and sample.


Sample: https://stackblitz.com/edit/angular-m2shzx?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css


Kindly, revert us if you have any concerns.


Regards,

Nishanthi



CE Connor Earl May 4, 2023 02:51 PM UTC

This problem still occurs in the provided example, see how the width did not update upon printing



NP Nishanthi Panner Selvam Syncfusion Team May 5, 2023 10:40 AM UTC

Hi Connor,


We have ensured your reported scenario. Unfortunately we can’t able to replicate, we have created video for the sample .


Please check with sample.


Sample: https://stackblitz.com/edit/angular-m2shzx-aiz9s1?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css


Since we are unable to replicate an issue from our end, we request you to share the following information which will be helpful for further analysis and provide you the solution sooner.


  • Can you please share the replication procedure


Kindly, revert us if you have any concerns.


Regards,

Nishanthi



Attachment: width_change_7373030f.zip


CE Connor Earl May 5, 2023 02:31 PM UTC

Here is how I replicated it:

  1. Open the stackblitz example on a wide montior (mine are 24")
  2. Hit Ctrl+P rather than using the print button
  3. The screenshot above is the result


NP Nishanthi Panner Selvam Syncfusion Team May 8, 2023 02:54 PM UTC

Hi Connor,

We are analyzing your reported scenario. We will update the status within one business day(9th May2023). We appreciate your patience until then.


Regards,

Nishanthi



NP Nishanthi Panner Selvam Syncfusion Team May 10, 2023 01:29 PM UTC

Hi Connor,

we are checking with this issue, We will update the status within two business day.

We appreciate your patience until then.


Regards,

Nishanthi



NP Nishanthi Panner Selvam Syncfusion Team August 16, 2023 10:38 AM UTC

Connor,


Sorry for delay caused.


Upon further investigation, we have determined that achieving the full width of the chart by printing can only be accomplished using our specific print function that we have developed internally. Unfortunately, it is not possible to achieve the full width of the chart by printing through the browser window.


If you have any additional query or if there's anything else we can assist you with, please don't hesitate to let us know.


Regards,

Nishanthi


Loader.
Live Chat Icon For mobile
Up arrow icon