Is it possible for a Stock chart to have a Date Range picker only ?

[Ali El Mufti]

Hello everyone, I was wondering, when I tried to implement a Period Selector on my project, was it possible to only display the Date Range picker and not display the ranges like so :

Thanks in advance !

[Srihari Muthukaruppan]

Hi Ali, 

 

We can achieve your requirement by using periods, seriesType, indicatorType, trendlineType, and exportType property in the chart. Based on that we have prepared a sample for your reference. Please find the sample, code snippet and screenshot below. 

 

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

 

Code Snippet: 

// add your additional code here 

 

<ejs-stockchart id='stockChartDefault' [chartArea]='chartArea' [seriesType]='seriesType' 

            [indicatorType]='indicatorType' [trendlineType]="trendlineType" [periods]='periods' 

            [exportType]='exportType' [primaryXAxis]='primaryXAxis' style="display:block;" [primaryYAxis]='primaryYAxis' 

            [title]='title' [titleStyle]='titleStyle' [crosshair]='crosshair' (tooltipRender)='tooltipRender($event)' 

            [tooltip]='tooltip' (load)='load($event)'> 

            <e-stockchart-series-collection> 

                <e-stockchart-series [dataSource]='data1' type='Candle' xName='x' yName='high' high='high' low='low'> 

                </e-stockchart-series> 

            </e-stockchart-series-collection> 

        </ejs-stockchart> 

 

// add your additional code here 

 

public periods: PeriodsModel[] = [ 

    {  text: ' ', selected: true } 

  ]; 

  public seriesType: string[] = []; 

  public indicatorType: string[] = []; 

  public trendlineType: string[] = []; 

  public exportType: string[] = []; 

 

// add your additional code here 

 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M 

[Ali El Mufti]

Hey! I implemented the very thing you showed me, but it appeared that there's a little problem of display

I don't really know if I'm doing something wrong or if I installed anything non compatible, so if you have any clue, i'm willing to take it ! Thanks !

(EDIT: It looks like the display error is due to the reset button, is there another way to do it ? )

[Arun Raji]

Hi Ali,  

As per your query, we suspect you tried to remove the reset button from the toolbar. As of now, we don’t have support to remove the reset button through the API at the sample level. But we can remove them by using the workaround in the loaded event of charts. Find the below code snippet, output screenshot, and also stackblitz link which describes how to remove the reset button dynamically. 

public loaded(args: IStockChartEventArgs): void { 

    let resetElement: HTMLCollectionOf < Element > = document.getElementsByClassName('e-toolbar-right'); 

    (resetElement[0].children[1] as HTMLElement).style.display = 'none'; 

} 

Stackblitz sample -- https://stackblitz.com/edit/angular-a2mzmd-4eoqnl?file=app.component.ts 

Output -- 

 

Let us know if you have any other concern.  

Thanks, 

Arun