apexcharts / Blazor-ApexCharts

A blazor wrapper for ApexCharts.js
https://apexcharts.github.io/Blazor-ApexCharts
MIT License
788 stars 91 forks source link

Custom ToolTip add markers on area chart #498

Closed aharwood2 closed 1 week ago

aharwood2 commented 1 month ago

I'm currently building a chart with a stacked area and a unstacked line. Due to it not being possible to stack and area chart and add an unstacked line, I've had to make the area series unstacked and manually compute the offsets in their Y values to make it look correct. However, now the values are incorrect in the tooltips so I'm trying to add custom tooltips. Using default tooltips I get this:

image

When I add my custom tooltip into the chart component...

<ApexPointTooltip>
    <div class="m-2">
        @{
            var point = context.DataPoint;
            <div class="m-0 p-3">
                <RadzenText TextStyle="TextStyle.Subtitle1"
                            Text="@DateTimeOffset.FromUnixTimeMilliseconds(point.Items.FirstOrDefault()?.WeekStart.ToUnixTimeMilliseconds() ?? 0).ToString("dd MMM yyyy")" />
                @if (showFinishedAsSeparate)
                {
                    <RadzenText Text="@($"Finished Unmet: {point.Items.FirstOrDefault()?.FinishedMetDemand.ToString("F2")} FTE")" />
                }
                <RadzenText Text="@($"Cancelled: {point.Items.FirstOrDefault()?.CancelledDemand.ToString("F2")} FTE")" />
                <RadzenText Text="@($"Unconfirmed Unmet: {point.Items.FirstOrDefault()?.UnconfirmedUnmetDemandFTE.ToString("F2")} FTE")" />
                <RadzenText Text="@($"Unconfirmed Met: {point.Items.FirstOrDefault()?.UnconfirmedMetDemandFTE.ToString("F2")} FTE")" />
                <RadzenText Text="@($"Confirmed Unmet: {point.Items.FirstOrDefault()?.ConfirmedUnmetDemandFTE.ToString("F2")} FTE")" />
                <RadzenText Text="@($"Confirmed Met: {point.Items.FirstOrDefault()?.ConfirmedMetDemandFTE.ToString("F2")} FTE")" />
                @if (showFinishedAsSeparate)
                {
                    <RadzenText Text="@($"Finished Met: {point.Items.FirstOrDefault()?.FinishedUnmetDemand.ToString("F2")} FTE")" />
                }
                <RadzenText Text="@($"RSE Availalble: {point.Items.FirstOrDefault()?.ProjectFTE.ToString("F2")} FTE")" />
            </div>
        }
    </div>
</ApexPointTooltip>

...the chart now renders with markers and looks awful but the values are now correct:

image

I have the following set in the chart options object which appears to do nothing:

Markers = new Markers
{
    Size = 0
},
Tooltip = new ApexCharts.Tooltip
{
    Marker = new TooltipMarker
    {
        Show = false
    }
}

Is this desired behaviour or a bug? If desired, how can the default behaviour be achieved?

joadan commented 2 weeks ago

Hi,

I'm sorry but for the dotnet tooltip we are required to add the markers we need it to trigger the tooltip. I will update the documentation to make this clear.

If this is not acceptable then the solution is to use the javascript tooltip.