RadzenChart annotations without corresponding point

Radzen.Blazor Components
1

Hi !

I'm trying to achieve something like this with the RadzenChart component + annotations (last version) :

image
image2937×837 87.1 KB

I have a Dictionary<DateTime, double>() binded to my RadzenAreaSeries.

The dictionary contains 1 point per week, let's say every Monday.

I need to display annotations on the line, but not only on Monday (can be every days of the weeks).

So far, the chart displays only the annotations on Mondays.

How can I achieve what I want using RadzenChart ?

Here is my code :

<RadzenChart>
  <RadzenAreaSeries Smooth="true" Data="@ChartData" CategoryProperty="Key" ValueProperty="Value" Fill="#edf1fa" Stroke="#6583ab">
      <TooltipTemplate Context="data">
          <div>
              <p class="is-size-7">@data.Key.ToString("dd MMM yyyy")</p>
              <p><b>@(data.Value.ToString("C2"))</b></p>
              @if (HistoryEvents.Any(x => x.DateFinPeriode == data.Key))
              {
                  var events = HistoryEvents.Where(x => x.DateFinPeriode == data.Key).ToList();
  
                  <br/>
  
                  foreach (var e in events)
                  {
                      <p class="is-size-7">@(e.LibelleAvecMontantBrut)</p>
                  }
              }
          </div>
      </TooltipTemplate>
      <ChildContent>
          @if (ChartData != null && ChartData.Any())
          {
              for (var i = 0; i < ChartData.Count; i++)
              {
                  var ii = i;
                  if (HistoryEvents.Any(x => x.DateFinPeriode == ChartData.ElementAt(ii).Key))
                  {
                      <RadzenSeriesAnnotation Visible=true TItem="KeyValuePair<DateTime, double>" Data="@ChartData.ElementAt(ii)" OffsetY="4" Text="🔵" />
                  }
              }
          }
      </ChildContent>
  </RadzenAreaSeries>
  <RadzenCategoryAxis Padding="20" Formatter="@FormatAsMonth" />
  <RadzenValueAxis Visible="false" />
  <RadzenLegend Visible="false" />
</RadzenChart>

Thank you !

EDIT :

  • The same thing happens for the tooltips.
  • I tried addind the missing dates with null values but couldn't make it work as it seems the component doesn't handle null values.
2

Hi @kevinyn,

There is a chance all annotations are created for the same item due to closure capturing. You can try adding a variable for the data:

var data = ChartData.ElementAt(ii);
<RadzenSeriesAnnotation Visible=true TItem="KeyValuePair<DateTime, double>" Data="@data" OffsetY="4" Text="🔵" />
3

Hi @korchev ,

Thanks for the quick answer.

I realize my question is unclear. Plus the code sample is outdated (doesn't help...). Sorry for that.

My question is. Considering these lines of code :

var chartData = new Dictionary<DateTime, double>()
{
    { new DateTime(2023, 1, 1), 100 },
    { new DateTime(2023, 7, 9), 200 },
    { new DateTime(2023, 12, 31), 50 }
};

var annotations = new List<DateTime>()
{
    new DateTime(2023, 3, 15),
    new DateTime(2023, 9, 15)
};

How can I display annotations for dates that are not in the chartData ?

I tried filling the chartData dictionary with null values & Double.NaN but it doesn't seem to work.

4

At the moment annotations do require a data point in order to render. There isn't a workaround.