LineChart Tooltip near to the browser end doesn't work #492

Open
opened 2026-01-29 17:38:14 +00:00 by claunia · 0 comments
Owner

Originally created by @frankleib on GitHub (Aug 1, 2022).

If I have a LineChart and a tooltips is shown in the near of the left end of the display/browser, it will only show a part of the tooltip, the rest is cut by the end of the screen

<RadzenChart @ref="chart0">
        @foreach(var item in delevererEKDatas!)
        {
            string tile = item.LineName;
                string color = getRandomColor(item.MainDeliverer);
                <RadzenLineSeries Stroke="@color" Smooth="@smooth" Data="@item.EKData" CategoryProperty="Date" Title=@tile LineType="LineType.Solid" ValueProperty="Price">
                    <ChildContent>
                        <RadzenMarkers MarkerType="MarkerType.Auto" Stroke="@color" />
                    </ChildContent>
                    <TooltipTemplate Context="data">
                    <div>
                        @data.DelInfo<br/>
                        <strong>@data.Date.ToString("dddd, dd MMMM yyyy")</strong><br/>
                        <strong>EK-Preis: @data.Price.ToString("N2")</strong><br/>
                        ab Menge @data.MinQuantity.ToString("N0")<br/>
                            @if (@data.AvailableQuantity is not null) 
                            { 
                                <span>verfügbare Menge: @data.AvailableQuantity</span>
                            }
                    </div>
                    </TooltipTemplate>
                </RadzenLineSeries>
            }
    
        <RadzenCategoryAxis  Padding="20" Min="@searchArticleDateDeliverer.StartDate" Max="@searchArticleDateDeliverer.EndDate" Step="31" FormatString="{0:dd.MM.yy}" />
        <RadzenValueAxis Formatter="@FormatAsEURO">
            <RadzenGridLines Visible="true" />
        </RadzenValueAxis>
        @if(delevererEKDatas.Count == 1)
        {
                <RadzenLegend Position="LegendPosition.Bottom" Visible="false" />
        }
        else if(delevererEKDatas.Count > 4)
        {
            <RadzenLegend Position="LegendPosition.Right" Visible="true" />
        }
        else
        {
            <RadzenLegend Position="LegendPosition.Bottom" Visible="true" />
        }
    </RadzenChart> 
Originally created by @frankleib on GitHub (Aug 1, 2022). If I have a LineChart and a tooltips is shown in the near of the left end of the display/browser, it will only show a part of the tooltip, the rest is cut by the end of the screen ``` <RadzenChart @ref="chart0"> @foreach(var item in delevererEKDatas!) { string tile = item.LineName; string color = getRandomColor(item.MainDeliverer); <RadzenLineSeries Stroke="@color" Smooth="@smooth" Data="@item.EKData" CategoryProperty="Date" Title=@tile LineType="LineType.Solid" ValueProperty="Price"> <ChildContent> <RadzenMarkers MarkerType="MarkerType.Auto" Stroke="@color" /> </ChildContent> <TooltipTemplate Context="data"> <div> @data.DelInfo<br/> <strong>@data.Date.ToString("dddd, dd MMMM yyyy")</strong><br/> <strong>EK-Preis: @data.Price.ToString("N2")</strong><br/> ab Menge @data.MinQuantity.ToString("N0")<br/> @if (@data.AvailableQuantity is not null) { <span>verfügbare Menge: @data.AvailableQuantity</span> } </div> </TooltipTemplate> </RadzenLineSeries> } <RadzenCategoryAxis Padding="20" Min="@searchArticleDateDeliverer.StartDate" Max="@searchArticleDateDeliverer.EndDate" Step="31" FormatString="{0:dd.MM.yy}" /> <RadzenValueAxis Formatter="@FormatAsEURO"> <RadzenGridLines Visible="true" /> </RadzenValueAxis> @if(delevererEKDatas.Count == 1) { <RadzenLegend Position="LegendPosition.Bottom" Visible="false" /> } else if(delevererEKDatas.Count > 4) { <RadzenLegend Position="LegendPosition.Right" Visible="true" /> } else { <RadzenLegend Position="LegendPosition.Bottom" Visible="true" /> } </RadzenChart> ```
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#492