ant-design-charts-blazor
ant-design-charts-blazor copied to clipboard
Tooltip not shown on Line chart with single entry
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