# chart-line

> Line chart compares annual crude steel production by country across recent years.

**Framework:** vue  **Component:** Chart  **Variant:** line

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/vue/chart-line.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-charts
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/chart-line/Chart.vue

```vue
<template>
  <div class="control-section">
    <div align='center'>
        <ejs-chart style='display:block' align='center' id='chartcontainer' :title='title' :subTitle='subTitle' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
            :tooltip='tooltip' :chartArea='chartArea' :width='width' :legendSettings='legend'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Line' xName='Period' yName='Viet_Growth' name='Vietnam' opacity=1 width=2 :marker='circleMarker' :labelSettings='labelSettings'> </e-series>
                <e-series :dataSource='seriesData' type='Line' xName='Period' yName='Can_Growth' name='Indonesia' opacity=1 width=2 :marker='triangleMarker' :labelSettings='labelSettings'> </e-series>
                <e-series :dataSource='seriesData' type='Line' xName='Period' yName='Mal_Growth' name='France' opacity=1 width=2 :marker='diamondMarker' :labelSettings='labelSettings'> </e-series>
                <e-series :dataSource='seriesData' type='Line' xName='Period' yName='Egy_Growth' name='Poland' opacity=1 width=2 :marker='rectangleMarker' :labelSettings='labelSettings'> </e-series>
                <e-series :dataSource='seriesData' type='Line' xName='Period' yName='Ind_Growth' name='Mexico' opacity=1 width=2 :marker='pentagonMarker' :labelSettings='labelSettings'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>

</div>
</template>
<script>
import { Browser } from '@syncfusion/ej2-base';
import { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, Legend, Tooltip,DateTime, Category, Highlight, SeriesLabel } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  data: function() {
    return {
      seriesData: [
      { Period : 2016, Can_Growth : 4.8 , Viet_Growth : 7.8 , Mal_Growth : 14.6, Egy_Growth : 8.9, Ind_Growth : 19.0 },
      { Period : 2017, Can_Growth : 5.2 , Viet_Growth : 10.3, Mal_Growth : 15.5, Egy_Growth : 10.3, Ind_Growth : 20.0 },
      { Period : 2018, Can_Growth : 6.2 , Viet_Growth : 15.5, Mal_Growth : 15.4, Egy_Growth : 10.8, Ind_Growth : 20.2 },
      { Period : 2019, Can_Growth : 7.8 , Viet_Growth : 17.5, Mal_Growth : 14.4, Egy_Growth : 9.0, Ind_Growth : 18.4 },
      { Period : 2020, Can_Growth : 9.3 , Viet_Growth : 19.5, Mal_Growth : 11.6, Egy_Growth : 7.9, Ind_Growth : 16.8 },
      { Period : 2021, Can_Growth : 14.3, Viet_Growth : 23.0, Mal_Growth : 13.9, Egy_Growth : 8.5, Ind_Growth : 18.5 },
      { Period : 2022, Can_Growth : 15.6, Viet_Growth : 20.0, Mal_Growth : 12.1, Egy_Growth : 7.4, Ind_Growth : 18.4  },
      { Period : 2023, Can_Growth : 16.0, Viet_Growth : 19.0, Mal_Growth : 10.0, Egy_Growth : 6.4, Ind_Growth : 16.3 },
      { Period : 2024, Can_Growth : 17.0, Viet_Growth : 22.1, Mal_Growth : 10.8, Egy_Growth : 7.1, Ind_Growth : 13.7 },
        
    ],
      //Initializing Primary X Axis
      primaryXAxis: {
        valueType: "Double",
        edgeLabelPlacement: "Shift",
        majorGridLines: { width: 0 }
      },
      //Initializing Primary Y Axis
      primaryYAxis: {
        title: 'Volume in million metric tons',
        minimum: 0,
        maximum: 25,
        interval: 5,
        lineStyle: { width: 0 },
        majorTickLines: { width: 0 },
      },
      chartArea: {
        border: {
          width: 0
        },
        margin: {
          bottom: 12
        }
      },
      width : Browser.isDevice ? '100%' : '75%',
      circleMarker: { visible: true, height: 7, width: 7 , shape: 'Circle' , isFilled: true },
      triangleMarker: { visible: true, height: 6, width: 6 , shape: 'Triangle' , isFilled: true },
      diamondMarker: {  visible: true, height: 7, width: 7 , shape: 'Diamond' , isFilled: true  },
      rectangleMarker: { visible: true, height: 5, width: 5 , shape: 'Rectangle' , isFilled: true },
      pentagonMarker: { visible: true, height: 7, width: 7 , shape: 'Pentagon' , isFilled: true },
      labelSettings: {visible: true},
      tooltip: {
        enable: true,
        enableHighlight: true,
        showNearestTooltip: true, header: '<b>${series.name}</b>', format: '${point.x} : <b>${point.y}M</b>'
      },
      legend: {visible : true, enableHighlight: true},
      title: "Annual Crude Steel Production by Country (2016–2024)", subTitle:"Source: wikipedia.org"
    };
  },
  provide: {
    chart: [LineSeries, Legend, Tooltip, Category, DateTime, Highlight, SeriesLabel]
  }
   
};
</script>

```

### src/components/chart-line/ChartView.vue

```vue
<template>
  <Chart />
</template>

<script setup>
import Chart from '../../components/Chart.vue'
</script>
```