Incorrect tooltip information in Chart when using MissingValues="ChartSeriesMissingValues.Zero"

[Bohdan]

Hi Telerik Team,

Tooltip information at the first {DataCollectionSizeNumber pasted here} values is incorrect when setting MissingValues="ChartSeriesMissingValues.Zero".
The chart series-line is displayed properly - the value that is missing should be 0 and it's displayed visually as 0.

<TelerikChart>
    <ChartTitle Text="MissingValues.Zero Tooltip Bug (No Nulls)"></ChartTitle>
    <ChartTooltip Visible="true"></ChartTooltip>
    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line"
                     Name="Sample Series"
                     Data="@Data"
                     Field="@nameof(ChartP.Count)"
                     CategoryField="@nameof(ChartP.Category)"
                     MissingValues="ChartSeriesMissingValues.Zero"
                     Style="ChartSeriesStyle.Normal">
            <ChartSeriesTooltip Visible="true" Context="ctxt">
                <Template>
                    @{
                        var point = ctxt.DataItem as ChartP;
                    }
                    <div style="font-size:13px;">
                        <strong>Category:</strong> @point?.Category.ToString("yyyy-MM-dd HH:mm")<br />
                        <strong>Count:</strong> @point?.Count<br />
                        <strong>Extra:</strong> @point?.ExtraInfo
                    </div>
                </Template>
            </ChartSeriesTooltip>

            <ChartSeriesMarkers Visible="false" Type="ChartSeriesMarkersType.Circle" Size="6">
                <ChartSeriesMarkersBorder Width="1" />
            </ChartSeriesMarkers>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Min="@StartOfDayLocal" Max="@EndOfDayLocal" Type="ChartCategoryAxisType.Date"
                           BaseUnit="ChartCategoryAxisBaseUnit.Minutes" BaseUnitStep="15">
            <ChartCategoryAxisLabels Format="{0:HH:mm}" Step="4">
                <ChartCategoryAxisLabelsRotation Angle="45" />
            </ChartCategoryAxisLabels>
        </ChartCategoryAxis>
    </ChartCategoryAxes>

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

@code {
    public class ChartP
    {
        public DateTime Category { get; set; }  // X axis
        public int Count { get; set; }          // Y value
        public string? ExtraInfo { get; set; }  // Info for tooltip
    }

    private static DateTime StartOfDayLocal =>
    DateTime.SpecifyKind(DateTime.Today, DateTimeKind.Local);
    private DateTime EndOfDayLocal => StartOfDayLocal.AddDays(1);

    public List<ChartP> Data = new()
    {
        new ChartP { Category = StartOfDayLocal.AddHours(2), Count = 5, ExtraInfo = "Real Point A" },
        new ChartP { Category = StartOfDayLocal.AddHours(3), Count = 7, ExtraInfo = "Real Point B" },
        new ChartP { Category = StartOfDayLocal.AddHours(4), Count = 3, ExtraInfo = "Real Point C" },
        new ChartP { Category = StartOfDayLocal.AddHours(5), Count = 2, ExtraInfo = "Real Point D" },
    };
}

Am I doing something wrong or this is a bug?

Regards,
Bohdan

[Dimo]

Hi Bohdan,

Thanks for the video and runnable test page.

Indeed, this is a bug that occurs when a tooltip template is used with a missing data item for the hovered category. Note the difference between a missing value and a missing data item.

I have logged a bug report on your behalf and awarded you some Telerik points. I hope the suggested workarounds and comments are applicable to your scenario and can be used to mitigate the problem. Please excuse us for the inconvenience.

You can:

• Check the FormattedValue property of the tooltip context. If it's "0", while the value in the DataItem is not zero, then there is a missing data item.
  

  <ChartSeriesTooltip Visible="true" Context="ctxt">
      <Template>
          @{
              var point = ctxt.DataItem as ChartP;
          }
          <div style="font-size:13px;">
              @if (point is not null && ctxt.FormattedValue != "0" && point?.Count > 0)
              {
                  <strong>Category:</strong> @point?.Category.ToString("yyyy-MM-dd HH:mm")<br />
                  <strong>Count:</strong> @point?.Count<br />
                  <strong>Extra:</strong> @point?.ExtraInfo
              }
              else
              {
                  <strong>Category:</strong> @DateTime.Parse(ctxt.Category.ToString()).ToString("yyyy-MM-dd HH:mm")<br />
                  <strong>Count: </strong> @( 0 )
              }
          </div>
      </Template>
  </ChartSeriesTooltip>
  

• Set MissingValues to Gap or Interpolate.
• Provide dummy data items with a zero Count value. These dummy items depend on the Min and Max axis values and can be appended after the Chart data is retrieved from the data source, so that they are not hard-coded there.
• Remove the Tooltip template.

Regards,
Dimo
Progress Telerik

[Bohdan]

Thanks, the workaround works for me.

Appreciate your help – and thanks a lot for the Telerik points as well!

Regards,
Bohdan