starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-07-08 18:16:08 +00:00
Code Issues 1.3k Packages Projects Releases 28 Wiki Activity

Fix clipped chart tooltip at the chart edge and make tooltip placement RTL-aware

Browse Source
This commit is contained in:
yordanov
2026-07-08 16:52:52 +03:00
parent 609622692e
commit fd643aea50
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Radzen.Blazor/RadzenChart.razor.cs
View File

@@ -2257,6 +2257,7 @@ namespace Radzen.Blazor
} }
const double estTooltipHeight = 64; const double estTooltipHeight = 64;
const double estTooltipWidth = 220;
const double gap = 10; const double gap = 10;
const double minVerticalGap = 6; const double minVerticalGap = 6;
var topLimit = MarginTop; var topLimit = MarginTop;
@@ -2271,7 +2272,9 @@ namespace Radzen.Blazor
// entry.Point is in plot-local coords. Convert to chart-relative by adding margins. // entry.Point is in plot-local coords. Convert to chart-relative by adding margins.
var anchorX = entry.Point.X + MarginLeft; var anchorX = entry.Point.X + MarginLeft;
var anchorY = entry.Point.Y + MarginTop; var anchorY = entry.Point.Y + MarginTop;
var rightSide = anchorX + gap + 180 <= MarginLeft + plotWidth; var fitsRight = anchorX + gap + estTooltipWidth <= MarginLeft + plotWidth;
var fitsLeft = anchorX - gap - estTooltipWidth >= MarginLeft;
var rightSide = IsRTL ? !fitsLeft : fitsRight;
placements.Add((entry.Series, entry.Data, anchorX, anchorY, rightSide)); placements.Add((entry.Series, entry.Data, anchorX, anchorY, rightSide));
} }
@@ -2361,7 +2364,7 @@ namespace Radzen.Blazor
var borderSide = p.RightSide ? "border-left" : "border-right"; var borderSide = p.RightSide ? "border-left" : "border-right";
builder.OpenElement(seq++, "div"); builder.OpenElement(seq++, "div");
builder.AddAttribute(seq++, "class", "rz-chart-split-tooltip-item"); builder.AddAttribute(seq++, "class", $"rz-chart-split-tooltip-item{(p.RightSide ? "" : " rz-chart-tooltip-left")}");
builder.AddAttribute(seq++, "style", builder.AddAttribute(seq++, "style",
$"position: absolute; top: {ty.ToInvariantString()}px; {positionStyle} " + $"position: absolute; top: {ty.ToInvariantString()}px; {positionStyle} " +
$"{borderSide}: 3px solid {p.Series.Color}; pointer-events: none;"); $"{borderSide}: 3px solid {p.Series.Color}; pointer-events: none;");
@@ -2380,10 +2383,13 @@ namespace Radzen.Blazor
{ {
const double gap = 10; const double gap = 10;
const double estTooltipHeight = 64; const double estTooltipHeight = 64;
const double estTooltipWidth = 220;
var anchorX = anchor.X + MarginLeft; var anchorX = anchor.X + MarginLeft;
var anchorY = anchor.Y + MarginTop; var anchorY = anchor.Y + MarginTop;
var rightSide = anchorX + gap + 180 <= MarginLeft + plotWidth; var fitsRight = anchorX + gap + estTooltipWidth <= MarginLeft + plotWidth;
var fitsLeft = anchorX - gap - estTooltipWidth >= MarginLeft;
var rightSide = IsRTL ? !fitsLeft : fitsRight;
var top = Math.Max(MarginTop, Math.Min(MarginTop + plotHeight - estTooltipHeight, anchorY - estTooltipHeight / 2)); var top = Math.Max(MarginTop, Math.Min(MarginTop + plotHeight - estTooltipHeight, anchorY - estTooltipHeight / 2));
string positionStyle; string positionStyle;
@@ -2404,7 +2410,7 @@ namespace Radzen.Blazor
builder.AddAttribute(2, "style", "position: absolute; inset: 0; pointer-events: none; overflow: hidden;"); builder.AddAttribute(2, "style", "position: absolute; inset: 0; pointer-events: none; overflow: hidden;");
builder.OpenElement(3, "div"); builder.OpenElement(3, "div");
builder.AddAttribute(4, "class", $"rz-chart-category-tooltip{(entering ? " rz-chart-tooltip-appear" : "")}"); builder.AddAttribute(4, "class", $"rz-chart-category-tooltip{(rightSide ? "" : " rz-chart-tooltip-left")}{(entering ? " rz-chart-tooltip-appear" : "")}");
builder.AddAttribute(5, "style", builder.AddAttribute(5, "style",
$"position: absolute; top: {top.ToInvariantString()}px; {positionStyle} " + $"position: absolute; top: {top.ToInvariantString()}px; {positionStyle} " +
$"{borderSide}: 3px solid {series.Color}; pointer-events: none;"); $"{borderSide}: 3px solid {series.Color}; pointer-events: none;");

5
Radzen.Blazor/themes/components/blazor/_chart.scss
View File

@@ -641,6 +641,11 @@ $chart-color-schemes: (
pointer-events: none; pointer-events: none;
} }
.rz-chart-tooltip-left .rz-chart-tooltip {
left: auto;
right: 0;
}
.rz-top-chart-tooltip { .rz-top-chart-tooltip {
transform: translate(-50%, -100%); transform: translate(-50%, -100%);
} }