{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-line",
  "framework": "react",
  "type": "registry:component",
  "component": "Chart",
  "variant": "line",
  "dependencies": [
    "@syncfusion/ej2-react-charts"
  ],
  "description": "Line chart comparing annual crude steel production by country with labels 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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/js/chart-line.md"
  },
  "files": [
    {
      "target": "src/components/chart-line/Chart.jsx",
      "content": "import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Legend, Double, Tooltip, Highlight, SeriesLabel } from '@syncfusion/ej2-react-charts';\nimport { Browser } from '@syncfusion/ej2-base';\nexport let vietnamData = [\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];\nexport let indonesiaData = [\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];\nexport let franceData = [\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];\nexport let polandData = [\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];\nexport let mexicoData = [\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];\nconst SAMPLE_CSS = `\n    .control-fluid {\n        padding: 0px !important;\n    }\n    .charts {\n        align :center\n    }`;\nconst Line = () => {\n    const onChartLoad = (args) => {\n        let chart = document.getElementById('charts');\n        chart.setAttribute('title', '');\n    };\n    return (<div className=\"control-pane\">\n            <style>{SAMPLE_CSS}</style>\n            <div className=\"control-section\">\n                <ChartComponent id=\"charts\" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'Double', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} primaryYAxis={{ title: 'Volume in million metric tons', labelFormat: '{value}', rangePadding: 'None', minimum: 0, maximum: 25, interval: 5, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 }, margin: { bottom: 12 } }} tooltip={{ enable: true, enableHighlight: true, showNearestTooltip: true, header: '<b>${series.name}</b>', format: '${point.x} : <b>${point.y}M</b>' }} legendSettings={{ enableHighlight: true }} width={Browser.isDevice ? '100%' : '75%'} title=\"Annual Crude Steel Production by Country (2016–2024)\" subTitle=\"Source: wikipedia.org\" loaded={onChartLoad.bind(this)}>\n                    <Inject services={[LineSeries, Double, Legend, Tooltip, Highlight, SeriesLabel]}/>\n                    <SeriesCollectionDirective>\n                        <SeriesDirective dataSource={vietnamData} xName=\"x\" yName=\"y\" name=\"Vietnam\" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Circle', isFilled: true }} type=\"Line\" labelSettings={{ visible: true }}></SeriesDirective>\n                        <SeriesDirective dataSource={indonesiaData} xName=\"x\" yName=\"y\" name=\"Indonesia\" width={2} marker={{ visible: true, width: 6, height: 6, shape: 'Triangle', isFilled: true }} type=\"Line\" labelSettings={{ visible: true }}></SeriesDirective>\n                        <SeriesDirective dataSource={franceData} xName=\"x\" yName=\"y\" name=\"France\" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Diamond', isFilled: true }} type=\"Line\" labelSettings={{ visible: true }}></SeriesDirective>\n                        <SeriesDirective dataSource={polandData} xName=\"x\" yName=\"y\" name=\"Poland\" width={2} marker={{ visible: true, width: 5, height: 5, shape: 'Rectangle', isFilled: true }} type=\"Line\" labelSettings={{ visible: true }}></SeriesDirective>\n                        <SeriesDirective dataSource={mexicoData} xName=\"x\" yName=\"y\" name=\"Mexico\" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Pentagon', isFilled: true }} type=\"Line\" labelSettings={{ visible: true }}></SeriesDirective>\n                    </SeriesCollectionDirective>\n                </ChartComponent>\n            </div>\n        </div>);\n};\nexport default Line;"
    }
  ]
}