Chart is very slow on initial rendering and zooming

[Armin Stockner]

Hello,

in our code base (Blazor WASM) we display a chart with 5000 datapoints. It takes around 2-3 seconds for the chart to get rendered. When applying a zoom level the chart starts hanging/lagging and the whole chart becomes unusable because of rerendering of the control which takes a few seconds.

Here is the code we are talking about:

<SfChart Theme="Syncfusion.Blazor.Theme.Fluent2" Width="100%" Height="100%" Title="@Title" EnableAnimation="false">

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

    <ChartPrimaryXAxis Title="X" Minimum="1" Maximum="1000" Interval="500" ValueType="Syncfusion.Blazor.Charts.ValueType.Double" EdgeLabelPlacement="EdgeLabelPlacement.Shift" LabelIntersectAction="LabelIntersectAction.Trim">

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

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

        <ChartAxisLabelStyle Size="11px"></ChartAxisLabelStyle>

    </ChartPrimaryXAxis>

    <ChartPrimaryYAxis Title="Y" Minimum="0" Maximum="100" Interval="5">

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

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

        <ChartAxisLabelStyle Size="11px"></ChartAxisLabelStyle>

        <ChartAxisTitleStyle Size="13px"></ChartAxisTitleStyle>

    </ChartPrimaryYAxis>

    <ChartLegendSettings Visible="false"></ChartLegendSettings>

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

    <ChartZoomSettings ToolbarDisplayMode="ToolbarMode.Always" EnableSelectionZooming="true" Mode="ZoomMode.XY" >

    </ChartZoomSettings>

    <ChartSeriesCollection>

        <ChartSeries DataSource="@DataSource" XName="X" YName="Y" Opacity="1" Width="1" Type="ChartSeriesType.Line" Fill="#2485FA">

            <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

Is there some way the performance of the chart rendering process can be improved? At the moment, the chart can only be used effectively with less than 500 data points. 

[Durga Gopalakrishnan]

Hi Armin,

Thanks for using Syncfusion products.

By default, in WASM application while loading large amount of data to chart, it will take few seconds to render the chart. You can improve the runtime performance in WASM using AOT compilation. We recommend you to publish and host the application to check the performance changes.

For more information about AOT compilation, please refer the below link.

Reference Link : https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-7.0#ahead-of-time-aot-compilation

We have attached the tested sample for your reference.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartPerf1039613925.zip

Note : You cannot view the performance changes in local and it can be viewed only in hosted application after enabling AOT compilation.

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.