{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-line",
  "framework": "angular",
  "type": "registry:component",
  "component": "Chart",
  "variant": "line",
  "dependencies": [
    "@syncfusion/ej2-angular-charts"
  ],
  "description": "Multi-series Line chart of country-level crude steel volumes from 2016 to 2024 via ChartAllModule.",
  "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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/chart-line.md"
  },
  "files": [
    {
      "target": "src/components/chart-line/line.component.ts",
      "content": "import { Component, ViewEncapsulation } from '@angular/core';\nimport { ILoadedEventArgs, ChartAllModule } from '@syncfusion/ej2-angular-charts';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { loadChartTheme } from '../theme-color';\n\n/**\n * Sample for Line Series\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'line.html',\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [ ChartAllModule]\n})\nexport class LineChartComponent {\n\n    public data: Object[] = [\n        { Period : 2016, Can_Growth : 4.8 , Viet_Growth : 7.8 , Mal_Growth : 14.6, Egy_Growth : 8.9, Ind_Growth : 19.0 },\n        { Period : 2017, Can_Growth : 5.2 , Viet_Growth : 10.3, Mal_Growth : 15.5, Egy_Growth : 10.3, Ind_Growth : 20.0 },\n        { Period : 2018, Can_Growth : 6.2 , Viet_Growth : 15.5, Mal_Growth : 15.4, Egy_Growth : 10.8, Ind_Growth : 20.2 },\n        { Period : 2019, Can_Growth : 7.8 , Viet_Growth : 17.5, Mal_Growth : 14.4, Egy_Growth : 9.0, Ind_Growth : 18.4 },\n        { Period : 2020, Can_Growth : 9.3 , Viet_Growth : 19.5, Mal_Growth : 11.6, Egy_Growth : 7.9, Ind_Growth : 16.8 },\n        { Period : 2021, Can_Growth : 14.3, Viet_Growth : 23.0, Mal_Growth : 13.9, Egy_Growth : 8.5, Ind_Growth : 18.5 },\n        { Period : 2022, Can_Growth : 15.6, Viet_Growth : 20.0, Mal_Growth : 12.1, Egy_Growth : 7.4, Ind_Growth : 18.4  },\n        { Period : 2023, Can_Growth : 16.0, Viet_Growth : 19.0, Mal_Growth : 10.0, Egy_Growth : 6.4, Ind_Growth : 16.3 },\n        { Period : 2024, Can_Growth : 17.0, Viet_Growth : 22.1, Mal_Growth : 10.8, Egy_Growth : 7.1, Ind_Growth : 13.7 },\n    ];\n    \n    //Initializing Primary X Axis\n    public primaryXAxis: Object = {\n        valueType: 'Double',\n        edgeLabelPlacement: 'Shift',\n        majorGridLines: { width: 0 }\n    };\n    //Initializing Primary Y Axis\n    public primaryYAxis: Object = {\n        title: 'Volume in million metric tons', \n        labelFormat: '{value}', \n        rangePadding: 'None', \n        minimum: 0, \n        maximum: 25, \n        interval: 5, \n        lineStyle: { width: 0 }, \n        majorTickLines: { width: 0 }, \n        minorTickLines: { width: 0 }\n    };\n    public chartArea: Object = {\n        border: {\n            width: 0\n        },\n        margin: {\n            bottom: 12\n        }\n    };\n    public width: string = Browser.isDevice ? '100%' : '75%';\n    public circleMarker: Object = { visible: true, height: 7, width: 7 , shape: 'Circle' , isFilled: true };\n    public triangleMarker: Object = { visible: true, height: 6, width: 6 , shape: 'Triangle' , isFilled: true };\n    public diamondMarker: Object = { visible: true, height: 7, width: 7 , shape: 'Diamond' , isFilled: true };\n    public rectangleMarker: Object = { visible: true, height: 5, width: 5 , shape: 'Rectangle' , isFilled: true };\n    public pentagonMarker: Object = { visible: true, height: 7, width: 7 , shape: 'Pentagon' , isFilled: true };\n    public labelSettings: Object = { visible: true};\n    \n    public tooltip: Object = {\n        enable: true,\n        enableHighlight: true, \n        showNearestTooltip: true,\n        header: '<b>${series.name}</b>', format: '${point.x} : <b>${point.y}M</b>'\n    };\n    public legend: Object = {\n        visible: true,\n        enableHighlight: true\n    }\n    // custom code start\n    public load(args: ILoadedEventArgs): void {\n       loadChartTheme(args);\n    };\n\n    // custom code end\n    public title: string = 'Annual Crude Steel Production by Country (2016–2024)';\n    public subTitle: string = 'Source: wikipedia.org';\n    constructor() {\n       //code\n    };\n\n}"
    },
    {
      "target": "src/components/chart-line/line.html",
      "content": "\n<div class=\"control-section\">\n    <div align='center'>\n        <ejs-chart style='display:block' align='center' id='chartcontainer' [title]='title' [subTitle]='subTitle' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'\n            [tooltip]='tooltip' (load)='load($event)' [chartArea]='chartArea' [width]='width' [legendSettings]='legend'>\n            <e-series-collection>\n                <e-series [dataSource]='data' type='Line' xName='Period' yName='Viet_Growth' name='Vietnam' width=2 [marker]='circleMarker' [labelSettings]='labelSettings'> </e-series>\n                <e-series [dataSource]='data' type='Line' xName='Period' yName='Can_Growth' name='Indonesia' width=2 [marker]='triangleMarker' [labelSettings]='labelSettings'> </e-series>\n                <e-series [dataSource]='data' type='Line' xName='Period' yName='Mal_Growth' name='France' width=2 [marker]='diamondMarker' [labelSettings]='labelSettings'> </e-series>\n                <e-series [dataSource]='data' type='Line' xName='Period' yName='Egy_Growth' name='Poland' width=2 [marker]='rectangleMarker' [labelSettings]='labelSettings'> </e-series>\n                <e-series [dataSource]='data' type='Line' xName='Period' yName='Ind_Growth' name='Mexico' width=2 [marker]='pentagonMarker' [labelSettings]='labelSettings'> </e-series>    \n            </e-series-collection>\n        </ejs-chart>\n    </div>\n</div>\n"
    }
  ]
}