Chart Series name not refresh in version 26
Since Chart is updated to 26.*, ChartSeries XName does not dynamically refreshed. It is not reproduced in 25.*. Below screenshot shows that "GroupBy" button changes data label in DataGrid but XName in ChartSeries. RefreshAsync resolves the issue but it flicker the chart area.
<div class="row">
<div class="col">
<SfToolbar OverflowMode="OverflowMode.Extended">
<ToolbarItems>
<ToolbarItem CssClass="e-flat" Text="Prev" Type="ItemType.Button" PrefixIcon="e-icons e-chevron-left-small" TooltipText="Prev Month" OnClick="PrevMonthClicked"></ToolbarItem>
<ToolbarItem CssClass="e-flat" Text="Next" Type="ItemType.Button" PrefixIcon="e-icons e-chevron-right-small" TooltipText="Next Month" OnClick="NextMonthClicked"></ToolbarItem>
<ToolbarItem CssClass="e-flat" Text="Current" Type="ItemType.Button" PrefixIcon="e-icons e-week" TooltipText="This Month" OnClick="ThisMonthClicked"></ToolbarItem>
<ToolbarItem Type="ItemType.Separator" />
<ToolbarItem CssClass="e-flat" Text="Custom" Align="ItemAlign.Left">
<Template>
<SfDateRangePicker @bind-StartDate="StartDate" @bind-EndDate="EndDate" AllowEdit="true" />
</Template>
</ToolbarItem>
<ToolbarItem Type="ItemType.Separator" />
<ToolbarItem Type="ItemType.Input">
<Template>
<SfButtonGroup Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single" CssClass="e-flat">
<ButtonGroupButton IsPrimary="true" @onclick="@(() => { GroupBy = "EquipmentType"; })" Selected="true">Equipment Type</ButtonGroupButton>
<ButtonGroupButton @onclick="@(() => { GroupBy = "AssetId"; })">Asset Id</ButtonGroupButton>
@* <ButtonGroupButton @onclick="@(() => { GroupBy = "Manufacturer"; })">Manufacturer</ButtonGroupButton> *@
<ButtonGroupButton @onclick="@(() => { GroupBy = "ModelNumber"; })">Model Number</ButtonGroupButton>
</SfButtonGroup>
</Template>
</ToolbarItem>
<ToolbarItem Type="ItemType.Spacer" />
<ToolbarItem Type="ItemType.Input">
<Template>
<SfCheckBox Label="Include All" @bind-Checked="IncludeAll"></SfCheckBox>
</Template>
</ToolbarItem>
<ToolbarItem CssClass="e-flat" Text="Export" Type="ItemType.Button" PrefixIcon="e-icons e-export-excel" TooltipText="Export Excel" OnClick="ExportExcel"></ToolbarItem>
</ToolbarItems>
</SfToolbar>
</div>
</div>
<div class="row py-2">
<div class="col-md-4 py-2 px-4">
<SfGrid DataSource="_groupCounts" TValue="GroupCount" AllowPaging="true">
<GridTemplates>
<ToolbarTemplate>
<SfToolbar CssClass="px-2">
<ToolbarItems>
<ToolbarItem Type="@ItemType.Input" Text="PageSize">
<SfComboBox @bind-Value="@_groupCountsPageSize" DataSource="@_pageSizeDisplayOptions" Width="60px" ShowClearButton="false" CssClass="e-small">
<ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>
</SfComboBox>
</ToolbarItem>
</ToolbarItems>
</SfToolbar>
</ToolbarTemplate>
</GridTemplates>
<GridPageSettings PageSize="@_groupCountsPageSize"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(GroupCount.Key) HeaderText="Key" Width="130px" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Center"/>
<GridColumn Field=@nameof(GroupCount.ReviewedCount) HeaderText="Reviewed" Width="85px" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Center">
<Template>
@{
var groupCount = context as GroupCount;
<span class="reviewed_count">@groupCount?.ReviewedCount</span>
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(GroupCount.TotalCount) HeaderText="Total" Width="75px" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Center">
<Template>
@{
var groupCount = context as GroupCount;
<span class="total_count">@groupCount?.TotalCount</span>
}
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
</div>
<div class="col-md-8">
<SfChart @ref="_groupCountChart" Palettes="@_palettes" Height="320px">
<ChartPrimaryXAxis Title="@_groupBy" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartPrimaryYAxis Title="Count" />
<ChartSeriesCollection>
<ChartSeries DataSource="@_groupCounts" XName="Key" YName="ReviewedCount" Width="1" Opacity="0.8" Type="ChartSeriesType.Column" />
<ChartSeries DataSource="@_groupCounts" XName="Key" YName="TotalCount" Width="1" Opacity="0.8" Type="ChartSeriesType.Column" />
</ChartSeriesCollection>
<ChartLegendSettings ToggleVisibility="true" Position="LegendPosition.Auto" />
</SfChart>
</div>
</div>
Hi Yongkee,
We have prepared the sample based on your requirement in latest version. The Month field is assigned for chart series XName. The chart is displayed properly with specified field value in grid.
Sample : https://blazorplayground.syncfusion.com/VjBpXmNuzyJWiTJc
To better analyze the reported issue and provide a timely solution, we need additional information. Please assist us by providing the following details.
- Attempt to replicate the issue in the provided sample.
- Share your sample or code snippet with full configurations.
- Provide your datasource file.
This information will greatly aid us in understanding the scenario and resolving the problem efficiently. Kindly revert us if you have any other concerns.
Regards,
Durga Gopalakrishnan.
Yongkee,
We have ensured your reported scenario by changing the grid column field, the chart XName and YName names dynamically on button click; unfortunately, we are unable to replicate the reported problem. Please check with the below snippet and screenshot.
|
public void ChangeData() { xName = headerText1 = "X"; yName1 = headerText2 = "Y1"; yName2 = headerText3 = "Y2"; grid.Refresh(); chart.RefreshAsync(); } |
Before Update
After Update
Sample : https://blazorplayground.syncfusion.com/BZBJjmsZzyjNXQqg
If you are still facing problem, please try to replicate an issue in above sample or share us issue reproduced sample which will be helpful for us to analyze further and assist you better.
The problem still remains. I
