Component with many charts ( Line, Stacked Bar, Pie Chart and Tree Map) doesnot render all charts properly

[Kaushik]

Hi,

My requirement is to 

1. Create a component which gives option to display any one of Line Chart, Stacked Bar, Pie Chart and Tree Map ( named as child component )

2. To create parent component which will use child component twice to display any 2 type charts.

How it is implemented :

1. Parent component will provide all data ( datasource, xName, yName, title etc. ) to child component 

2. Child component will have button to switch to different chart types

Problem faced :

1. Both charts ( since child component is used twice inside parent component ) render properly first. But when both charts are set to same type and then any one chart is changed to another type then one of the chart disappears.

2. Tree Map is not responsive 

Eg;

Chart 1: Line chart is selected for display

Chart 2 : Pie chart is selected for display

Step 1 : Chart 2 is changed to line chart ( Works fine )

Step 2 : Chart 1 is changed to stacked bar

on doing step 2, chart 1 is diplayed but chart 2 (stacked bar) disappears automatically

NOTE : Attached files

1. Final output : How it is displayed

2. ChartComponent.ts and chartComponent.html - Child Component

3. PieChartComponent.ts and .html - Parent Component

Attachment: Attachment_91f2d8f9.zip

[Srihari Muthukaruppan]

Hi Kaushik, 

  

We are analysing your query. We need additional time to validate it further and will update the status within one business day (October 19, 2020). We appreciate your valuable patience until then. 

 

Regards,
Srihari 

[Srihari Muthukaruppan]

Hi Kaushik, 

  

Please find the response for mentioned query. 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 

 

Query 1: Both charts ( since child component is used twice inside parent component ) render properly first. But when both charts are set to same type and then any one chart is changed to another type then one of the chart disappears. 

  

We have analysed your query. From that, we suspect the reported scenario occurs due to the same id provided for different charts. 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/angular-sjwxar-mfj7ky?file=app.component.html 

  

Screenshot: 

 

  

  

Query #2: Tree Map is not responsive  

 

From the provided code snippet since the code snippet for treemap is not available. Hence we have attached the sample used for testing. Unfortunately, we are unable to reproduce the reported scenario.  

  

Sample: https://stackblitz.com/edit/angular-bzkghn?file=app.component.ts 

  

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 

 

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.  

1. Try to reproduce the reported scenario in the above sample
2. Share the details if you have done any other customization in your sample. 

Regards, 

Srihari M 

[Kaushik]

Hi, Thank you for replying. My treemap query issue is solved but, my first query is caused by the id i suspect.

In my code snippet, the pieChartComponent is a parent compenent in angular. Under pieChartComponent i have a child component called chartsComponent. I call <app-chart> twice to display 2 charts in pieChartComponent. The code snippet provided by you doesn't use a child component instead it repeats the code twice. My requirement is create a child component and the different chart options ( ejs-tab) should be present inside it. 

In this case when we call the child component twice their id cannot be differentiated. How to solve this issue?

Attachment: component_structure_ef7da2a9.zip

[Srihari Muthukaruppan]

Hi Kaushik,  

   

We are preparing sample based on your query. We need additional time to prepare the sample .Hence will update the status within one business day (October 22, 2020). We appreciate your valuable patience until then.  

  

Regards,
Srihari  

[Srihari Muthukaruppan]

Hi Kaushik, 

 

Thanks for your patience. 

 

We have analysed your query. Based on that we have prepared a sample in which parent component is app.component.html and two child components are created in which multiple charts are rendered inside tabs respectively. And also we need to provide different id for each chart to avoid the chart not rendering issue. Please find the sample and screenshot below. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DashboardLayout-2092981604.zip 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M