Real-time chart losing it's drawn lines

[horrorhound]

I'll try and get a sample project for this together to demo this but for now here is the issue:

Razor page with ApexChart injects a Blazor Server Service Service is Singleton Service which Raises Events with a int value. Razor page accepts the raised event from singleton service OnEvent Method adds Timestamp h:mm:ss format to XValue and the int value to YValue If an event executes to "quickly" the lines in the chart disappears.

Thoughts Maybe some type of collision in threads so I've tried adding locks and delays in the events. I think maybe the chart is trying to re-write data for the same Timestamp value which it just wrote might cause the problem.

• So I've tried to "buffer" the data and only write the timestamp and value once ever but issue still occurs.
• • Maybe it's when an event executes while drawing the chart lines causes the failure. I
• Pretty easy to reproduce, I just have to raise events quickly.
• Application is currently on latest NuGet version and application is .NET 7 Blazor Server
• I've tried and tried adding different Task Delays, waits, locks etc but still haven't come up valid work-around.

To recover I have to re-load the page or call RenderAsync(). Once the lines disappear I can still write to the Chart and the tool tips update and new XValues are added, but the YValue lines fail to ever display until I perform a recovery step.

```

<ApexChart @ref=_apexChart TItem="ChartDataPoint" Title="Checkins" Options=_apexOptions>

</ApexChart>

private class ChartDataPoint { public DateTime Timestamp { get; set; } public int Value { get; set; } } private ApexChart _apexChart; private ApexChartOptions _apexOptions = new ApexChartOptions { Colors = new List { "rgba(119,107,231,1)" }, Theme = new Theme {

    Mode = Mode.Dark,
    Palette = PaletteType.Palette10  // Palette doesn't seem to change at all.
  },
  Chart = new Chart
  {
    Animations = new Animations
    {
      Enabled = true,
      Easing = Easing.Linear,
      DynamicAnimation = new DynamicAnimation
      {
        Speed = 950
      }
    },
    Height = 350,
    Toolbar = new Toolbar
    {
      Show = false
    },
    Type = ApexCharts.ChartType.Line,
    Background = "rgb(55, 55, 64)",
    Zoom = new Zoom
    {
      Enabled = false
    }
  },
  Yaxis = new()
  {
      new()
      {
          TickAmount = 10,
          Min = 0,
          Max = 50
      }
  },
  Xaxis = new()
  {
    Range = 10 // number of datapoints to display.
  },
  Stroke = new Stroke { Curve = Curve.Straight },
};

private void HandleOnChanged { await _apexChart.AppendDataAsync(dataToAppend); }

[joadan]

Sorry but I would recomend with a simple example and try to reproduce. Have you looked at the sample at https://apexcharts.github.io/Blazor-ApexCharts/methods/update-series#realtime

[horrorhound]

Yes, I've seen that and my code works fine also; but the issue is when the XValue already exists and you try and update it. So that's a good idea though; maybe I'll take their sample code and re-create the issue without changing the date on the XValue in their sample.

What I have working at the moment is this...

Event: Queue up the data to be processed by Apexchart; cause processing the data immediately if there's already the same timestamp data on the chart causes failure.

private void HandleStatsChanged(Data.ProductStats productStat)
  {
    Log.Information("Entered HandleStatsChanged...");
    lock (_pendingData)
    {
      var timestamp = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
      // Append to existing entry or add new one if it doesn't exist
      if (_pendingData.ContainsKey(timestamp))
      {
        _pendingData[timestamp] += 1;
      }
      else
      {
        _pendingData[timestamp] = 1;
      }

      Task.Delay(5);  // Can probably remove
    }
 }

Timer: Update the chart based off a timer event every 3seconds.

private void OnTimerElapsed(object state)
{
  lock (_pendingData)
  {
    // Collect the data accumulated in the last second and append it to the chart
    if (_pendingData.Count > 0)
    {
      var dataToAppend = _pendingData.Select(kvp => new ChartDataPoint
        {
          Timestamp = DateTime.Parse(kvp.Key),
          Value = kvp.Value
        }).ToList();

      // Clear the pending data
      _pendingData.Clear();

      // Update the chart on a different thread
      InvokeAsync(async () =>
      {
        await _apexChart.AppendDataAsync(dataToAppend);
      });
    }
  }
}