# chart-live-chart

> Live chart displays changing CPU usage over time with a date-time axis, percentage labels, and continuously updated data.

**Framework:** blazor  **Component:** Chart  **Variant:** live-chart

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/blazor/chart-live-chart.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.Charts
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/chart-live-chart/Chart.razor

```razor
@page "/chart/live-chart"
@using Syncfusion.Blazor.Charts
@using System.Security.Cryptography
@using System.Collections.ObjectModel
@using System.Timers

<div class="control-section" align="center">
    <SfChart @ref="liveChart" Title="CPU Usage" Width="@Width">
        <ChartTitleStyle TextOverflow="TextOverflow.Wrap"></ChartTitleStyle>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="mm:ss" Title="Time (s)">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartPrimaryYAxis Minimum="0" Interval="20" Maximum="100" LabelFormat="{value}%">
            <ChartAxisLineStyle Width="0" Color="transparent"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries Type="ChartSeriesType.Line" Width="2" DataSource="@DataPoints"
                         XName="@nameof(ChartDataPoint.Time)" YName="@nameof(ChartDataPoint.CPU_Usage)">
                <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>
@code{
    private static Timer? timer;
    public string Width { get; set; } = "90%";
    private SfChart? liveChart;
    private double dataLength = 100;
    public ObservableCollection<ChartDataPoint>? DataPoints;
    protected override void OnInitialized()
    {
        // Provide the chart with initial data during page load.
        DataPoints = new ObservableCollection<ChartDataPoint>();
        for (int i = 0; i < dataLength; i++)
            DataPoints.Add(new ChartDataPoint
            {
                Time = DateTime.Now.AddSeconds(i + 10),
                CPU_Usage = RandomNumberGenerator.GetInt32(30, 80)
            });
        // Starting live update in the chart.
        timer = new Timer(400);
        timer.Elapsed += AddData;
        timer.AutoReset = true;
        timer.Enabled = true;
    }
    private void AddData(Object source, ElapsedEventArgs e)
    {
        if (liveChart == null)
            return;
        dataLength++;
        DataPoints?.RemoveAt(0);
        DataPoints?.Add(new ChartDataPoint
        {
            Time = DateTime.Now.AddSeconds(dataLength + 10),
            CPU_Usage = RandomNumberGenerator.GetInt32(30, 80)
        });
    }
    public class ChartDataPoint
    {
        public DateTime Time { get; set; }
        public double CPU_Usage { get; set; }
    }
}
```