The height of FlexChart component is constantly increasing

The height of FlexChart component is constantly increasing

Posted by: RelationsTechniquesDev on 10 March 2020, 11:25 pm EST

• 

  RelationsTechniquesDev

  • Post Options:
  • Link
    Copy

  Posted 10 March 2020, 11:25 pm EST

  We are currently using Wijmo 5.20192.631 for components.

  We face a probleme with the FlexChart component.

  Let me briefly explain the issue :
  
  We are using the flexbox layout.
  
  If we define the height of the chart with a value in %, then the height of FlexChart component is constantly increasing.

  To give you a reproduction context, let’s modify a bit the source code of this exemple :
  
  https://www.grapecity.com/wijmo/demos/Chart/Overview/angular

  as follow :

  .form-group {
  
  display: flex;
  
  flex-direction: column;
  
  flex: 0;
  
  height: 100%;
  
  }

  .wj-flexchart {
  
  flex: 0 0 75%;
  
  min-height: 50%;
  
  }

  The same problem arise with :

  .wj-flexchart {
  
  flex: 0 0 auto;
  
  min-height: 50%;
  
  height: 75%;
  
  }

  The issue seems due to the use of % instead of rem (or px) for height.

  The problem can be fixe using a value in rem (or px) but, in fact, we usually use values in % (with exception of body height: 100vh;).
  
  We would like to avoid a fixed value (in rem or px etc.).

  Is it possible to fix this problem? (ticket?)
  
  Do you have an other solution?

  Best regards

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 March 2020, 8:26 pm EST

  Hi,

  We have asked the dev team on this issue. The internal tracking id of the case is 425313. We will update you as soon as we will hear from them.

  Regards,
  
  Ashwin

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 March 2020, 10:29 pm EST

  Hi,

  The developer’s have asked whether you can use the height in vh instead of %. Using vh height will resolve your issue. Please try it at your end and let us know the result.

  ~regards

• 

  RelationsTechniquesDev

  • Post Options:
  • Link
    Copy

  Posted 15 April 2020, 5:41 pm EST

  Good morning/afternoon

  I’m sorry for my late answer.

  Your solution is working but …

  Our aim is to fix the size according to the parent element (%) not to the document itself (vh).

  We cannot use this solution.
  
  This issue is critical for some of my co-worker (due to the size of project).

  I did not find any other solution using css.

  Best regards,

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 16 April 2020, 3:08 pm EST

  Hi,

  Thanks for the update. I have provided this information to the dev team.

  ~regards

• 

  RelationsTechniquesDev

  • Post Options:
  • Link
    Copy

  Posted 24 August 2020, 6:49 pm EST

  Good morning/afternoon

  Please let us know if there is any new information on this issue.

  Best regards,

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 25 August 2020, 3:39 pm EST

  Hi,

  Sorry, the issue is still with the dev team. I have asked them to provide an update on this.

• 

  jgallais

  • Post Options:
  • Link
    Copy

  Posted 18 September 2020, 1:33 am EST

  Hello,

  I have the same problem.
  
  The components are not responsive in a flexbox layout.

  What about the status of the request?

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 September 2020, 2:16 pm EST

  Hi jgallais,

  This issue has been fixed and will be included in the 2020v3 version.

  ~regards

• 

  ievdokimov

  • Post Options:
  • Link
    Copy

  Posted 25 March 2023, 3:39 am EST

  Hi,
  
  I have a similar problem,
  
  using “@grapecity/wijmo.vue2.all”: “5.20222.877”
  
  My task is to adjust the maximum FlexChart filling in the parent

  component, the dimensions of which can be changed by the user.
  
  But if I set FlexChart height = 100% - chart starts to stretch continuously in height

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 26 March 2023, 10:15 pm EST - Updated 26 March 2023, 10:29 pm EST

  Hi,

  This issue has been reported to the dev team, with internal tracking id - WJM-15977. The dev team is working on this issue, and provided a workaround for now, i.e. you can put the chart in the container and apply the CSS to the container.

  .chart-container { flex: 0 0 75%; min-height: 50%;} 

  \<div class="chart-container">
    <wj-flex-chart ...
    ...
  \</div>

  We will update you as soon as we have any more updates from the dev team.

  Regards