Chart not getting updated when input data is getting updated

[Manoj]

Here is my chart component

<ejs-chart id="chart-container" [primaryXAxis]='chart.PrimaryXAxis' 

[primaryYAxis]='chart.PrimaryYAxis' [legendSettings]='chart.LegendSettings' [tooltip]='chart.Tooltip'

[title]='chart.Title' width='{{chart.Width}}' height='{{chart.Height}}' [palettes]='chart.palette'>

    <e-series-collection >

        <e-series *ngFor="let trace of chart.Traces" [dataSource]='trace.Data' 

        type='{{trace.Type}}' 

        xName='{{trace.XName}}' 

        yName='{{trace.YName}}' 

        name='{{trace.Name}}'

        [marker]='trace.Marker'></e-series>

    </e-series-collection>

</ejs-chart>

In Component.cs @Input() chart:any;

properties on ejs-chart is getting updated whenever there is change in chart, but properties on e-series is not getting updated whenever there

is change in chart.traces, even ngonchanges is getting called, and change are reflected, but chart is not getting redrawn

[Srihari Muthukaruppan]

Hi Manoj, 

As of now it is not possible to automatically change the series value. Hence we suggest you to modify the series value using chart instance and refresh the chart to overcome the reported scenario. Please find the sample, code snippet and screenshot below. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicChange-1992834193.zip 

 

Code Snippet: 

// add your additional code here 

<div align="center"> 

    <ejs-chart #chart [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis" [tooltip]="tooltip" 

      [legendSettings]="legend" (loaded)="loaded($event)"> 

      <e-series-collection> 

        <e-series *ngFor="let chart of traces" [dataSource]="chart.readings" type="{{chart.type}}" 

          xName="{{chart.xName}}" yName="{{chart.yName}}" width="2" [name]="chart.sensorId" [marker]="chart.marker" 

          [emptyPointSettings]="emptyPoint" pointColorMapping="color"> 

        </e-series> 

      </e-series-collection> 

    </ejs-chart> 

  </div> 

  <button ejs-button cssClass="e-info" (click)="onChange($event)" style="text-transform:none !important"> 

    Data Change 

  </button> 

// add your additional code here 

public onChange(e: Event): void { 

    this.chart.series[0].type = 'Line'; 

    this.chart.series[1].type = 'Line'; 

    this.chart.refresh(); 

  } 

Screenshot: 

Default: 

 

 

AfterChange: 

 

 

Let us know if you have any concerns. 

Regards, 

Srihari M