{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-live-chart",
  "framework": "blazor",
  "type": "registry:component",
  "component": "Chart",
  "variant": "live-chart",
  "dependencies": [
    "Syncfusion.Blazor.Charts"
  ],
  "description": "Live chart displays changing CPU usage over time with a date-time axis, percentage labels, and continuously updated data.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/blazor/llms.txt",
    "skillPack": "syncfusion/blazor-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/blazor/chart-live-chart.md"
  },
  "files": [
    {
      "target": "src/components/chart-live-chart/Chart.razor",
      "content": "@page \"/chart/live-chart\"\n@using Syncfusion.Blazor.Charts\n@using System.Security.Cryptography\n@using System.Collections.ObjectModel\n@using System.Timers\n\n<div class=\"control-section\" align=\"center\">\n    <SfChart @ref=\"liveChart\" Title=\"CPU Usage\" Width=\"@Width\">\n        <ChartTitleStyle TextOverflow=\"TextOverflow.Wrap\"></ChartTitleStyle>\n        <ChartPrimaryXAxis ValueType=\"Syncfusion.Blazor.Charts.ValueType.DateTime\" LabelFormat=\"mm:ss\" Title=\"Time (s)\">\n            <ChartAxisMajorGridLines Width=\"0\"></ChartAxisMajorGridLines>\n        </ChartPrimaryXAxis>\n        <ChartArea>\n            <ChartAreaBorder Width=\"0\"></ChartAreaBorder>\n        </ChartArea>\n        <ChartPrimaryYAxis Minimum=\"0\" Interval=\"20\" Maximum=\"100\" LabelFormat=\"{value}%\">\n            <ChartAxisLineStyle Width=\"0\" Color=\"transparent\"></ChartAxisLineStyle>\n        </ChartPrimaryYAxis>\n        <ChartSeriesCollection>\n            <ChartSeries Type=\"ChartSeriesType.Line\" Width=\"2\" DataSource=\"@DataPoints\"\n                         XName=\"@nameof(ChartDataPoint.Time)\" YName=\"@nameof(ChartDataPoint.CPU_Usage)\">\n                <ChartSeriesAnimation Enable=\"false\"></ChartSeriesAnimation>\n            </ChartSeries>\n        </ChartSeriesCollection>\n    </SfChart>\n</div>\n@code{\n    private static Timer? timer;\n    public string Width { get; set; } = \"90%\";\n    private SfChart? liveChart;\n    private double dataLength = 100;\n    public ObservableCollection<ChartDataPoint>? DataPoints;\n    protected override void OnInitialized()\n    {\n        // Provide the chart with initial data during page load.\n        DataPoints = new ObservableCollection<ChartDataPoint>();\n        for (int i = 0; i < dataLength; i++)\n            DataPoints.Add(new ChartDataPoint\n            {\n                Time = DateTime.Now.AddSeconds(i + 10),\n                CPU_Usage = RandomNumberGenerator.GetInt32(30, 80)\n            });\n        // Starting live update in the chart.\n        timer = new Timer(400);\n        timer.Elapsed += AddData;\n        timer.AutoReset = true;\n        timer.Enabled = true;\n    }\n    private void AddData(Object source, ElapsedEventArgs e)\n    {\n        if (liveChart == null)\n            return;\n        dataLength++;\n        DataPoints?.RemoveAt(0);\n        DataPoints?.Add(new ChartDataPoint\n        {\n            Time = DateTime.Now.AddSeconds(dataLength + 10),\n            CPU_Usage = RandomNumberGenerator.GetInt32(30, 80)\n        });\n    }\n    public class ChartDataPoint\n    {\n        public DateTime Time { get; set; }\n        public double CPU_Usage { get; set; }\n    }\n}"
    }
  ]
}