Tooltips don't show on Charts

Radzen.Blazor Components
1

I have the following razor in my project and can't get tooltips to show. I've already tried a lot of things but just doesn't work.

@page "/charginghours"
@inherits PageBase
@using SessyController.Services.Items

@if (HourlyPrices != null && HourlyPrices.Count() != 0)
{
	<div style="overflow-x: auto; width: 100%; overflow-y: auto; height:100%;">
		<RadzenChart Style="min-height: 4000px; min-width: 600px;">
			<RadzenChartTooltipOptions Shared="false" Visible="true" />
			<RadzenBarSeries Data="@HourlyPrices" CategoryProperty="Time" Title="Price" LineType="LineType.Dashed" ValueProperty="Price">
				<RadzenSeriesDataLabels Visible="true" />
			</RadzenBarSeries>
			<RadzenBarSeries Data="@HourlyPrices" CategoryProperty="Time" Title="Charging" ValueProperty="VisualizeInChart">
				<RadzenMarkers Visible="true" MarkerType="MarkerType.Circle" />
				<RadzenSeriesDataLabels Visible="false" />
			</RadzenBarSeries>
			<RadzenCategoryAxis Padding="20" Formatter="@FormatAsDayHour">
				<RadzenGridLines Visible="true" />
				<RadzenAxisTitle Text="Time" />
			</RadzenCategoryAxis>
			<RadzenValueAxis Formatter="@FormatAsPrice">
				<RadzenGridLines Visible="true" />
				<RadzenAxisTitle Text="Price" />
			</RadzenValueAxis>
			<RadzenBarOptions Radius="5" />
		</RadzenChart>
	</div>
}
else
{
	<div>
		No prices yet, just a moment .....
	</div>
}

In program.cs

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>();

In _host.cshtml

@page "/"
@namespace SessyWeb.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
	Layout = "_Layout";
}

<head>
	<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">

	@*  <link rel="stylesheet" href="_content/Radzen.Blazor/css/dark-base.css">
 *@
	<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</head>

<component type="typeof(App)" render-mode="ServerPrerendered" />

In _imports.razor

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using SessyWeb
@using SessyWeb.Shared
@using Radzen
@using Radzen.Blazor
2

Check this thread: RadzenSeriesValueLine tooltip - #2 by korchev

3

Thanks for the quick response.

No doesn't work:

InvalidOperationException: Object of type 'Radzen.Blazor.RadzenDialog' does not have a property matching the name '@rendermode'.

Added RadzenChartTooltip to the mainlayout and now it's working.

@inherits LayoutComponentBase

<RadzenTooltip />
<RadzenChartTooltip />

<PageTitle>SessyWeb</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>
4

Follow the instructions for your target framework.