{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-line",
  "framework": "vue",
  "type": "registry:component",
  "component": "Chart",
  "variant": "line",
  "dependencies": [
    "@syncfusion/ej2-vue-charts"
  ],
  "description": "Line chart compares annual crude steel production by country across recent years.",
  "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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/chart-line.md"
  },
  "files": [
    {
      "target": "src/components/chart-line/Chart.vue",
      "content": "<template>\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' :chartArea='chartArea' :width='width' :legendSettings='legend'>\n            <e-series-collection>\n                <e-series :dataSource='seriesData' type='Line' xName='Period' yName='Viet_Growth' name='Vietnam' opacity=1 width=2 :marker='circleMarker' :labelSettings='labelSettings'> </e-series>\n                <e-series :dataSource='seriesData' type='Line' xName='Period' yName='Can_Growth' name='Indonesia' opacity=1 width=2 :marker='triangleMarker' :labelSettings='labelSettings'> </e-series>\n                <e-series :dataSource='seriesData' type='Line' xName='Period' yName='Mal_Growth' name='France' opacity=1 width=2 :marker='diamondMarker' :labelSettings='labelSettings'> </e-series>\n                <e-series :dataSource='seriesData' type='Line' xName='Period' yName='Egy_Growth' name='Poland' opacity=1 width=2 :marker='rectangleMarker' :labelSettings='labelSettings'> </e-series>\n                <e-series :dataSource='seriesData' type='Line' xName='Period' yName='Ind_Growth' name='Mexico' opacity=1 width=2 :marker='pentagonMarker' :labelSettings='labelSettings'> </e-series>\n            </e-series-collection>\n        </ejs-chart>\n    </div>\n\n</div>\n</template>\n<script>\nimport { Browser } from '@syncfusion/ej2-base';\nimport { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, Legend, Tooltip,DateTime, Category, Highlight, SeriesLabel } from \"@syncfusion/ej2-vue-charts\";\n\nexport default {\n  components: {\n    'ejs-chart': ChartComponent,\n    'e-series-collection': SeriesCollectionDirective,\n    'e-series': SeriesDirective\n  },\n  data: function() {\n    return {\n      seriesData: [\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      primaryXAxis: {\n        valueType: \"Double\",\n        edgeLabelPlacement: \"Shift\",\n        majorGridLines: { width: 0 }\n      },\n      //Initializing Primary Y Axis\n      primaryYAxis: {\n        title: 'Volume in million metric tons',\n        minimum: 0,\n        maximum: 25,\n        interval: 5,\n        lineStyle: { width: 0 },\n        majorTickLines: { width: 0 },\n      },\n      chartArea: {\n        border: {\n          width: 0\n        },\n        margin: {\n          bottom: 12\n        }\n      },\n      width : Browser.isDevice ? '100%' : '75%',\n      circleMarker: { visible: true, height: 7, width: 7 , shape: 'Circle' , isFilled: true },\n      triangleMarker: { visible: true, height: 6, width: 6 , shape: 'Triangle' , isFilled: true },\n      diamondMarker: {  visible: true, height: 7, width: 7 , shape: 'Diamond' , isFilled: true  },\n      rectangleMarker: { visible: true, height: 5, width: 5 , shape: 'Rectangle' , isFilled: true },\n      pentagonMarker: { visible: true, height: 7, width: 7 , shape: 'Pentagon' , isFilled: true },\n      labelSettings: {visible: true},\n      tooltip: {\n        enable: true,\n        enableHighlight: true,\n        showNearestTooltip: true, header: '<b>${series.name}</b>', format: '${point.x} : <b>${point.y}M</b>'\n      },\n      legend: {visible : true, enableHighlight: true},\n      title: \"Annual Crude Steel Production by Country (2016–2024)\", subTitle:\"Source: wikipedia.org\"\n    };\n  },\n  provide: {\n    chart: [LineSeries, Legend, Tooltip, Category, DateTime, Highlight, SeriesLabel]\n  }\n   \n};\n</script>\n"
    },
    {
      "target": "src/components/chart-line/ChartView.vue",
      "content": "<template>\n  <Chart />\n</template>\n\n<script setup>\nimport Chart from '../../components/Chart.vue'\n</script>"
    }
  ]
}