igniteui-angular
igniteui-angular copied to clipboard
WindowRect property for igx-data-chart not showing proper window when used with igx-time-x-axis
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.
- igniteui-angular version: 16.0.27
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
Expected result
The chart should start from appropriate date.