{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-line",
  "framework": "aspnet-core",
  "type": "registry:component",
  "component": "Chart",
  "variant": "line",
  "dependencies": [
    "Syncfusion.AspNetCore.Charts"
  ],
  "description": "Multi-series Line chart of country-level crude steel volumes from 2016 to 2024.",
  "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/aspnet-core/llms.txt",
    "skillPack": "syncfusion/aspnetcore-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/aspnet-core/chart-line.md"
  },
  "files": [
    {
      "target": "src/components/chart-line/chart.cshtml",
      "content": "@page\r\n@model EJ2CoreSampleBrowser.Pages.Chart.LineModel\r\n@using Syncfusion.EJ2\r\n\r\n    <div class=\"control-section\" align=\"center\">\r\n        <ejs-chart id=\"container\" height=\"460\" title=\"Annual Crude Steel Production by Country (2016–2024)\" subTitle=\"Source: wikipedia.org\">\r\n            <e-chart-tooltipsettings enable=\"true\" enableHighlight=\"true\" showNearestTooltip=\"true\" header=\"<b>${series.name}</b>\" format=\"${point.x} : <b>${point.y}M</b>\">\r\n            </e-chart-tooltipsettings>\r\n            <e-chart-primaryxaxis valueType=\"@Syncfusion.EJ2.Charts.ValueType.Double\"\r\n                                  edgeLabelPlacement=\"@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift\">\r\n                <e-majorgridlines width=\"0\"></e-majorgridlines>\r\n            </e-chart-primaryxaxis>\r\n            <e-chart-primaryyaxis title=\"Volume in million metric tons\"\r\n                                  minimum=\"0\"\r\n                                  maximum=\"25\"\r\n                                  interval=\"5\"\r\n                                  rangePadding=\"@Syncfusion.EJ2.Charts.ChartRangePadding.None\">\r\n                <e-linestyle width=\"0\"></e-linestyle>\r\n                <e-majorticklines width=\"0\"></e-majorticklines>\r\n                <e-minorticklines width=\"0\"></e-minorticklines>\r\n            </e-chart-primaryyaxis>\r\n            <e-chart-chartarea>\r\n                <e-chartarea-border width=\"0\"></e-chartarea-border>\r\n                <e-chartarea-margin bottom=12></e-chartarea-margin>\r\n            </e-chart-chartarea>\r\n            <e-chart-legendsettings visible=\"true\" enableHighlight=\"true\">\r\n            </e-chart-legendsettings>\r\n            <e-series-collection>\r\n                <e-series dataSource=\"@Model.ChartData\" name=\"Vietnam\" xName=\"Period\" width=\"2\" yName=\"Viet_Growth\" type=\"@Syncfusion.EJ2.Charts.ChartSeriesType.Line\">\r\n                    <e-series-marker visible=\"true\" height=\"7\" width=\"7\" shape=\"@Syncfusion.EJ2.Charts.ChartShape.Circle\" isFilled=\"true\"></e-series-marker>\r\n                    <e-series-labelSettings visible=\"true\"></e-series-labelSettings>\r\n                </e-series>\r\n                <e-series dataSource=\"@Model.ChartData\" name=\"Indonesia\" xName=\"Period\" width=\"2\" yName=\"Can_Growth\" type=\"@Syncfusion.EJ2.Charts.ChartSeriesType.Line\">\r\n                    <e-series-marker visible=\"true\" height=\"6\" width=\"6\" shape=\"@Syncfusion.EJ2.Charts.ChartShape.Triangle\" isFilled=\"true\"></e-series-marker>\r\n                    <e-series-labelSettings visible=\"true\"></e-series-labelSettings>\r\n                </e-series>\r\n                <e-series dataSource=\"@Model.ChartData\" name=\"France\" xName=\"Period\" width=\"2\" yName=\"Mal_Growth\" type=\"@Syncfusion.EJ2.Charts.ChartSeriesType.Line\">\r\n                    <e-series-marker visible=\"true\" height=\"7\" width=\"7\" shape=\"@Syncfusion.EJ2.Charts.ChartShape.Diamond\" isFilled=\"true\"></e-series-marker>\r\n                    <e-series-labelSettings visible=\"true\"></e-series-labelSettings>\r\n                </e-series>\r\n                <e-series dataSource=\"@Model.ChartData\" name=\"Poland\" xName=\"Period\" width=\"2\" yName=\"Egy_Growth\" type=\"@Syncfusion.EJ2.Charts.ChartSeriesType.Line\">\r\n                    <e-series-marker visible=\"true\" height=\"5\" width=\"5\" shape=\"@Syncfusion.EJ2.Charts.ChartShape.Rectangle\" isFilled=\"true\"></e-series-marker>\r\n                    <e-series-labelSettings visible=\"true\"></e-series-labelSettings>\r\n                </e-series>\r\n                <e-series dataSource=\"@Model.ChartData\" name=\"Mexico\" xName=\"Period\" width=\"2\" yName=\"Ind_Growth\" type=\"@Syncfusion.EJ2.Charts.ChartSeriesType.Line\">\r\n                    <e-series-marker visible=\"true\" height=\"7\" width=\"7\" shape=\"@Syncfusion.EJ2.Charts.ChartShape.Pentagon\" isFilled=\"true\"></e-series-marker>\r\n                    <e-series-labelSettings visible=\"true\"></e-series-labelSettings>\r\n                </e-series>\r\n            </e-series-collection>\r\n        </ejs-chart>\r\n    </div>"
    },
    {
      "target": "src/components/chart-line/chart.cshtml.cs",
      "content": "using Microsoft.AspNetCore.Mvc;\r\nusing Microsoft.AspNetCore.Mvc.RazorPages;\r\n\r\nnamespace EJ2CoreSampleBrowser.Pages.Chart\r\n{\r\n    public class LineModel : PageModel\r\n    {\r\n        public List<LineChartData> ChartData { get; set; }\r\n        public void OnGet()\r\n        {\r\n            ChartData = new List<LineChartData>\r\n            {\r\n                new LineChartData { Period = 2016, Can_Growth = 4.8 , Viet_Growth = 7.8 , Mal_Growth = 14.6, Egy_Growth = 8.9 , Ind_Growth = 19.0 },\r\n                new LineChartData { Period = 2017, Can_Growth = 5.2 , Viet_Growth = 10.3, Mal_Growth = 15.5, Egy_Growth = 10.3, Ind_Growth = 20.0 },\r\n                new LineChartData { Period = 2018, Can_Growth = 6.2 , Viet_Growth = 15.5, Mal_Growth = 15.4, Egy_Growth = 10.8, Ind_Growth = 20.2  },\r\n                new LineChartData { Period = 2019, Can_Growth = 7.8 , Viet_Growth = 17.5, Mal_Growth = 14.4, Egy_Growth = 9.0 , Ind_Growth = 18.4 },\r\n                new LineChartData { Period = 2020, Can_Growth = 9.3 , Viet_Growth = 19.5, Mal_Growth = 11.6, Egy_Growth = 7.9 , Ind_Growth = 16.8 },\r\n            };\r\n        }\r\n        \r\n    }\r\n\r\n    public class LineChartData\r\n    {\r\n        public DateTime X;\r\n        public double Y;\r\n        public int Period;\r\n        public double Can_Growth;\r\n        public double Viet_Growth;\r\n        public double Mal_Growth;\r\n        public double Egy_Growth;\r\n        public double Ind_Growth;\r\n    }\r\n   \r\n}\r\n"
    }
  ]
}