How to reinitialize multiple charts (Chart Width issue)

Question

I used multiple types of charts in dashboard. I have noticed that chart size will be 100% only on the initial page load. If I redirect to other link and again get back on same component, charts are not rendered in full size until window size is changed manually either by resizing the chrome or pressing F12 for inspect element. How do I fix this issue?

We are using React js with syncfusion-ej2

Here is the image of chart after redirecting back on same component.
https://tinyurl.com/y3dxmg6k

Srihari Muthukaruppan · Answer

Hi Nikita,

Greetings from Syncfusion.

We have validated your reported scenario. We suggest you specify height and width for the chart as 100% for each template in dashboard panels. This will render the chart in 100% size even when we navigate and return back to the previous page. We have prepared a sample for your reference. Please check with the below snippet and screenshot.

Code Snippet

//…

</ChartComponent>

Screenshot

Sample: https://stackblitz.com/edit/react-qji2yz

Since we are unaware of your exact scenario in which an issue is reproduced, please share the following information which will be more helpful for further analysis and provide you the solution sooner.

Try to reproduce the reported scenario in the above sample.
Please share your sample (or) code snippet with full configurations.
Share the details if you have done any other customization in your sample.
Share your data source file.
Share your preview template version.

Kindly revert us, if you have any concerns.

Regards,

Srihari

Unknown · Answer

Thank-you for your quick response.
I followed your suggestion and noticed an issue of "attribute width: A negative value is not valid" when I changed route. We do we get this issue.

Here is the screenshot of error.

https://lh3.googleusercontent.com/-EtYzYDJU8ro/Xxp0B4C7kEI/AAAAAAAAG0Q/FcKOqpRJHG0YEgtWSrPuPgTdWX3TdK8YwCK8BGAsYHg/s0/2020-07-23.png

Here is the sample data source which I have used in the graph.

{"graphdata": [
  {
    "data": [
      {
        "name": "Mon",
        "OCCTY": 50,
        "OCCLY": 64,
        "ADRLY": 185,
        "ADRTY": 195
      },
      {
        "name": "Tue",
        "OCCTY": 88,
        "OCCLY": 80,
        "ADRLY": 202,
        "ADRTY": 207
      },
      {
        "name": "Wed",
        "OCCTY": 74,
        "OCCLY": 76,
        "ADRLY": 184,
        "ADRTY": 194
      },
      {
        "name": "Thu",
        "OCCTY": 68,
        "OCCLY": 73,
        "ADRLY": 176,
        "ADRTY": 196
      },
      {
        "name": "Fri",
        "OCCTY": 67,
        "OCCLY": 64,
        "ADRLY": 155,
        "ADRTY": 156
      },
      {
        "name": "Sat",
        "OCCTY": 74,
        "OCCLY": 76,
        "ADRLY": 143,
        "ADRTY": 150
      },
      {
        "name": "Sun",
        "OCCTY": 63,
        "OCCLY": 43,
        "ADRLY": 157,
        "ADRTY": 172
      },
      {
        "name": "Total",
        "OCCTY": 45,
        "OCCLY": 69,
        "ADRLY": 170,
        "ADRTY": 17
      }
    ]
  },
  {
    "data": [
      {
        "name": "Midweek OCC",
        "TY": 73,
        "LY": 71,
        "Var": 73
      },
      {
        "name": "Weekend OCC",
        "TY": 65,
        "LY": 73,
        "Var": 11
      },
      {
        "name": "Total OCC",
        "TY": 69,
        "LY": 72,
        "Var": 43
      }
    ]
  }
]
}

Srihari Muthukaruppan · Answer

Hi Nikita,








We have analyzed your query. From that, we would like to let you know that the navigation using routing in the chart is working fine. Unfortunately, we are unable to reproduce the reported scenario. We have also attached the sample used for testing for your reference. Please find the below screenshot, and sample.  
  

Sample: https://stackblitz.com/edit/react-hbgsee-nksxwr?file=index.js 
 

Screenshot: 

 

  
If you still face this issue. Kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.   

   


Try to reproduce the reported scenario in the above sample
  

Share the chart version used in the project.
  

Share the details if you have done any other customization in your sample.
  

Regards, 

Srihari M