Syncfusion - Live data with Stock Chart resetting period selector

[levydanqc]

I'm using the syncfusion Stock Chart component with live data in angular and every time the data update, it resets the period selector.

It has the same behaviour with range selector.

I don't seem to find any callback method which can save the state of the period selector and display it again with the new value.
Also I can't change the default periods values of 1M, 3M, 6M, 1Y, YTD, All event though I pass my period object to the component.

Here is my HTML component:

<ejs-stockchart #chart id="chart-container" [periods]="periods" [title]="title" [enableSelector]="false"
    [enablePeriodSelector]="true" [enableCustomRange]="false" (selectorRender)="selectorRender($event)"
    (rangeChanged)="onRangeChange($event)">
    <e-stockchart-series-collection>
        <e-stockchart-series [dataSource]='chartData' type='Candle' xName='date' High='high' Low='low' Open='open'
            Close='close' Name='Apple'></e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

and here my class:

export class ChartComponent implements OnInit, OnDestroy {
  public chartData: Object[] = chartData;
  public periods!: Object;
  public title: string = 'Apple Inc. (AAPL)';
  public i: number = 0;
  public interval: any;
  public setTimeoutValue!: number;
  @ViewChild('chart', { static: true })
  public stock!: StockChartComponent | StockChartComponent;
  public selectorRender!: (args: IRangeSelectorRenderEventArgs) => void;
  public onRangeChange!: (args: any) => void;
  public indicators: Object[] = [];

  constructor() {}

  ngOnInit() {
    this.selectorRender = (args: IRangeSelectorRenderEventArgs) => {
      console.log(args);
    };

    this.onRangeChange = (args: any) => {
      console.log(args);
    };

    this.periods = {
      position: 'Left',
      periods: [
        { intervalType: 'Days', interval: 1, text: '1D' },
        { intervalType: 'Days', interval: 3, text: '3D' },
        { intervalType: 'Days', interval: 6, text: '6D' },
        { intervalType: 'Weeks', interval: 1, text: '1W' },
        { intervalType: 'Months', interval: 1, text: '1M' },
        ,
        { intervalType: 'Months', interval: 6, text: '6M' },
        { intervalType: 'Years', interval: 1, text: '1Y' },
        { intervalType: 'Years', interval: 5, text: '5Y' },
        { intervalType: 'Years', interval: 10, text: '10Y' },
        { intervalType: 'Auto', text: 'YTD' },
      ],
    };
    this.setTimeoutValue = 5000;
    this.interval = setInterval(() => {
      let i: number;
      if (getElement('chart-container') === null) {
        clearInterval(this.interval);
      } else {
        this.chartData.push({
          date: new Date(
            new Date('2017-09-18').setDate(
              new Date('2017-09-18').getDate() + this.i + 1
            )
          ),
          high: Math.floor(Math.random() * (100 - 90 + 1) + 90),
          low: Math.floor(Math.random() * (60 - 50 + 1) + 50),
          close: Math.floor(Math.random() * (99 - 51 + 1) + 51),
          open: Math.floor(Math.random() * (99 - 51 + 1) + 51),
        });
        this.i++;
        this.stock.series[0].dataSource = this.chartData;
        this.stock.refresh();
      }
    }, 3000);
  }

  ngOnDestroy() {
    clearInterval(this.interval);
  }
}

The same behaviour can be found on the syncfusion documentation website

[SrideviBharathi]

Hi Danlevy,

Greetings from syncfusion.

Query 1 : every time the data update, it resets the period selector.
We have analyzed your query and able to reproduce the issue. So, we have considered this as bug and logged a defect report. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 19th April 2022. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback Link : https://www.syncfusion.com/feedback/33822/in-live-stockchart-rangenavigator-is-resetting-on-every-update

Query 2 : I can't change the default periods values of 1M, 3M, 6M, 1Y, YTD
We have prepared a sample in which period selector period is customized. Please refer to below Screenshot and sample.

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

UG : https://ej2.syncfusion.com/angular/documentation/stock-chart/period-selector/#periods

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Regards,
Sridevi Bharathi.

[syncsiva]

Closing for housekeeping purposes. The reported bug can be tracked through below feedback link further,
https://www.syncfusion.com/feedback/33822/in-live-stockchart-rangenavigator-is-resetting-on-every-update