IgniteUI / igniteui-angular

Ignite UI for Angular is a complete library of Angular-native, Material-based Angular UI components with the fastest grids and charts, Pivot Grid, Dock Manager, Hierarchical Grid, and more.
https://www.infragistics.com/products/ignite-ui-angular
Other
571 stars 161 forks source link

WindowRect property for igx-data-chart not showing proper window when used with igx-time-x-axis #14603

Open Vighneshaa opened 3 months ago

Vighneshaa commented 3 months ago

Description

The axis does not show proper date when the combobox is used to alter the windowRect property for igx-data-chart. I am using the igx-time-x-axis for plotting the x-axis. The same codes work fine when the axis is changed to igx-category-x-axis.

Steps to reproduce

HTML:-

<igx-data-chart [crosshairVisibility]="crosshairVisibility" #chart height="100%" width="100%" [legend]="legend" [defaultInteraction]="defaultInteraction" [brushes]="brushColor" [windowRect]="windowRect" [isHorizontalZoomEnabled]="false" [isVerticalZoomEnabled]="false" [dataSource]="chartData">

            <igx-time-x-axis useClusteringMode="true" #xAxis overlap="0" gap="0.1" [dateTimeMemberPath]="DateKey" [label]="xAxisLabel">
            </igx-time-x-axis>

            <igx-line-series [unknownValuePlotting]="unknownValuePlotting" #lineSeries
                *ngFor="let axis of lineSeries" [xAxis]="xAxis" [yAxis]="yAxisMap[axis.template]" hitTestMode="ColorEncoded"
                [tooltipTemplate]="tooltipTemplate" [markerType]="'None'" [valueMemberPath]="axis.title"
                [title]="axis.title">
            </igx-line-series>

            <igx-crosshair-layer brush="gray"></igx-crosshair-layer>

            <igx-final-value-layer></igx-final-value-layer>
TS:- getWindowRect(startDate: Date): IgRect { if (this.chartData && this.chartData.length === 0) { return { top: 0, left: 0, width: 1, height: 1 } } const startDateIndex = this.chartData.findIndex((d: any) => d[this.DateKey] > startDate); console.log("startDateIndex:", startDateIndex, this.chartData); this.setYAxisMaxMinValue(startDateIndex); if (this.selectedRange === 'ALL') { return { top: 0, left: 0, width: 1, height: 1 } } console.log("startDateIndex / this.chartData.length:", 1 - startDateIndex / this.chartData.length); return { top: 0, left: startDateIndex / this.chartData.length, width: 1 - startDateIndex / this.chartData.length, height: 1 }; } ## Result Whenever the combox value is selected to any year it shows 2-3 months more data As you can see in below screenshot '1Y' is selected and the data That I am getting is from May 2023 ![image](https://github.com/user-attachments/assets/6c8ff366-d6e8-4224-a588-f696d923a91e) ## Expected result The chart should start from appropriate date.
Vighneshaa commented 1 month ago

Any updates here?