Chart does not resize with media query width change

[Connor Earl]

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!

[Swetha Babu]

Hi Connor,

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

Regards,

Swetha

[Nishanthi Panner Selvam]

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 11^th 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

[Nishanthi Panner Selvam]

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

[Connor Earl]

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!

[Nishanthi Panner Selvam]

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 18^th 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

[Connor Earl]

Hi Nishanthi,

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

Thanks!

[Nishanthi Panner Selvam]

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

[Nishanthi Panner Selvam]

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.

[Connor Earl]

Hi there, 

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

[Nishanthi Panner Selvam]

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

[Connor Earl]

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

[Nishanthi Panner Selvam]

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

[Connor Earl]

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

[Nishanthi Panner Selvam]

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

[Nishanthi Panner Selvam]

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

[Nishanthi Panner Selvam]

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