Disable line connections between 2 point in chart

[justus hinken]

Hey Guys,

is it possible to diasble the connection of 2 points when datetime is quite far apart?

In the marked area there is not data in my List<ChartData>. Is there a way to disable this or do I have to add these DateTime's and set their values to null?

Kind Regards

[Durga Gopalakrishnan]

Hi Justus,

Greetings from Syncfusion.

We recommend setting Y values as null for any datetime values that do not need to be displayed and setting the empty point mode to 'Gap' to achieve the desired result. We have prepared a sample for your reference. Please refer to the screenshot and sample below.

<SfChart>

    <ChartSeriesCollection>

        <ChartSeries>

            <ChartEmptyPointSettings Mode="EmptyPointMode.Gap">

           </ChartEmptyPointSettings>

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

@code {

    public List<ChartData> WeatherReports = new List<ChartData>

    {

        new ChartData { XValue = new DateTime(2005, 11, 01), YValue = 35 },

        new ChartData { XValue = new DateTime(2005, 11, 03), YValue = null },

        new ChartData { XValue = new DateTime(2005, 11, 07), YValue = 35 },

        //…

    };

}

Sample : https://blazorplayground.syncfusion.com/rDLpCCXcKvKruvor

Please check with the below online demo and documentation link for more information about empty points.

Online Demo : https://blazor.syncfusion.com/demos/chart/empty-point?theme=fluent2

UG : https://blazor.syncfusion.com/documentation/chart/chart-types/line#empty-points

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[justus hinken]

Perfect. Thank you I added a methode to fill the missing DateTimes and set the values to double.NaN.

But unfourtunately this havent solved my actual problem how I found out. I opend this thread to solve the following error:

I dont understand that.Somhow with my one chart which isof type SplineArea. Have you ever expierenced this error?

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Object reference not set to an instance of an object.


System.NullReferenceException: Object reference not set to an instance of an object.
   at Syncfusion.Blazor.Charts.Internal.SplineAreaSeriesRenderer.CalculateDirection()
   at Syncfusion.Blazor.Charts.Internal.SplineAreaSeriesRenderer.RenderSeries()
   at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.SeriesRenderer()
   at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.HandleChartSizeChange(Rect rect)
   at Syncfusion.Blazor.Charts.Internal.ChartSeriesRendererContainer.HandleChartSizeChange(Rect rect)
   at Syncfusion.Blazor.Charts.SfChart.UpdateRenderers(Boolean skip)
   at Syncfusion.Blazor.Charts.SfChart.OnLayoutChange(Boolean skip)
   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, ComponentState owningComponentState)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'OgNTqm9stGEVpPc9qN4HjrvNYnoIBGilrt6aYTGiyqA'.


System.NullReferenceException: Object reference not set to an instance of an object.
   at Syncfusion.Blazor.Charts.Internal.SplineAreaSeriesRenderer.CalculateDirection()
   at Syncfusion.Blazor.Charts.Internal.SplineAreaSeriesRenderer.RenderSeries()
   at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.SeriesRenderer()
   at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.HandleChartSizeChange(Rect rect)
   at Syncfusion.Blazor.Charts.Internal.ChartSeriesRendererContainer.HandleChartSizeChange(Rect rect)
   at Syncfusion.Blazor.Charts.SfChart.UpdateRenderers(Boolean skip)
   at Syncfusion.Blazor.Charts.SfChart.OnLayoutChange(Boolean skip)
   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, ComponentState owningComponentState)


My Chart:
<ChartSeriesCollection>
        @foreach (var series in Chart)
        {
                var display = series.Values.FillDateGaps();
                display.ForEachToTimeZone(LocationTimeZone);
                var type = series.ChartInfo.Type;
                var dashArray = series.ChartInfo.DashArray;
                var opacity = series.ChartInfo.Opacity;


                <ChartSeries DataSource="@display" Name="@series.Name" XName="X" YName="Y" Width="2"
                             Type="@type" Visible="series.IsVisible"
                             Fill="@series.Color" DashArray="@dashArray" Opacity="@opacity">
                    <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
                </ChartSeries>
        }
</ChartSeriesCollection>

[Durga Gopalakrishnan]

Justus,

We have prepared a sample using your attached code snippet with both line and spline area charts. The chart renders as expected. We have attached the tested sample and a screenshot for your reference.

Sample : https://blazorplayground.syncfusion.com/VZVfsWZPVlqftWTD

To assist with further analysis and provide a quicker solution, we kindly request the following information:

• Attempt to replicate the issue in the sample provided above.
• Share the data source used in your application.
• Let us know if any other customizations have been applied.

Kindly revert us if you have any other concerns.