Skip to content

1027279: Fixed legend toggle series dimming issue in charts. #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Yokesh-SF4393 wants to merge 8 commits into
base: main
Choose a base branch
from
Open

1027279: Fixed legend toggle series dimming issue in charts. #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5bc7553
1027279: Fixed legend toggle series dimming issue in charts.
YokeshSF4393 Jun 19, 2026
5359c7f
1027279: Fixed SB sample incorrect loading issue.
YokeshSF4393 Jun 22, 2026
d70d041
1027279: Fixed console error in arrow key navigation when chart has E…
YokeshSF4393 Jun 26, 2026
46c7374
Update chart.js
YokeshSF4393 Jun 26, 2026
f82eaba
1027279: Fixed series tooltip rendering issue on focusing trendline w…
YokeshSF4393 Jun 30, 2026
d06e9e8
1027279: Fixed data label hiding issue in charts.
YokeshSF4393 Jul 2, 2026
45d7ff5
1027279: Fixed mobile detection issue and testing portal issue.
YokeshSF4393 Jul 6, 2026
7be0c2f
1027279: Fixed page auto scroll issue in charts.
YokeshSF4393 Jul 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 38 additions & 2 deletions samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@inherits LayoutComponentBase
@implements IAsyncDisposable
@using Blazor.Toolkit.Samples.Client.Services
@inject SampleService SampleService

@using Microsoft.AspNetCore.Components.Web
@using Syncfusion.Blazor.Toolkit.Buttons
Expand Down Expand Up @@ -160,8 +162,10 @@

<main class="main-area">
<article class="page-content">
<CascadingValue Value="CurrentChartTheme">
@Body
<CascadingValue Value="@SampleService.IsDevice">
<CascadingValue Value="CurrentChartTheme">
@Body
</CascadingValue>
</CascadingValue>
</article>
</main>
Expand Down Expand Up @@ -268,6 +272,15 @@

// Register this instance with the helper
await JS.InvokeVoidAsync("responsiveBlazor.register", _dotNetRef);

// Initialize device detection immediately
try
{
bool isDevice = await JS.InvokeAsync<bool>("isDevice");
UpdateDeviceMode(isDevice);
}
catch { }

try
{
var currentTheme = await JS.InvokeAsync<string>("mainLayout.initTheme");
Expand All @@ -288,10 +301,33 @@
}
}

// JSInvokable: receives device mode and tablet status updates from JavaScript
[JSInvokable]
public void UpdateDeviceMode(bool isDevice)
{
SampleService.IsDevice = isDevice;

// Update screen size based on device detection
var newSize = isDevice ? ScreenSize.Mobile : ScreenSize.Desktop;

if (newSize != CurrentScreen)
{
CurrentScreen = newSize;
if (CurrentScreen == ScreenSize.Desktop)
{
OverlayLeftIsOpen = false;
}
InvokeAsync(StateHasChanged);
}
}

// JSInvokable: receives width and updates internal screen size state.
[JSInvokable]
public Task NotifyResize(int width)
{
bool isDevice = width <= 640;
SampleService.IsDevice = isDevice;

// Determine new logical screen size
var newSize = width <= 640 ? ScreenSize.Mobile : (width <= 1024 ? ScreenSize.Tablet : ScreenSize.Desktop);
// Only trigger a render when the logical size changes to minimize re-renders
Expand Down
2 changes: 1 addition & 1 deletion samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@
<NavLink class="nav-link" href="charts/interactivity/selection-and-highlight">Selection and Highlight</NavLink>
</li>
<li class="last-li-child">
<NavLink class="nav-link" href="/charts/interactivity/animation">Animation</NavLink>
<NavLink class="nav-link" href="charts/interactivity/animation">Animation</NavLink>
</li>
</ul>
</details>
Expand Down
22 changes: 11 additions & 11 deletions samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/AreaChart.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="502px">
<CodePreview IsFullWidth="true" CodeSection="@OverviewCode">
<PreviewSection>

Expand Down Expand Up @@ -95,7 +95,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="502px">
<CodePreview IsFullWidth="true" CodeSection="@DataLabelCode">
<PreviewSection>

Expand Down Expand Up @@ -154,7 +154,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="502px">
<CodePreview IsFullWidth="true" CodeSection="@StackingAreaCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="U.S. Agricultural Export Values (2008-2024)" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -242,7 +242,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="502px">
<CodePreview IsFullWidth="true" CodeSection="@StackingArea100Code">
<PreviewSection>

Expand Down Expand Up @@ -330,7 +330,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="502px">
<CodePreview IsFullWidth="true" CodeSection="@MultiColoredAreaCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Samsung Smartphone Shipments (2013-2024)" SubTitle="Trend Analysis: From Peak Sales to Recent Market Share" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -405,7 +405,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="580px">
<CodePreview IsFullWidth="true" CodeSection="@MissingPointsCode">
<PreviewSection>
<div class="mb-3">
Expand Down Expand Up @@ -490,7 +490,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="502px">
<CodePreview IsFullWidth="true" CodeSection="@LiveUpdateCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Live Update" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -544,7 +544,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="502px">
<CodePreview IsFullWidth="true" CodeSection="@InvertedAxesCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Inverted Axes" Width="100%" Height="400px" IsTransposed="true" Theme="@_currentTheme">
Expand Down Expand Up @@ -611,7 +611,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="502px">
<CodePreview IsFullWidth="true" CodeSection="@NegativeDataCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Annual Gold Price (2009-2023) in USD" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -708,7 +708,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="502px">
<CodePreview IsFullWidth="true" CodeSection="@CustomizationCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Global Primary Energy Consumption by Source" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -777,7 +777,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="502px">
<CodePreview IsFullWidth="true" CodeSection="@DatasourceUpdateCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Auto-Updating Area Chart" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down
16 changes: 8 additions & 8 deletions ...es/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/SplineAreaChart.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="500px">
<CodePreview IsFullWidth="true" CodeSection="@OverviewCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Inflation Rate in Percentage" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -97,7 +97,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="500px">
<CodePreview IsFullWidth="true" CodeSection="@DataLabelCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="France's Inflation Rate (%) Over Time" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -156,7 +156,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="553px">
<CodePreview IsFullWidth="true" CodeSection="@SplineVariationsCode">
<PreviewSection>
<div style="width: 100%;">
Expand Down Expand Up @@ -239,7 +239,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="553px">
<CodePreview IsFullWidth="true" CodeSection="@MissingPointsCode">
<PreviewSection>
<div style="width: 100%;">
Expand Down Expand Up @@ -308,7 +308,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="500px">
<CodePreview IsFullWidth="true" CodeSection="@InvertedAxesCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Spline Area - Inverted" Width="100%" Height="400px" IsTransposed="true" Theme="@_currentTheme">
Expand Down Expand Up @@ -378,7 +378,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="500px">
<CodePreview IsFullWidth="true" CodeSection="@NegativeDataCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Annual Gold Price (2009-2023) in USD" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -463,7 +463,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="500px">
<CodePreview IsFullWidth="true" CodeSection="@CustomizationCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="France's Inflation Rate (%) Over Time" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -513,7 +513,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="500px">
<CodePreview IsFullWidth="true" CodeSection="@DatasourceUpdateCode">
<PreviewSection>
<div style="width: 100%;">
Expand Down
10 changes: 5 additions & 5 deletions samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/StepAreaChart.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="500px">
<CodePreview IsFullWidth="true" CodeSection="@OverviewCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Global Electricity Production" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -85,7 +85,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="500px">
<CodePreview IsFullWidth="true" CodeSection="@DataLabelCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Global Corn Exports (Billions of Tons)" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -161,7 +161,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="500px">
<CodePreview IsFullWidth="true" CodeSection="@InvertedAxesCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Population by Age and Gender (Percent)" Width="100%" Height="400px" IsTransposed="true" Theme="@_currentTheme">
Expand Down Expand Up @@ -221,7 +221,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="500px">
<CodePreview IsFullWidth="true" CodeSection="@NegativeDataCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Annual Gold Price (2009-2023) in USD" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down Expand Up @@ -317,7 +317,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="500px">
<CodePreview IsFullWidth="true" CodeSection="@CustomizationCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Monthly Active Users (Web vs Mobile)" Width="100%" Height="400px" Theme="@_currentTheme">
Expand Down
12 changes: 6 additions & 6 deletions ....Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/AxisCustomization.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="553px">
<CodePreview IsFullWidth="true" CodeSection="@AxisTitleCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Population by Country 2024" Theme="@_currentTheme">
Expand Down Expand Up @@ -89,7 +89,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="553px">
<CodePreview IsFullWidth="true" CodeSection="@AxisTitleRotationCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Population by Country 2024" Theme="@_currentTheme">
Expand Down Expand Up @@ -155,7 +155,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="553px">
<CodePreview IsFullWidth="true" CodeSection="@TickLinesCode">
<PreviewSection>

Expand Down Expand Up @@ -218,7 +218,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="553px">
<CodePreview IsFullWidth="true" CodeSection="@GridLinesCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Population by Country 2024" Theme="@_currentTheme">
Expand Down Expand Up @@ -286,7 +286,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="553px">
<CodePreview IsFullWidth="true" CodeSection="@InversedAxisCode">
<PreviewSection>
<SfChart @key="@_currentTheme" Title="Population by Country 2024" Theme="@_currentTheme">
Expand Down Expand Up @@ -349,7 +349,7 @@
</Content>
</Description>

<VirtualizeSection MinHeightPx="600px">
<VirtualizeSection MinHeightPx="553px">
<CodePreview IsFullWidth="true" CodeSection="@MultipleAxisCode">
<PreviewSection>

Expand Down
Loading