{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-line",
  "framework": "javascript",
  "type": "registry:component",
  "component": "Chart",
  "variant": "line",
  "dependencies": [
    "@syncfusion/ej2-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/javascript/llms.txt",
    "skillPack": "syncfusion/javascript-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/javascript/chart-line.md"
  },
  "files": [
    {
      "target": "src/components/chart-line/line.html",
      "content": "<div class=\"control-section\">\n    <div id=\"container\" align='center'></div>\n</div>\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style>\n"
    },
    {
      "target": "src/components/chart-line/line.ts",
      "content": "import { Chart, LineSeries, Double, Legend, Tooltip, type ILoadedEventArgs, Highlight, SeriesLabel } from '@syncfusion/ej2-charts';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { loadChartTheme } from '../theme-color';\nChart.Inject(LineSeries, Double, Legend, Tooltip, Highlight, SeriesLabel);\n\n/**\n * Sample for Line series\n */\n(window as any).default = (): void => {\n    let chart: Chart = new Chart({\n\n        //Initializing Primary X Axis\n        primaryXAxis: {\n            valueType: 'Double',\n            majorGridLines: { width: 0 },\n            edgeLabelPlacement: 'Shift'\n        },\n\n        //Initializing Primary Y Axis\n        primaryYAxis:\n        {\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        chartArea: {\n            border: {\n                width: 0\n            },\n            margin: {\n                bottom: 12\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: 2016, y: 7.8 },\n                    { x: 2017, y: 10.3 },\n                    { x: 2018, y: 15.5 },\n                    { x: 2019, y: 17.5 },\n                    { x: 2020, y: 19.5 },\n                    { x: 2021, y: 23.0 },\n                    { x: 2022, y: 20.0 },\n                    { x: 2023, y: 19.0 },\n                    { x: 2024, y: 22.1 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 7,\n                    height: 7,\n                    shape: 'Circle',\n                    isFilled: true\n                },\n                yName: 'y', name: 'Vietnam', labelSettings: {visible: true}\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: 2016, y: 4.8 },\n                    { x: 2017, y: 5.2 },\n                    { x: 2018, y: 6.2 },\n                    { x: 2019, y: 7.8 },\n                    { x: 2020, y: 9.3 },\n                    { x: 2021, y: 14.3 },\n                    { x: 2022, y: 15.6 },\n                    { x: 2023, y: 16.0 },\n                    { x: 2024, y: 17.0 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 6,\n                    height: 6,\n                    shape: 'Triangle',\n                    isFilled: true\n                },\n                yName: 'y', name: 'Indonesia', labelSettings: {visible: true}\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: 2016, y: 14.6 },\n                    { x: 2017, y: 15.5 },\n                    { x: 2018, y: 15.4 },\n                    { x: 2019, y: 14.4 },\n                    { x: 2020, y: 11.6 },\n                    { x: 2021, y: 13.9 },\n                    { x: 2022, y: 12.1 },\n                    { x: 2023, y: 10.0 },\n                    { x: 2024, y: 10.8 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 7,\n                    height: 7,\n                    shape: 'Diamond',\n                    isFilled: true\n                },\n                yName: 'y', name: 'France', labelSettings: {visible: true}\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: 2016, y: 8.9 },\n                    { x: 2017, y: 10.3 },\n                    { x: 2018, y: 10.8 },\n                    { x: 2019, y: 9.0 },\n                    { x: 2020, y: 7.9 },\n                    { x: 2021, y: 8.5 },\n                    { x: 2022, y: 7.4 },\n                    { x: 2023, y: 6.4 },\n                    { x: 2024, y: 7.1 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 5,\n                    height: 5,\n                    shape: 'Rectangle',\n                    isFilled: true\n                },\n                yName: 'y', name: 'Poland', labelSettings: {visible: true}\n            },\n            {\n                type: 'Line',\n                dataSource: [\n                    { x: 2016, y: 19.0 },\n                    { x: 2017, y: 20.0 },\n                    { x: 2018, y: 20.2 },\n                    { x: 2019, y: 18.4 },\n                    { x: 2020, y: 16.8 },\n                    { x: 2021, y: 18.5 },\n                    { x: 2022, y: 18.4 },\n                    { x: 2023, y: 16.3 },\n                    { x: 2024, y: 13.7 }\n                ],\n                xName: 'x', width: 2, marker: {\n                    visible: true,\n                    width: 7,\n                    height: 7,\n                    shape: 'Pentagon',\n                    isFilled: true\n                },\n                yName: 'y', name: 'Mexico', labelSettings: {visible: true}\n            }\n        ],\n        //Initializing Chart title\n        title: 'Annual Crude Steel Production by Country (2016–2024)', \n        subTitle: 'Source: wikipedia.org',\n        //Initializing User Interaction Tooltip\n        legendSettings: { visible: true, enableHighlight: true },\n        tooltip: {\n            enable: true,\n            enableHighlight: true,\n            showNearestTooltip: true,\n            header: '<b>${series.name}</b>', \n            format: '${point.x} : <b>${point.y}M</b>'\n        },\n        width: Browser.isDevice ? '100%' : '75%',\n        load: (args: ILoadedEventArgs) => {\n            loadChartTheme(args);\n        }\n    });\n    chart.appendTo('#container');\n};"
    }
  ]
}