set Chart series by typescript doesn't work fine

[Manolo Capdevila]

Hi,

I've created a chart inside angular component. And I set the datasource and manipulate this datasource for create different series.

In my code, tooltip and legend events are shared between components.

I shared a similar code, but in this example, only show the last chart, other charts doesn't appear :\

Attachment: syncfusioncharts_d30fa519.zip

[Srihari Muthukaruppan]

Hi Manolo, 

  

We are analyzing your query and we will update the status within one business day(August 10, 2020). We appreciate your patience until then. 

  

Regards, 

Srihari M 

[Srihari Muthukaruppan]

Hi Manolo,  

 

 

Please find the below response for chart related query. 

  

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

Query #1:  tooltip and legend events are shared between components. 

 

 

We have analyzed your query. From that, we would like to let you know that the tooltip and legend property of 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/angular-ffm9tq?file=app.component.html 

 

  

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.

 

 

 

Query #2: only show the last chart, other charts doesn't appear 

  

We have analyzed your query. From that, we suspect the reported scenario occurs due to the same id provided for all charts. Hence we suggest you to provide different IDs for each chart to overcome the reported scenario. Based on your requirement we have also prepared a sample for your reference. Please find the below code snippet and screenshot. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartWidget-1949187176.zip 

  

Code Snippet: 

chart-widget.component.html: 

 

 

<ejs-chart #chart [id]='ChartId' [primaryXAxis]='primaryXAxis' width="100%" [height]='height'  [tooltip]='tooltip' [legendSettings]='legendSettings'

  (loaded)="onChartLoaded($event)">

</ejs-chart>

 

chart-widget.component.ts:

// add your additional code here

setDataSource() {

    if (this.chart) {

      this.ChartId = this.id;

      this.chart.clearSeries();

      this.chart.addSeries([{

        type: 'Line',

        dataSource: this.dataSource,

        xName: 'month',

        yName: 'sales',

        name: this.serieName,

        marker: this.marker,

      }]);

    }

  }

App.component.html:

<div fxLayout="row" fxLayoutAlign="space-between">

  <app-chart-widget [id]="id1" #sales1 [dataSource]="ds1" serieName="sales 1"></app-chart-widget>

</div>

<div fxLayout="row" fxLayoutAlign="space-between">

  <app-chart-widget [id]="id2" #sales2 [dataSource]="ds2" serieName="sales 2"></app-chart-widget>

</div>

<div fxLayout="row" fxLayoutAlign="space-between">

  <app-chart-widget [id]="id3" #sales3 [dataSource]="ds3" serieName="sales 3"></app-chart-widget>

</div>

App.component.ts:

// add your additional code here

public id1: string = "Chart1";

  public id2: string = "Chart2";

  public id3: string = "Chart3";

  

Screenshot: 

 

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

Let us know if you have any concerns. 

  

Regards, 

Srihari M