It's a Blazor server side web application. I am using SfSwitch to toggle Datasource of a SfAccumulationChart to display different data. It's generating a flickering effect whenever changling
SfSwitch . Is there anything I am wrongly impemented? I used
SfSwitch event to change the Datasource. Below is the code I used.
@page "/donutchart"
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@using System.Globalization;
@inject NavigationManager NavigationManager
<div>
<SfSwitch @bind-Checked="@isChecked" OnLabel="ZBC" OffLabel="Default" ValueChange="Change" TChecked="bool?" CssClass="e-large"></SfSwitch>
</div>
<div class="control-section">
<SfAccumulationChart Title="3D Professional Contracting, Inc." Theme="@Theme">
<AccumulationChartLegendSettings Visible="true" Position="LegendPosition.Bottom" Padding="0">
</AccumulationChartLegendSettings>
<AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@MatrixDataPoints" XName="MatrixType" YName="Amount" Radius="90%" InnerRadius="50%" Name="Matrix" Explode="true" ExplodeOffset="10%" ExplodeIndex="3" StartAngle="270" EndAngle="90" PointColorMapping="Color">
<AccumulationDataLabelSettings Visible="true" Name="DataLabelMappingName">
<AccumulationChartDataLabelFont FontWeight="600"></AccumulationChartDataLabelFont>
</AccumulationDataLabelSettings>
</AccumulationChartSeries>
</AccumulationChartSeriesCollection>
</SfAccumulationChart>
</div>
@code{
private bool? isChecked = false;
private Theme Theme { get; set; }
private bool IsShow = true;
public List<MatrixData> MatrixDataPoints { get; set; } = new List<MatrixData>();
public List<MatrixData> DefaultMatrixDataPoints { get; set; } = new List<MatrixData>
{
new MatrixData { MatrixType = "OpenLiability", Amount = 8357258, DataLabelMappingName = "$8357258", Color="#4e93d3" },
new MatrixData { MatrixType = "AvailableCapacity", Amount = 6642742, DataLabelMappingName = "$6642742", Color="#dcdbdc" },
};
public List<MatrixData> ZBCtMatrixDataPoints { get; set; } = new List<MatrixData>
{
new MatrixData { MatrixType = "OpenLiability", Amount = 8357258, DataLabelMappingName = "$8357258", Color="#4e93d3" },
new MatrixData { MatrixType = "AvailableCapacity", Amount = 15642742, DataLabelMappingName = "$15642742", Color="#dcdbdc" },
};
protected override void OnInitialized()
{
MatrixDataPoints = isChecked == true ? ZBCtMatrixDataPoints : DefaultMatrixDataPoints;
if (NavigationManager.Uri.IndexOf("material") > -1)
{
Theme = Theme.Material;
}
else if (NavigationManager.Uri.IndexOf("fabric") > -1)
{
Theme = Theme.Fabric;
}
else if (NavigationManager.Uri.IndexOf("bootstrap") > -1)
{
Theme = Theme.Bootstrap;
}
else if (NavigationManager.Uri.IndexOf("highcontrast") > -1)
{
Theme = Theme.HighContrast;
}
else
{
Theme = Theme.Material;
}
}
public class MatrixData
{
public string MatrixType { get; set; }
public double Amount { get; set; }
public string DataLabelMappingName { get; set; }
public string Color { get; set; }
}
private void Change(ChangeEventArgs<bool?> args)
{
MatrixDataPoints = isChecked == true ? ZBCtMatrixDataPoints : DefaultMatrixDataPoints;
}
}
<style>
.e-large {
width: 55px;
height: 25px
}
</style>
