{
"$schema": "https://ai.syncfusion.com/schema/registry-item.json",
"name": "chart-line",
"framework": "blazor",
"type": "registry:component",
"component": "Chart",
"variant": "line",
"dependencies": [
"Syncfusion.Blazor.Charts"
],
"description": "Multi-series line chart compares annual crude steel production by country with date axes, markers, and tooltips.",
"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-line.md"
},
"files": [
{
"target": "src/components/chart-line/Chart.razor",
"content": "@page \"/chart/line\"\n@using Syncfusion.Blazor.Charts\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n ${series.name}\" Format=\"${point.x} : ${point.y}M\">\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n@code{\n public string Width { get; set; } = \"90%\";\n\n public class ChartData\n {\n public DateTime X { get; set; }\n public double Y { get; set; }\n }\n public List VietnamData = new List\n {\n new ChartData { X = new DateTime(2016, 01, 01), Y = 7.8 },\n new ChartData { X = new DateTime(2017, 01, 01), Y = 10.3 },\n new ChartData { X = new DateTime(2018, 01, 01), Y = 15.5 },\n new ChartData { X = new DateTime(2019, 01, 01), Y = 17.5 },\n new ChartData { X = new DateTime(2020, 01, 01), Y = 19.5 },\n new ChartData { X = new DateTime(2021, 01, 01), Y = 23.0 },\n new ChartData { X = new DateTime(2022, 01, 01), Y = 20.0 },\n new ChartData { X = new DateTime(2023, 01, 01), Y = 19.0 },\n new ChartData { X = new DateTime(2024, 01, 01), Y = 22.1 }\n };\n public List IndonesiaData = new List\n {\n new ChartData { X = new DateTime(2016, 01, 01), Y = 4.8 },\n new ChartData { X = new DateTime(2017, 01, 01), Y = 5.2 },\n new ChartData { X = new DateTime(2018, 01, 01), Y = 6.2 },\n new ChartData { X = new DateTime(2019, 01, 01), Y = 7.8 },\n new ChartData { X = new DateTime(2020, 01, 01), Y = 9.3 },\n new ChartData { X = new DateTime(2021, 01, 01), Y = 14.3 },\n new ChartData { X = new DateTime(2022, 01, 01), Y = 15.6 },\n new ChartData { X = new DateTime(2023, 01, 01), Y = 16.0 },\n new ChartData { X = new DateTime(2024, 01, 01), Y = 17.0 }\n };\n public List FranceData = new List\n {\n new ChartData { X = new DateTime(2016, 01, 01), Y = 14.6 },\n new ChartData { X = new DateTime(2017, 01, 01), Y = 15.5 },\n new ChartData { X = new DateTime(2018, 01, 01), Y = 15.4 },\n new ChartData { X = new DateTime(2019, 01, 01), Y = 14.4 },\n new ChartData { X = new DateTime(2020, 01, 01), Y = 11.6 },\n new ChartData { X = new DateTime(2021, 01, 01), Y = 13.9 },\n new ChartData { X = new DateTime(2022, 01, 01), Y = 12.1 },\n new ChartData { X = new DateTime(2023, 01, 01), Y = 10.0 },\n new ChartData { X = new DateTime(2024, 01, 01), Y = 10.8 }\n };\n public List PolandData = new List\n {\n new ChartData { X = new DateTime(2016, 01, 01), Y = 8.9 },\n new ChartData { X = new DateTime(2017, 01, 01), Y = 10.3 },\n new ChartData { X = new DateTime(2018, 01, 01), Y = 10.8 },\n new ChartData { X = new DateTime(2019, 01, 01), Y = 9.0 },\n new ChartData { X = new DateTime(2020, 01, 01), Y = 7.9 },\n new ChartData { X = new DateTime(2021, 01, 01), Y = 8.5 },\n new ChartData { X = new DateTime(2022, 01, 01), Y = 7.4 },\n new ChartData { X = new DateTime(2023, 01, 01), Y = 6.4 },\n new ChartData { X = new DateTime(2024, 01, 01), Y = 7.1 }\n };\n public List MexicoData = new List\n {\n new ChartData { X = new DateTime(2016, 01, 01), Y = 19.0 },\n new ChartData { X = new DateTime(2017, 01, 01), Y = 20.0 },\n new ChartData { X = new DateTime(2018, 01, 01), Y = 20.2 },\n new ChartData { X = new DateTime(2019, 01, 01), Y = 18.4 },\n new ChartData { X = new DateTime(2020, 01, 01), Y = 16.8 },\n new ChartData { X = new DateTime(2021, 01, 01), Y = 18.5 },\n new ChartData { X = new DateTime(2022, 01, 01), Y = 18.4 },\n new ChartData { X = new DateTime(2023, 01, 01), Y = 16.3 },\n new ChartData { X = new DateTime(2024, 01, 01), Y = 13.7 }\n };\n}\n"
}
]
}