I am testing Blazor Server Side Charts (SF Blazor 18.2.0.44).
I have 4 Charts on my page which works very fine.
After enabling zoom function (see ChartZoomSettings) I have the following problem:
When zooming in one of the four charts all other charts disappear. Only the one I am zooming in is still on the page.
I have tried to assign each chart a unique ID. I have also tried to give them in div containers with unique IDs.
Nothing helped.
Did I miss something?
After trying a few things my code looks like this:
<div id="control-content">
@foreach (var track in analyzerTracks)
{
string chartId = string.Format("chart_id_{0}", track.AnalyzerTrackId);
<div
[email protected]>
<div class="control-section">
<SfChart ID=@chartId Width="90%"
[email protected]>
<ChartEvents Load="ChartLoad" />
<ChartTitleStyle Size="26px"></ChartTitleStyle>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
</ChartPrimaryXAxis>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
<ChartZoomSettings EnableMouseWheelZooming="true" EnablePinchZooming="true" EnableSelectionZooming="true"></ChartZoomSettings> <ChartSeriesCollection>
@if (analyzerStatisticData != null && analyzerStatisticData.AnalyzerTracks.ContainsKey(track.TrackName))
{
@foreach (string groupName in analyzerStatisticData.AnalyzerTracks[track.TrackName].MaterialgroupValues.Keys)
{
<ChartSeries DataSource="@analyzerStatisticData.AnalyzerTracks[track.TrackName].MaterialgroupValues[groupName]"
Name=@groupName PointColorMapping="Color"
Width="2"
XName="Date" YName="Value" Type="ChartSeriesType.MultiColoredLine">
</ChartSeries>
}
}
</ChartSeriesCollection>
<ChartLegendSettings Visible="true"></ChartLegendSettings>
</SfChart>
</div>
</div>
}
</div>