ant-design-charts-blazor icon indicating copy to clipboard operation
ant-design-charts-blazor copied to clipboard

Tooltip not shown on Line chart with single entry

Open magierska opened this issue 5 months ago • 0 comments

We use Line chart to visualize multiple series. If any of the series contains only 1 entry, it is shown on the chart as a very small rectangle, but hovering over it doesn't triggers the tooltip:

https://github.com/user-attachments/assets/e0671b38-6cc7-4006-b164-630093746023

As soon as series contains 2 entries (that are reasonably far from each other), the tooltip is shown:

https://github.com/user-attachments/assets/fc80fe67-c170-43a6-814d-4ed201d95e2e

Seems like the tooltip is only shown when we hover "inside" the line, and a single point is too small to have an inside that is hoverable.

We cannot consider converting our Line chart to Scatter chart in case of 1 entry, because as said above we use multiple series, and some of those might contain more than 1 entry.

Our setup:

    <Line @ref=_chart Config=_config JsConfig="@_jsConfig"/>

    private LineConfig _config = new LineConfig
    {
        AutoFit = true,
        XField = "x",
        YField = "y",
        SeriesField = "seriesName",
        XAxis = new ValueCatTimeAxis
        {
            Type = "time",
            Nice = false,
            Mask = $"{CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern.ToUpperInvariant()} {CultureInfo.CurrentCulture.DateTimeFormat.ShortTimePattern}",
        },
        YAxis = new ValueAxis
        {
            Title = new BaseAxisTitle(),
            Grid = new BaseAxisGrid
            {
                Visible = true,
                Line = new BaseAxisGridLine
                {
                    Style = new LineStyle
                    {
                        Stroke = "#F1F5F9"
                    }
                }
            }
        },
        Legend = new Legend
        {
            Visible = false
        },
    };

    private string _jsConfig = @"{ ""tooltip"": { ""domStyles"": { 'g2-tooltip': { 'background-color': 'rgb(255, 255, 255)', 'padding-bottom' : '0.5rem', 'padding-top':'0.5rem' , 'padding-left':'1rem' , 'padding-right':'1rem', 'box-shadow':'0 4px 6px -1px rgb(0 0 0 / 0.1)' , 'border':'1px solid #e2e8f0', 'opacity':'1', 'border-radius':'0.25rem' , 'font-family': 'Mulish', 'z-index':'40' , 'color':'#000000' , '-webkit-font-smoothing' : 'antialiased' , '-moz-osx-font-smoothing' : 'grayscale'}, } } }";

Nuget package version: 0.5.5

magierska avatar Sep 25 '24 09:09 magierska