Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip not shown on Line chart with single entry #149

Open
magierska opened this issue Sep 25, 2024 · 0 comments
Open

Tooltip not shown on Line chart with single entry #149

magierska opened this issue Sep 25, 2024 · 0 comments

Comments

@magierska
Copy link

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:

Recording.2024-09-25.113357.mp4

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

Recording.2024-09-25.113523.mp4

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant