SfChart error

[Michael Aston]

I'm getting the following error with this code.

I suspect the error is in the calculation of the X axis labels as if the size of the chart is changed to 283x255 or the first date in the data chaned to (2020, 03, 29, 11, 16, 49, 323) then the error does not occur.

blazor.server.js:21 [2021-03-30T12:53:12.776Z] Error: System.ArgumentOutOfRangeException: Year, Month, and Day parameters describe an un-representable DateTime.

   at Syncfusion.Blazor.Charts.SfChart.OnAfterScriptRendered()

   at Syncfusion.Blazor.SfBaseComponent.OnAfterRenderAsync(Boolean firstRender)

   at Syncfusion.Blazor.SfDataBoundComponent.OnAfterRenderAsync(Boolean firstRender)

   at Syncfusion.Blazor.Charts.SfChart.OnAfterRenderAsync(Boolean firstRender)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

@page "/"

@using Syncfusion.Blazor.Charts

<div style="width:629px;height:629px">

        <SfChart>

            <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

            <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months" EdgeLabelPlacement="EdgeLabelPlacement.Shift">

                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

            </ChartPrimaryXAxis>

            <ChartPrimaryYAxis LabelFormat="{value}" RangePadding="ChartRangePadding.None" Minimum="0" Maximum="90">

                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

            </ChartPrimaryYAxis>

            <ChartTooltipSettings Enable="true"></ChartTooltipSettings>

            <ChartSeriesCollection>

                    <ChartSeries DataSource=@ChartData Name="Actions open" XName="Period" Width="2" Opacity="1" YName="ActionsOpen" Type="ChartSeriesType.Line">

                        <ChartSeriesAnimation Enable=@true></ChartSeriesAnimation>

                        <ChartMarker Visible="true" Width="10" Height="10" />

                    </ChartSeries>

                    <ChartSeries DataSource=@ChartData Name="Actions closed" XName="Period" Width="2" Opacity="1" YName="ActionsClosed" Type="ChartSeriesType.Line">

                        <ChartSeriesAnimation Enable=@true></ChartSeriesAnimation>

                        <ChartMarker Visible="true" Width="10" Height="10" />

                    </ChartSeries>

                    <ChartSeries DataSource=@ChartData Name="Actions new" XName="Period" Width="2" Opacity="1" YName="ActionsNew" Type="ChartSeriesType.Line">

                        <ChartSeriesAnimation Enable=@true></ChartSeriesAnimation>

                        <ChartMarker Visible="true" Width="10" Height="10" />

                    </ChartSeries>

                    <ChartSeries DataSource=@ChartData Name="Issues open" XName="Period" Width="2" Opacity="1" YName="IssuesOpen" Type="ChartSeriesType.Line">

                        <ChartSeriesAnimation Enable=@true></ChartSeriesAnimation>

                        <ChartMarker Visible="true" Width="10" Height="10" />

                    </ChartSeries>

                    <ChartSeries DataSource=ChartData Name="Issues closed" XName="Period" Width="2" Opacity="1" YName="IssuesClosed" Type="ChartSeriesType.Line">

                        <ChartSeriesAnimation Enable=@true></ChartSeriesAnimation>

                        <ChartMarker Visible="true" Width="10" Height="10" />

                    </ChartSeries>

                    <ChartSeries DataSource=ChartData Name="Issues new" XName="Period" Width="2" Opacity="1" YName="IssuesNew" Type="ChartSeriesType.Line">

                        <ChartSeriesAnimation Enable=@true></ChartSeriesAnimation>

                        <ChartMarker Visible="true" Width="10" Height="10" />

                    </ChartSeries>

                </ChartSeriesCollection>

        </SfChart>

</div>

@code {

    public class LineChartData

            {

                public DateTime Period { get; set; }

                public double ActionsOpen { get; set; }

                public double ActionsClosed { get; set; }

                public double ActionsNew { get; set; }

                public double IssuesOpen { get; set; }

                public double IssuesClosed { get; set; }

                public double IssuesNew { get; set; }

            }

     public List<LineChartData> ChartData = new List<LineChartData>

            {

            new LineChartData { Period = new DateTime(2020, 03, 30, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

            new LineChartData { Period = new DateTime(2020, 04, 30, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

            new LineChartData { Period = new DateTime(2020, 05, 30, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

            new LineChartData { Period = new DateTime(2020, 06, 30, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

            new LineChartData { Period = new DateTime(2020, 07, 30, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

            new LineChartData { Period = new DateTime(2020, 08, 30, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

            new LineChartData { Period = new DateTime(2020, 09, 30, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

            new LineChartData { Period = new DateTime(2020, 10, 30, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

            new LineChartData { Period = new DateTime(2020, 11, 30, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

            new LineChartData { Period = new DateTime(2020, 12, 30, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

            new LineChartData { Period = new DateTime(2021, 01, 30, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

            new LineChartData { Period = new DateTime(2021, 02, 28, 11, 16, 49, 323), ActionsOpen = 21, ActionsClosed = 28, ActionsNew = 7, IssuesOpen = 21, IssuesClosed = 28, IssuesNew = 7 },

             };

    }

  

[Srihari Muthukaruppan]

Hi Michael, 

 

Sorry for the inconvenience caused.  

 

We have considered this scenario as a bug and logged a bug request on this and you can keep track of it from the below feedback portal link. 

 

Feedback Link: https://www.syncfusion.com/feedback/23851/while-using-date-time-with-milliseconds-console-error-is-thrown 

 

This fix will be available in our weekly patch release which is scheduled to be rolled out on or before 13 April 2021. We appreciate your patience until then  

 

Regards,  

Srihari M 

[Srihari Muthukaruppan]

Hi Michael, 

  

We are glad to announce that our v19.1.56 patch release is rolled out. We have added the fix for the reported scenario. You can use the latest (19.1.56) Syncfusion.EJ2.Blazor NuGet package version to get rid of the reported issue. Please find the sample and screenshot for your reference. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MilliSecondsChart19.1.56_-356624517.zip 

 

​Screenshot: 

 

 

We appreciate your patience in waiting for this release. Kindly let us know if you need further assistance. 

 

Regards, 

Srihari 

 

[Michael Aston]

This is reproducible in 19.2.0.48 with this code.

@page "/"

@using Syncfusion.Blazor.Charts

<div style="width:629px;height:629px">

    <SfChart>

        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months" EdgeLabelPlacement="EdgeLabelPlacement.Shift">

            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

        </ChartPrimaryXAxis>

        <ChartPrimaryYAxis Interval="20">

            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

        </ChartPrimaryYAxis>

        <ChartTooltipSettings Enable="true" Format="<b>${point.x} : ${point.y}%</b>"></ChartTooltipSettings>

        <ChartSeriesCollection>

            <ChartSeries DataSource=@ChartData Name="1 Compliant (verified)" XName="DateInterval" YName="Response1_Value" Fill="#339966" Width="2" Opacity="1" Type="ChartSeriesType.StackingArea100" />

            <ChartSeries DataSource=@ChartData Name="2 Compliant" XName="DateInterval" YName="Response2_Value" Fill="#99CC00" Width="2" Opacity="1" Type="ChartSeriesType.StackingArea100" />

            <ChartSeries DataSource=@ChartData Name="3 Partially compliant" XName="DateInterval" YName="Response3_Value" Fill="#FF9999" Width="2" Opacity="1" Type="ChartSeriesType.StackingArea100" />

            <ChartSeries DataSource=@ChartData Name="4 Non-compliant" XName="DateInterval" YName="Response4_Value" Fill="#FF0000" Width="2" Opacity="1" Type="ChartSeriesType.StackingArea100" />

            <ChartSeries DataSource=@ChartData Name="X Status not known" XName="DateInterval" YName="ResponseX_Value" Fill="#FFCC99" Width="2" Opacity="1" Type="ChartSeriesType.StackingArea100" />

            <ChartSeries DataSource=@ChartData Name="N Not applicable (verify)" XName="DateInterval" YName="ResponseNAV_Value" Fill="#FF9900" Width="2" Opacity="1" Type="ChartSeriesType.StackingArea100" />

            <ChartSeries DataSource=@ChartData Name="N Not applicable" XName="DateInterval" YName="ResponseN_Value" Fill="#CCCCCC" Width="2" Opacity="1" Type="ChartSeriesType.StackingArea100" />

            <ChartSeries DataSource=@ChartData Name="Not evaluated" XName="DateInterval" YName="ResponseNE_Value" Fill="#999999" Width="2" Opacity="1" Type="ChartSeriesType.StackingArea100" />

        </ChartSeriesCollection>

    </SfChart>

</div>

@code {

    public class ComplianceIntervalData

    {

        public DateTime DateInterval { get; set; }

        public double Response1_Value { get; set; }

        public double Response2_Value { get; set; }

        public double Response3_Value { get; set; }

        public double Response4_Value { get; set; }

        public double ResponseN_Value { get; set; }

        public double ResponseX_Value { get; set; }

        public double ResponseNAV_Value { get; set; }

        public double ResponseNE_Value { get; set; }

    }

    public List<ComplianceIntervalData> ChartData = new List<ComplianceIntervalData>

    {

            new ComplianceIntervalData { DateInterval = new DateTime(2020, 07, 31), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2020, 08, 31), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2020, 09, 30), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2020, 10, 31), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2020, 11, 30), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2020, 12, 31), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2021, 01, 31), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2021, 02, 28), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2021, 03, 31), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2021, 04, 30), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2021, 05, 31), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2021, 06, 30), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000},

            new ComplianceIntervalData { DateInterval = new DateTime(2021, 07, 31), Response1_Value = 2.080000, Response2_Value = 3.700000, Response3_Value = 0.110000, Response4_Value = 1.160000, ResponseN_Value = 0.020000, ResponseX_Value = 0.040000, ResponseNAV_Value = 0.530000, ResponseNE_Value = 92.370000}

    };

}

[Durga Gopalakrishnan]

Hi Michael, 

 

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 10^th August 2021. 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/27304/ 

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, 

Durga G 

[Durga Gopalakrishnan]

Hi Michael, 

We are glad to announce that our v19.2.55 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor NuGet package version.  

Nugget Package : https://www.nuget.org/packages/Syncfusion.Blazor 

Screenshot : 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatetimeError-910062660.zip 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 

Durga G