Series label tooltip

1 Answer 154 Views
Charts
Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
Ilan asked on 23 Mar 2023, 08:46 AM

When Y is 0 there's no place to hover in order to get the current tooltip.

Is there a way to add a tooltip when hovering on charts category series label as well?


 

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 28 Mar 2023, 06:44 AM | edited on 28 Mar 2023, 07:16 AM

The Chart series tooltip requires a non-zero value and a visible data point to display. Otherwise there is nothing to hover, as you correctly say.

Why do you need a tooltip for a missing / zero value? Isn't the situation intuitive and clear for your users? If needed, I can suggest adding some note outside the Chart that provides additional information.

If you really must provide a tooltip in the Chart, then the only option is to render a fake data point and use a Chart tooltip template to provide the correct information to the user:

<TelerikChart Height="480px" Width="640px">

    <ChartSeriesItems>
        <ChartTooltip Visible="true">
            <Template>
                @{ var dataItem = (StockDataPoint)context.DataItem; }

                @if (dataItem.EmptyPoint)
                {
                    <text> zero value here </text>
                }
                else
                {
                <div>
                    Open: @dataItem.Open.ToString("c2") <br />
                    Close: @dataItem.Close.ToString("c2") <br />
                    High: @dataItem.High.ToString("c2") <br />
                    Low: @dataItem.Low.ToString("c2") <br />
                    Volume: @dataItem.Volume.ToString("c2") <br />
                </div>
                }
            </Template>
        </ChartTooltip>
        <ChartSeries Type="@ChartSeriesType.Candlestick"
                     Name="Product 1"
                     Data="@ChartProduct1Data"
                     CategoryField="@(nameof(StockDataPoint.Date))"
                     OpenField="@nameof(StockDataPoint.Open)"
                     CloseField="@nameof(StockDataPoint.Close)"
                     HighField="@nameof(StockDataPoint.High)"
                     LowField="@nameof(StockDataPoint.Low)">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Type="@ChartCategoryAxisType.Date" BaseUnit="@ChartCategoryAxisBaseUnit.Months">
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels Format="{0:C4}"></ChartValueAxisLabels>
        </ChartValueAxis>
    </ChartValueAxes>

</TelerikChart>

@code {
    List<StockDataPoint> ChartProduct1Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await GenerateChartData();
    }

    async Task GenerateChartData()
    {
        ChartProduct1Data = new List<StockDataPoint>()
{
            new StockDataPoint(new DateTime(2019, 1, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),

            // Close is lower than Open, so the Down color is used, see later in the article for more details
            new StockDataPoint(new DateTime(2019, 2, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),

            new StockDataPoint(new DateTime(2019, 3, 1), 40m, 40m, 41m, 39m, 0, true),
            new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200),
        };

        await Task.FromResult(ChartProduct1Data);
    }

    public class StockDataPoint
    {
        public StockDataPoint() { }

        public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume, bool empty = false)
        {
            Date = date;
            Open = open;
            Close = close;
            High = high;
            Low = low;
            Volume = volume;
            EmptyPoint = empty;
        }
        public DateTime Date { get; set; }

        public decimal Open { get; set; }

        public decimal Close { get; set; }

        public decimal High { get; set; }

        public decimal Low { get; set; }

        public int Volume { get; set; }

        public bool EmptyPoint { get; set; }
    }
}

Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
commented on 28 Mar 2023, 10:08 AM

Doesn't the ChartTooltip needs to be inside ChartSeries?
Dimo
Telerik team
commented on 29 Mar 2023, 11:38 AM

Both options are valid and it depends on what you need - see the Chart Tooltip documentation.
Tags
Charts
Asked by
Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
Answers by
Dimo
Telerik team
Share this question
or