From 5bc7553a117d6daa44eb89c17521d42cc181bec6 Mon Sep 17 00:00:00 2001 From: YokeshSF4393 Date: Fri, 19 Jun 2026 10:45:40 +0530 Subject: [PATCH 1/8] 1027279: Fixed legend toggle series dimming issue in charts. --- src/wwwroot/scripts/chart.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/wwwroot/scripts/chart.js b/src/wwwroot/scripts/chart.js index ec8f440..31852b2 100644 --- a/src/wwwroot/scripts/chart.js +++ b/src/wwwroot/scripts/chart.js @@ -852,6 +852,10 @@ const SfChart = (function () { else if (chart.toggleVisibility && chart.enableHighlight) { chart.isLegendHighlighting = false; chart.prevHighlightedSeriesIndex = -1; + const elements = Array.from(document.getElementsByClassName(chart.unSelected)); + elements.forEach(element => { + removeSvgClass(element, element.getAttribute('class')); + }); storeToggledLegendIndexes(target, chart, e); } } From 5359c7fc0c9931fbd07576c10da47bee5900dca1 Mon Sep 17 00:00:00 2001 From: YokeshSF4393 Date: Mon, 22 Jun 2026 19:41:51 +0530 Subject: [PATCH 2/8] 1027279: Fixed SB sample incorrect loading issue. --- .../Charts/AreaCharts/AreaChart.razor | 22 +++++++------- .../Charts/AreaCharts/SplineAreaChart.razor | 16 +++++----- .../Charts/AreaCharts/StepAreaChart.razor | 10 +++---- .../AxisConfiguration/AxisCustomization.razor | 12 ++++---- .../Charts/AxisConfiguration/AxisLabels.razor | 14 ++++----- .../AxisConfiguration/CategoryAxis.razor | 8 ++--- .../AxisConfiguration/DateTimeAxis.razor | 8 ++--- .../Charts/AxisConfiguration/LogAxis.razor | 8 ++--- .../AxisConfiguration/NumericAxis.razor | 10 +++---- .../BubbleAndScatterCharts/ScatterChart.razor | 8 ++--- .../Charts/ChartElements/Annotation.razor | 8 ++--- .../Charts/ChartElements/DataLabel.razor | 14 ++++----- .../Charts/ChartElements/Legend.razor | 22 +++++++------- .../Charts/ChartElements/Marker.razor | 10 +++---- .../Charts/ChartElements/Stripline.razor | 8 ++--- .../Charts/ChartElements/Trendline.razor | 18 +++++------ .../Charts/ColumnAndBarCharts/BarChart.razor | 26 ++++++++-------- .../ColumnAndBarCharts/ColumnChart.razor | 30 +++++++++---------- .../Charts/Interactivity/Crosshair.razor | 12 ++++---- .../Charts/Interactivity/Tooltip.razor | 14 ++++----- .../Interactivity/ZoomingAndPanning.razor | 16 +++++----- .../Charts/LineCharts/LineChart.razor | 22 +++++++------- .../Charts/LineCharts/SplineChart.razor | 18 +++++------ .../Charts/LineCharts/SteplineChart.razor | 8 ++--- 24 files changed, 171 insertions(+), 171 deletions(-) diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/AreaChart.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/AreaChart.razor index 9e27ff3..823268a 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/AreaChart.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/AreaChart.razor @@ -21,7 +21,7 @@ - + @@ -95,7 +95,7 @@ - + @@ -154,7 +154,7 @@ - + @@ -242,7 +242,7 @@ - + @@ -330,7 +330,7 @@ - + @@ -405,7 +405,7 @@ - +
@@ -490,7 +490,7 @@ - + @@ -544,7 +544,7 @@ - + @@ -611,7 +611,7 @@ - + @@ -708,7 +708,7 @@ - + @@ -777,7 +777,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/SplineAreaChart.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/SplineAreaChart.razor index 2917bd4..1db1df7 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/SplineAreaChart.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/SplineAreaChart.razor @@ -20,7 +20,7 @@ - + @@ -97,7 +97,7 @@ - + @@ -156,7 +156,7 @@ - +
@@ -239,7 +239,7 @@ - +
@@ -308,7 +308,7 @@ - + @@ -378,7 +378,7 @@ - + @@ -463,7 +463,7 @@ - + @@ -513,7 +513,7 @@ - +
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/StepAreaChart.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/StepAreaChart.razor index 34206c8..733094e 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/StepAreaChart.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AreaCharts/StepAreaChart.razor @@ -17,7 +17,7 @@ - + @@ -85,7 +85,7 @@ - + @@ -161,7 +161,7 @@ - + @@ -221,7 +221,7 @@ - + @@ -317,7 +317,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/AxisCustomization.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/AxisCustomization.razor index 8e0486a..1f32370 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/AxisCustomization.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/AxisCustomization.razor @@ -22,7 +22,7 @@ - + @@ -89,7 +89,7 @@ - + @@ -155,7 +155,7 @@ - + @@ -218,7 +218,7 @@ - + @@ -286,7 +286,7 @@ - + @@ -349,7 +349,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/AxisLabels.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/AxisLabels.razor index 1a9480d..9bd793d 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/AxisLabels.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/AxisLabels.razor @@ -24,7 +24,7 @@ - + @@ -136,7 +136,7 @@ - + @@ -201,7 +201,7 @@ - + @@ -283,7 +283,7 @@ - + @@ -370,7 +370,7 @@ - + @@ -438,7 +438,7 @@ - + @@ -503,7 +503,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/CategoryAxis.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/CategoryAxis.razor index 49c8626..b9f383e 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/CategoryAxis.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/CategoryAxis.razor @@ -26,7 +26,7 @@ - + @@ -89,7 +89,7 @@ - + @@ -182,7 +182,7 @@ - + @@ -247,7 +247,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/DateTimeAxis.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/DateTimeAxis.razor index 57ffc24..bc519c5 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/DateTimeAxis.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/DateTimeAxis.razor @@ -24,7 +24,7 @@ - + @@ -92,7 +92,7 @@ - + @@ -162,7 +162,7 @@ - + @@ -285,7 +285,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/LogAxis.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/LogAxis.razor index 1134a03..5091651 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/LogAxis.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/LogAxis.razor @@ -22,7 +22,7 @@ - + @@ -88,7 +88,7 @@ - + @@ -152,7 +152,7 @@ - + @@ -218,7 +218,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/NumericAxis.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/NumericAxis.razor index 1c8d470..48685ef 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/NumericAxis.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/AxisConfiguration/NumericAxis.razor @@ -24,7 +24,7 @@ - + @@ -90,7 +90,7 @@ - + @@ -171,7 +171,7 @@ - + @@ -282,7 +282,7 @@ - + @@ -349,7 +349,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/BubbleAndScatterCharts/ScatterChart.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/BubbleAndScatterCharts/ScatterChart.razor index 0430a5c..11d1ffc 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/BubbleAndScatterCharts/ScatterChart.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/BubbleAndScatterCharts/ScatterChart.razor @@ -14,7 +14,7 @@ - + @@ -47,7 +47,7 @@

Data labels display the values of data points directly on the scatter Chart. They help users quickly understand exact values without relying on tooltips and automatically adjust to avoid overlapping, improving readability in analytical and reporting views. To display data labels, add the ChartDataLabel component inside the ChartMarker and set its Visible property to true.

- + @@ -83,7 +83,7 @@

The point shape in a Blazor Scatter Chart can be customized using marker shapes such as circle, diamond, rectangle, or triangle. Custom shapes help differentiate multiple series and improve visual clarity when comparing datasets in the same Chart. You can set the shape using the Shape property in the ChartMarker.

- + @@ -161,7 +161,7 @@

The scatter series can be customized using properties like fill color and opacity. These options help visually distinguish datasets, highlight trends, and align the Chart’s appearance with the application’s theme. Customize the series by setting properties like Fill and Opacity within the ChartSeries component.

- + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Annotation.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Annotation.razor index 53a7eca..723e2aa 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Annotation.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Annotation.razor @@ -18,7 +18,7 @@ - + - + - + - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/DataLabel.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/DataLabel.razor index 1edc961..01b7199 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/DataLabel.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/DataLabel.razor @@ -18,7 +18,7 @@ - + @@ -234,7 +234,7 @@ - + @@ -355,7 +355,7 @@ - + @@ -486,7 +486,7 @@ - + @@ -592,7 +592,7 @@ - + @@ -726,7 +726,7 @@ - + @@ -930,7 +930,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Legend.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Legend.razor index de7f296..626fad9 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Legend.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Legend.razor @@ -15,7 +15,7 @@ - + @@ -105,7 +105,7 @@ - + @@ -162,7 +162,7 @@ - + @@ -220,7 +220,7 @@ - + @@ -298,7 +298,7 @@ - + @@ -367,7 +367,7 @@ - + @@ -440,7 +440,7 @@ - + @@ -504,7 +504,7 @@ - + @@ -589,7 +589,7 @@ - +
@@ -681,7 +681,7 @@ - + @@ -756,7 +756,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Marker.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Marker.razor index fd575fb..ac4afc9 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Marker.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Marker.razor @@ -17,7 +17,7 @@ - + @@ -192,7 +192,7 @@ - +
@@ -383,7 +383,7 @@ - + @@ -517,7 +517,7 @@ - + @@ -681,7 +681,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Stripline.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Stripline.razor index a6bf126..5f318fc 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Stripline.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Stripline.razor @@ -26,7 +26,7 @@ - + @@ -86,7 +86,7 @@ - + @@ -177,7 +177,7 @@ - + @@ -548,7 +548,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor index 2559728..61959e6 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor @@ -14,7 +14,7 @@ - + @@ -176,7 +176,7 @@ - + @@ -347,7 +347,7 @@ - + - + - + - + - + - + - + - + @@ -79,7 +79,7 @@ - + @@ -156,7 +156,7 @@ - + @@ -215,7 +215,7 @@ - + @@ -280,7 +280,7 @@ - + @@ -361,7 +361,7 @@ - + @@ -425,7 +425,7 @@

A grouped Bar Chart places bars next to each other for each category, making it easy to compare multiple series values directly without stacking. You can group series by using the GroupName property in ChartSeries.

- + @@ -535,7 +535,7 @@ - + @@ -582,7 +582,7 @@ - + @@ -647,7 +647,7 @@

Customizing bar spacing and width controls the gap and thickness of bars, improving readability and optimizing the visual balance of the chart layout. You can customize the bar spacing and width using the ColumnSpacing and ColumnWidth properties in ChartSeries.

- +
@@ -735,7 +735,7 @@ - +
@@ -789,7 +789,7 @@ - + @@ -870,7 +870,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ColumnAndBarCharts/ColumnChart.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ColumnAndBarCharts/ColumnChart.razor index 34bf6b0..92d71d6 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ColumnAndBarCharts/ColumnChart.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ColumnAndBarCharts/ColumnChart.razor @@ -15,7 +15,7 @@

- + @@ -59,7 +59,7 @@ - + @@ -103,7 +103,7 @@ - + @@ -133,7 +133,7 @@

- + @@ -165,7 +165,7 @@ - + @@ -199,7 +199,7 @@ - + @@ -231,7 +231,7 @@ - + @@ -265,7 +265,7 @@

- + @@ -293,7 +293,7 @@

- +
@@ -327,7 +327,7 @@

- + @@ -371,7 +371,7 @@

- + @@ -443,7 +443,7 @@

- +

@@ -471,7 +471,7 @@

- + @@ -499,7 +499,7 @@

- + @@ -528,7 +528,7 @@

- + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/Crosshair.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/Crosshair.razor index eb90160..c32af7d 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/Crosshair.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/Crosshair.razor @@ -16,7 +16,7 @@

- + @@ -77,7 +77,7 @@

- + @@ -139,7 +139,7 @@

- + @@ -201,7 +201,7 @@

- +
@@ -262,7 +262,7 @@

- + @@ -321,7 +321,7 @@

- + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/Tooltip.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/Tooltip.razor index 8a54d7e..85d55e3 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/Tooltip.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/Tooltip.razor @@ -14,7 +14,7 @@ - + @@ -76,7 +76,7 @@ - + @@ -135,7 +135,7 @@ - + @@ -214,7 +214,7 @@ - + @@ -273,7 +273,7 @@ - + @@ -328,7 +328,7 @@

- + @@ -427,7 +427,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/ZoomingAndPanning.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/ZoomingAndPanning.razor index c38c757..05aa1cd 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/ZoomingAndPanning.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/Interactivity/ZoomingAndPanning.razor @@ -16,7 +16,7 @@ - + @@ -56,7 +56,7 @@ - + @@ -95,7 +95,7 @@ - + @@ -140,7 +140,7 @@ - + @@ -190,7 +190,7 @@

- + @@ -270,7 +270,7 @@

- + @@ -323,7 +323,7 @@

- + @@ -372,7 +372,7 @@

- +
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/LineChart.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/LineChart.razor index 5eb7c86..1b12734 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/LineChart.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/LineChart.razor @@ -20,7 +20,7 @@ - + @@ -107,7 +107,7 @@ - + @@ -158,7 +158,7 @@ - + @@ -238,7 +238,7 @@ - + @@ -304,7 +304,7 @@ - + @@ -360,7 +360,7 @@ - +
@@ -432,7 +432,7 @@ - + @@ -473,7 +473,7 @@ - + @@ -537,7 +537,7 @@ - + @@ -620,7 +620,7 @@ - + @@ -680,7 +680,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/SplineChart.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/SplineChart.razor index 269156b..2029a9a 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/SplineChart.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/SplineChart.razor @@ -25,7 +25,7 @@ - + @@ -113,7 +113,7 @@ - + @@ -189,7 +189,7 @@ - + @@ -278,7 +278,7 @@ - + @@ -366,7 +366,7 @@ - + @@ -419,7 +419,7 @@ - + - + @@ -590,7 +590,7 @@ - + @@ -658,7 +658,7 @@ - + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/SteplineChart.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/SteplineChart.razor index a31cf11..b2b1bd7 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/SteplineChart.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/LineCharts/SteplineChart.razor @@ -24,7 +24,7 @@ - + @@ -89,7 +89,7 @@ - + @@ -250,7 +250,7 @@ - + - + From d70d04138e9387d64f551ae8b9e986e5448b6355 Mon Sep 17 00:00:00 2001 From: YokeshSF4393 Date: Fri, 26 Jun 2026 13:20:12 +0530 Subject: [PATCH 3/8] 1027279: Fixed console error in arrow key navigation when chart has Empty points --- src/wwwroot/scripts/chart.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/wwwroot/scripts/chart.js b/src/wwwroot/scripts/chart.js index 31852b2..967b101 100644 --- a/src/wwwroot/scripts/chart.js +++ b/src/wwwroot/scripts/chart.js @@ -1140,7 +1140,8 @@ const SfChart = (function () { let currentPoint = e.target; targetElement.removeAttribute('tabindex'); targetElement.blur(); - if (e.code === 'ArrowRight' || e.code === 'ArrowLeft') { + const seriesCollection = document.getElementById(this.element.id + 'SeriesCollection').querySelectorAll('[id*="SeriesGroup"]'); + if ((e.code === 'ArrowRight' || e.code === 'ArrowLeft') && seriesCollection.length > 1) { const seriesIndexes = []; for (let i = 0; i < groupElement.children.length; i++) { if (groupElement.children[parseInt(i.toString(), 10)].id.indexOf('SeriesGroup') > -1) { @@ -1183,7 +1184,7 @@ const SfChart = (function () { } } else { - this.currentPointIndex += e.code === 'ArrowUp' ? 1 : -1; + this.currentPointIndex += e.code === 'ArrowUp' ? 1 : (e.code === 'ArrowDown' ? -1 : 0); pointIndex = parseInt(targetId.split('_Series_')[1].replace('_Symbol', '').split('_Point_')[1], 10); currentSeries = getCurrentSeries(this, targetId, this.currentSeriesIndex); groupElement = getElement(this.element.id + (targetId.indexOf('_TrendLine_') > -1 ? 'TrendLineSeriesGroup' : 'SeriesGroup') + this.currentSeriesIndex); @@ -1273,7 +1274,7 @@ const SfChart = (function () { removeElement(this.element.id + '_Series_' + parseInt(this.seriesPathElement.id.split('_Series_')[1].split('_PointIndex_')[0], 10) + '_Point_' + parseInt(this.seriesPathElement.id.split('_Series_')[1].replace('_Symbol', '').split('_PointIndex_')[1], 10) + '_Trackball_1'); this.seriesPathElement = null; } - if (currentSeries.points[parseInt(pointIndex.toString(), 10)]) { + if (currentSeries.points[parseInt(pointIndex.toString(), 10)] && (e.code == 'ArrowUp' || e.code == 'ArrowDown') ) { this.seriesPathElement = this.userInteractionBase.svgRenderer.drawPath({ 'id': targetId, 'stroke-width': 2, From 46c7374a48c4959f4e5eb853380b8614a3ef732f Mon Sep 17 00:00:00 2001 From: YokeshSF4393 Date: Fri, 26 Jun 2026 18:13:19 +0530 Subject: [PATCH 4/8] Update chart.js --- src/wwwroot/scripts/chart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wwwroot/scripts/chart.js b/src/wwwroot/scripts/chart.js index 967b101..5d06cf1 100644 --- a/src/wwwroot/scripts/chart.js +++ b/src/wwwroot/scripts/chart.js @@ -4004,7 +4004,7 @@ export function getData(chart) { mouseY = series.y_Axis.isAxisInverse ? mouseY - markerHeight : mouseY + markerHeight; } } - if (series.visible && !sfBlazorToolkit.base.isNullOrUndefined(series.clipRect) && svgbase.withInAreaBounds(mouseX, mouseY, new svgbase.Rect(series.clipRect.x - (!series.chartIsTransposed ? series.x_Axis.plotOffset / 2 : 0), series.clipRect.y - (series.chartIsTransposed ? series.x_Axis.plotOffset / 2 : 0), series.clipRect.w, series.clipRect.h), width, height)) { + if (series.visible && (!chart.isChartKeyDown || series.index === chart.currentSeriesIndex) && !sfBlazorToolkit.base.isNullOrUndefined(series.clipRect) && svgbase.withInAreaBounds(mouseX, mouseY, new svgbase.Rect(series.clipRect.x - (!series.chartIsTransposed ? series.x_Axis.plotOffset / 2 : 0), series.clipRect.y - (series.chartIsTransposed ? series.x_Axis.plotOffset / 2 : 0), series.clipRect.w, series.clipRect.h), width, height)) { point = getRectPoint(series, series.clipRect, mouseX, mouseY, chart); } if (point) { From f82eabac826ffb84087c11865146835f1a60cc83 Mon Sep 17 00:00:00 2001 From: YokeshSF4393 Date: Tue, 30 Jun 2026 09:57:35 +0530 Subject: [PATCH 5/8] 1027279: Fixed series tooltip rendering issue on focusing trendline with keyboard. --- src/wwwroot/scripts/chart.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/wwwroot/scripts/chart.js b/src/wwwroot/scripts/chart.js index 5d06cf1..dd4e0c4 100644 --- a/src/wwwroot/scripts/chart.js +++ b/src/wwwroot/scripts/chart.js @@ -1322,9 +1322,11 @@ const SfChart = (function () { } }); } - tooltipMousemovehandler(this); + if (currentSeries.enableTooltip) { + tooltipMousemovehandler(this); + } crosshairMousemoveHandler(this); - if (this.markerExplodeBase.markerExploded) { + if (this.markerExplodeBase.markerExploded && currentSeries.marker.vS) { markerMove(this, false); } } From d06e9e8e2d45f206e09263e88a7095c9dca89826 Mon Sep 17 00:00:00 2001 From: YokeshSF4393 Date: Thu, 2 Jul 2026 15:47:35 +0530 Subject: [PATCH 6/8] 1027279: Fixed data label hiding issue in charts. --- .../Charts/ChartElements/Trendline.razor | 10 +++- .../DatalabelRenderer/DataLabelRenderer.cs | 51 +++++++++++++++++-- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor index 61959e6..36b96ab 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Trendline.razor @@ -1325,7 +1325,9 @@ Height="7" Shape="ChartShape.Circle" Fill="#7C4DFF"> - + + + @@ -1395,7 +1397,9 @@ Height=""7"" Shape=""ChartShape.Circle"" Fill=""#7C4DFF""> - + + + @code { private Theme _currentTheme = Theme.Fluent; + private bool IsDarkTheme => _currentTheme.ToString().Contains(""Dark"") || _currentTheme.ToString().Contains(""HighContrast""); + private string TextColor => IsDarkTheme ? ""#E6EEF8"" : ""#0B1F3B""; public ListDataLabelData = new () { new () { Year = ""2015"", Sales = 0.55 }, diff --git a/src/Components/Charts/Chart/Renderer/SeriesRenderers/DatalabelRenderer/DataLabelRenderer.cs b/src/Components/Charts/Chart/Renderer/SeriesRenderers/DatalabelRenderer/DataLabelRenderer.cs index 17e28db..2dfbaaf 100644 --- a/src/Components/Charts/Chart/Renderer/SeriesRenderers/DatalabelRenderer/DataLabelRenderer.cs +++ b/src/Components/Charts/Chart/Renderer/SeriesRenderers/DatalabelRenderer/DataLabelRenderer.cs @@ -327,9 +327,11 @@ private double CalculatePathActualPosition(double y, Rect rect, bool isminus, Ch bool isBottom = position == ChartLabelPosition.Bottom; ChartLabelPosition[] Test = [ChartLabelPosition.Outer, ChartLabelPosition.Top, ChartLabelPosition.Bottom, ChartLabelPosition.Middle, ChartLabelPosition.Auto]; int positionIndex = Array.IndexOf(Test, position); + string? originalFontBackground = _fontBackground; // capture "transparent" while (isOverLap && positionIndex < 4) { + _fontBackground = originalFontBackground; y_Location = CalculatePathPosition(y, rect, isminus, GetPosition(positionIndex), series, point, size, labelIndex); Rect labelRect = ChartHelper.CalculateRect(new ChartEventLocation(_locationX, y_Location), size, _margin); @@ -651,8 +653,8 @@ private void CreateDataLabelTemplate(ChartSeries series, ChartDataLabel dataLabe posY = (SeriesRenderer?.ClipRect?.Y ?? 0) + rect.Y; string left = Convert.ToString(posX, _culture) + "px"; string top = Convert.ToString(posY, _culture) + "px"; - Color rgbValue = Color.FromName(_fontBackground ?? string.Empty); - string color = string.IsNullOrEmpty(dataLabel.Font.Color) ? dataLabel.Font.Color : (Math.Round(Convert.ToDouble(((rgbValue.R * 299) + (rgbValue.G * 587) + (rgbValue.B * 114)) / 1000, _culture), 1) >= 128 ? "black" : "white"); + double templateContrast = CalculateLuminanceContrast(_fontBackground ?? string.Empty); + string color = string.IsNullOrEmpty(dataLabel.Font.Color) ? dataLabel.Font.Color : (templateContrast >= 128 ? "black" : "white"); bool isAnimation = ((series.Animation.Enable && SyncfusionService?._options.Animation == GlobalAnimationMode.Default) || (SyncfusionService?._options.Animation == GlobalAnimationMode.Enable)) && Owner is not null && Owner._shouldAnimateSeries; string visibility = !(pointTemplateSize.Count > 0) ? "hidden" : isAnimation ? "hidden" : "visible"; string id; @@ -1208,7 +1210,8 @@ private void RenderFinalTextLabel(Point point, int pointIndex, int labelIndex, R } /// - /// Calculates the luminance contrast ratio for a background color. + /// Calculates the luminance contrast ratio for a background color, accounting for + /// semi-transparent (rgba) colors by blending them with the chart background. /// /// The background color as a string (name, hex, or rgb). /// @@ -1217,10 +1220,50 @@ private void RenderFinalTextLabel(Point point, int pointIndex, int labelIndex, R /// private double CalculateLuminanceContrast(string backgroundColor) { - Color rgbValue = ChartHelper.GetRBGValue(backgroundColor); + string effectiveColor = GetEffectiveBackgroundColor(backgroundColor); + Color rgbValue = ChartHelper.GetRBGValue(effectiveColor); return Math.Round(Convert.ToDouble(((rgbValue.R * 299) + (rgbValue.G * 587) + (rgbValue.B * 114)) / 1000, _culture), 1); } + /// + /// Returns the effective opaque color for a background, blending semi-transparent + /// (rgba with alpha < 1) colors with the chart background to produce the actual + /// visible color the text will be rendered over. + /// + /// The background color string, possibly rgba. + /// + /// A hex color string representing the effective opaque color; non-rgba values are returned unchanged. + /// + private string GetEffectiveBackgroundColor(string backgroundColor) + { + if (string.IsNullOrEmpty(backgroundColor) || !backgroundColor.StartsWith("rgba", StringComparison.InvariantCulture)) + { + return backgroundColor ?? string.Empty; + } + + int left = backgroundColor.IndexOf('(', StringComparison.InvariantCulture); + int right = backgroundColor.IndexOf(')', StringComparison.InvariantCulture); + if (left < 0 || right < 0) + { + return backgroundColor; + } + + string[] parts = backgroundColor.Substring(left + 1, right - left - 1).Split(','); + if (parts.Length < 4 || !double.TryParse(parts[3].Trim(), NumberStyles.Float, CultureInfo.InvariantCulture, out double alpha) || alpha >= 1.0) + { + return backgroundColor; + } + + Color chartBg = ChartHelper.GetRBGValue(_chartBackground ?? "white"); + int r = int.Parse(parts[0], CultureInfo.InvariantCulture); + int g = int.Parse(parts[1], CultureInfo.InvariantCulture); + int b = int.Parse(parts[2], CultureInfo.InvariantCulture); + int effectiveR = (int)Math.Round((r * alpha) + (chartBg.R * (1 - alpha)), MidpointRounding.AwayFromZero); + int effectiveG = (int)Math.Round((g * alpha) + (chartBg.G * (1 - alpha)), MidpointRounding.AwayFromZero); + int effectiveB = (int)Math.Round((b * alpha) + (chartBg.B * (1 - alpha)), MidpointRounding.AwayFromZero); + return $"#{effectiveR:x2}{effectiveG:x2}{effectiveB:x2}"; + } + /// /// Calculates the final position and rotation parameters for a data label. /// From 45d7ff5f1c30a13297c1dddcb7a54844d5e0b1b6 Mon Sep 17 00:00:00 2001 From: YokeshSF4393 Date: Mon, 6 Jul 2026 19:22:35 +0530 Subject: [PATCH 7/8] 1027279: Fixed mobile detection issue and testing portal issue. --- .../Layout/MainLayout.razor | 40 ++++++++++++++++++- .../Layout/NavMenu.razor | 2 +- .../Charts/ChartElements/Legend.razor | 12 +++++- .../wwwroot/device.js | 3 ++ .../Components/App.razor | 1 + samples/Blazor.Toolkit.Samples/Program.cs | 3 +- 6 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 samples/Blazor.Toolkit.Samples.Client/wwwroot/device.js diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor b/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor index 7873fec..cc97438 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor @@ -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 @@ -160,8 +162,10 @@
- - @Body + + + @Body +
@@ -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("isDevice"); + UpdateDeviceMode(isDevice); + } + catch { } + try { var currentTheme = await JS.InvokeAsync("mainLayout.initTheme"); @@ -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 diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor index 17ff2db..9e21ad5 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor @@ -292,7 +292,7 @@ Selection and Highlight
  • - Animation + Animation
    • diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Legend.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Legend.razor index 626fad9..4882f48 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Legend.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/ChartElements/Legend.razor @@ -1,6 +1,8 @@ @page "/charts/legend" @using Syncfusion.Blazor.Toolkit.Charts @using ValueType = Syncfusion.Blazor.Toolkit.ValueType +@using Blazor.Toolkit.Samples.Client.Services +@inject SampleService SampleService Blazor Chart Legend Demo | Syncfusion Toolkit @@ -279,7 +281,7 @@ + Location="@LegendLocation">     @@ -801,13 +803,19 @@ [CascadingParameter] private Theme CurrentTheme { get; set; } = Theme.Fluent; + [CascadingParameter] + public bool IsDevice { get; set; } + private Theme _currentTheme = Theme.Fluent; private string _prevThemeName = string.Empty; + private ChartLocation LegendLocation; + protected override void OnInitialized() { _currentTheme = CurrentTheme; + LegendLocation = IsDevice ? new ChartLocation { X = 80, Y = 80} : new ChartLocation { X = 400, Y = 80}; } protected override void OnParametersSet() @@ -823,6 +831,8 @@ { _currentTheme = CurrentTheme; } + // Update legend location when IsDevice changes + LegendLocation = IsDevice ? new ChartLocation { X = 80, Y = 80} : new ChartLocation { X = 400, Y = 80}; } private bool IsDarkTheme => CurrentTheme.ToString().Contains("Dark") || CurrentTheme.ToString().Contains("HighContrast"); diff --git a/samples/Blazor.Toolkit.Samples.Client/wwwroot/device.js b/samples/Blazor.Toolkit.Samples.Client/wwwroot/device.js new file mode 100644 index 0000000..1d88483 --- /dev/null +++ b/samples/Blazor.Toolkit.Samples.Client/wwwroot/device.js @@ -0,0 +1,3 @@ +window.isDevice = function() { + return document.body.offsetWidth <= 640; +}; diff --git a/samples/Blazor.Toolkit.Samples/Components/App.razor b/samples/Blazor.Toolkit.Samples/Components/App.razor index 2fc7909..c1f36b2 100644 --- a/samples/Blazor.Toolkit.Samples/Components/App.razor +++ b/samples/Blazor.Toolkit.Samples/Components/App.razor @@ -57,6 +57,7 @@ + diff --git a/samples/Blazor.Toolkit.Samples/Program.cs b/samples/Blazor.Toolkit.Samples/Program.cs index 9ec58ab..de9dcb5 100644 --- a/samples/Blazor.Toolkit.Samples/Program.cs +++ b/samples/Blazor.Toolkit.Samples/Program.cs @@ -1,10 +1,10 @@ +using System.Globalization; using Blazor.Toolkit.Samples.Client.Services; using Blazor.Toolkit.Samples.Components; using Microsoft.AspNetCore.Localization; using Microsoft.Extensions.Localization; using Syncfusion.Blazor.Toolkit; using Syncfusion.Blazor.Toolkit.Popups; -using System.Globalization; var builder = WebApplication.CreateBuilder(args); @@ -26,6 +26,7 @@ }); builder.Services.AddScoped(); +builder.Services.AddScoped(); // Register RenderModeService for components that need to switch render mode builder.Services.AddScoped(); // Make HttpContext available to components during server prerender From 7be0c2f2426d0fd74dd671a116e4bab889328b7c Mon Sep 17 00:00:00 2001 From: YokeshSF4393 Date: Mon, 13 Jul 2026 12:19:00 +0530 Subject: [PATCH 8/8] 1027279: Fixed page auto scroll issue in charts. --- .../SeriesTypeRenderers/BarSeriesRenderer.cs | 2 +- .../ColumnSeriesRenderer.cs | 2 +- .../StackingBarSeriesRenderer.cs | 2 +- .../StackingColumnSeriesRenderer.cs | 2 +- .../Charts/Common/ChartUtils/ChartHelper.cs | 53 +++++++++++++++++-- 5 files changed, 53 insertions(+), 8 deletions(-) diff --git a/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/BarSeriesRenderer.cs b/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/BarSeriesRenderer.cs index a5ae0a3..baa6c38 100644 --- a/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/BarSeriesRenderer.cs +++ b/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/BarSeriesRenderer.cs @@ -53,7 +53,7 @@ private void ProcessPoint(int index, DoubleRange sideBySideInfo, double origin, Point previousPoint = index - 1 > -1 ? Points[index - 1] : null!; Point nextPoint = index + 1 < Points.Count ? Points[index + 1] : null!; - if (pointBar.Visible && ChartHelper.WithInRange(previousPoint, pointBar, nextPoint, XAxisRenderer)) + if (pointBar.Visible && ChartHelper.WithInRange(previousPoint, pointBar, nextPoint, XAxisRenderer) && ChartHelper.IsCurrentPointWithinVisibleRange(pointBar, XAxisRenderer)) { Rect rect = GetRectangle(pointBar.XValue + sideBySideInfo.Start, pointBar.YValue, pointBar.XValue + sideBySideInfo.End, origin); rect = GetColumnWidthInPixelRect(rect); diff --git a/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/ColumnSeriesRenderer.cs b/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/ColumnSeriesRenderer.cs index cc7f4b3..0ed5784 100644 --- a/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/ColumnSeriesRenderer.cs +++ b/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/ColumnSeriesRenderer.cs @@ -35,7 +35,7 @@ private void CalculateColumnPathOption() Point previousPoint = i - 1 > -1 ? Points?[i - 1] ?? null! : null!; Point nextPoint = i + 1 < Points?.Count ? Points[i + 1] : null!; - if (point.Visible && ChartHelper.WithInRange(previousPoint, point, nextPoint, XAxisRenderer)) + if (point.Visible && ChartHelper.WithInRange(previousPoint, point, nextPoint, XAxisRenderer) && ChartHelper.IsCurrentPointWithinVisibleRange(point, XAxisRenderer)) { Rect rect = GetRectangle(point.XValue + sideBySideInfo.Start, point.YValue, point.XValue + sideBySideInfo.End, origin); if (rect is not null && rect.Width < 1) diff --git a/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/StackingBarSeriesRenderer.cs b/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/StackingBarSeriesRenderer.cs index dbd829d..601ac1e 100644 --- a/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/StackingBarSeriesRenderer.cs +++ b/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/StackingBarSeriesRenderer.cs @@ -123,7 +123,7 @@ internal void CalculateColumnPathOption() Point previousPoint = pointColumn.Index - 1 > -1 ? Points?[pointColumn.Index - 1] ?? null! : null!; Point nextPoint = pointColumn.Index + 1 < Points?.Count ? Points[pointColumn.Index + 1] : null!; - if (pointColumn.Visible && ChartHelper.WithInRange(previousPoint, pointColumn, nextPoint, Series?.Renderer.XAxisRenderer ?? null!) && Series?.Renderer.StackedValues is not null) + if (pointColumn.Visible && ChartHelper.WithInRange(previousPoint, pointColumn, nextPoint, Series?.Renderer.XAxisRenderer ?? null!) && ChartHelper.IsCurrentPointWithinVisibleRange(pointColumn, Series?.Renderer.XAxisRenderer ?? null!) && Series?.Renderer.StackedValues is not null) { double startValue = GetStackingStartValue(pointColumn.Index, GetVisibleSeriesIndex()); Rect rect = GetRectangle(pointColumn.XValue + sideBySideInfo.Start, (!Series.Visible && Series._isLegendClicked) ? startValue : Series.Renderer.StackedValues.EndValues[pointColumn.Index], pointColumn.XValue + sideBySideInfo.End, (!Series.Visible && Series._isLegendClicked) ? startValue : Series.Renderer.StackedValues.StartValues[pointColumn.Index]); diff --git a/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/StackingColumnSeriesRenderer.cs b/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/StackingColumnSeriesRenderer.cs index 89256fc..3d0705b 100644 --- a/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/StackingColumnSeriesRenderer.cs +++ b/src/Components/Charts/Chart/Renderer/SeriesRenderers/SeriesTypeRenderers/StackingColumnSeriesRenderer.cs @@ -120,7 +120,7 @@ internal void CalculateColumnPathOption() Point previousPoint = pointColumn.Index - 1 > -1 ? Points?[pointColumn.Index - 1] ?? null! : null!; Point nextPoint = pointColumn.Index + 1 < Points?.Count ? Points[pointColumn.Index + 1] : null!; - if (pointColumn.Visible && ChartHelper.WithInRange(previousPoint, pointColumn, nextPoint ?? null!, Series?.Renderer.XAxisRenderer ?? null!) && Series?.Renderer.StackedValues is not null) + if (pointColumn.Visible && ChartHelper.WithInRange(previousPoint, pointColumn, nextPoint ?? null!, Series?.Renderer.XAxisRenderer ?? null!) && ChartHelper.IsCurrentPointWithinVisibleRange(pointColumn, Series?.Renderer.XAxisRenderer ?? null!) && Series?.Renderer.StackedValues is not null) { double startValue = GetStackingStartValue(pointColumn.Index, GetVisibleSeriesIndex()); Rect rect = GetRectangle(pointColumn.XValue + sideBySideInfo.Start, (!Series.Visible && Series._isLegendClicked) ? startValue : Series.Renderer.StackedValues.EndValues[pointColumn.Index], pointColumn.XValue + sideBySideInfo.End, (!Series.Visible && Series._isLegendClicked) ? startValue : Series.Renderer.StackedValues.StartValues[pointColumn.Index]); diff --git a/src/Components/Charts/Common/ChartUtils/ChartHelper.cs b/src/Components/Charts/Common/ChartUtils/ChartHelper.cs index 7135fa0..9f099ed 100644 --- a/src/Components/Charts/Common/ChartUtils/ChartHelper.cs +++ b/src/Components/Charts/Common/ChartUtils/ChartHelper.cs @@ -1,12 +1,12 @@ +using System.Collections.ObjectModel; +using System.Drawing; using System.Dynamic; +using System.Globalization; using System.Text.Json; using System.Text.RegularExpressions; -using Microsoft.AspNetCore.Components.Rendering; -using System.Drawing; -using System.Globalization; using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Rendering; using Syncfusion.Blazor.Toolkit.Internal; -using System.Collections.ObjectModel; namespace Syncfusion.Blazor.Toolkit.Charts.Internal { @@ -1002,6 +1002,51 @@ internal static bool WithInRange(Point previousPoint, Point currentPoint, Point || (nextX >= xStart && nextX <= xEnd) || (xStart >= previousX && xStart <= nextX); } + /// + /// Determines whether the supplied point's own X value lies within the visible range of the X-axis. + /// + /// + /// Unlike , which returns true when any + /// of the previous / current / next points is in range (correct for line/area edge interpolation), this + /// helper returns true only when the current point's own X value is within the visible axis range. + /// It is used by the column-family renderers (Column, Bar, StackingColumn, StackingBar) to avoid emitting + /// SVG path elements for off-range points whose column would otherwise clip outside the visible chart area + /// when Minimum/Maximum are configured. + /// + /// When the user has explicitly set and + /// (a fixed range — see ), the range padding logic still + /// expands outward by the between-ticks padding so that the + /// first/last visible categories are rendered with their full column width. That padding would otherwise + /// cause adjacent off-range points (e.g. the category just below Minimum or just above Maximum) to pass an + /// in-range check based on alone. To keep the DOM clean, when + /// the axis is a fixed range this helper checks against the user-configured Minimum/Maximum instead of the + /// padded visible range, so columns strictly outside [Minimum, Maximum] are never rendered. + /// + /// + /// The point whose own X value is being tested. + /// The X-axis renderer containing visible range information. + /// true only when the current point's own X value falls within the visible axis range; otherwise, false. + internal static bool IsCurrentPointWithinVisibleRange(Point currentPoint, ChartAxisRenderer xAxis) + { + double currentX = xAxis.GetPointValue(currentPoint.XValue); + double xStart, xEnd; + + if (xAxis.IsFixedRange()) + { + // The user has explicitly restricted the visible categories via Minimum/Maximum. Use those exact + // bounds (not the padded VisibleRange) so off-range adjacent points stay out of the DOM. + xStart = Math.Floor(Convert.ToDouble(xAxis.Axis?.Minimum, null)); + xEnd = Math.Ceiling(Convert.ToDouble(xAxis.Axis?.Maximum, null)); + } + else + { + xStart = Math.Floor(xAxis.VisibleRange.Start); + xEnd = Math.Ceiling(xAxis.VisibleRange.End); + } + + return currentX >= xStart && currentX <= xEnd; + } + /// /// Appends path animation elements to the chart's animation collection. ///