# chart-line

> Multi-series Line chart of country-level crude steel volumes from 2016 to 2024.

**Framework:** aspnet-core  **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/aspnet-core/chart-line.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.AspNetCore.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.cshtml

```cshtml
@page
@model EJ2CoreSampleBrowser.Pages.Chart.LineModel
@using Syncfusion.EJ2

    <div class="control-section" align="center">
        <ejs-chart id="container" height="460" title="Annual Crude Steel Production by Country (2016–2024)" subTitle="Source: wikipedia.org">
            <e-chart-tooltipsettings enable="true" enableHighlight="true" showNearestTooltip="true" header="<b>${series.name}</b>" format="${point.x} : <b>${point.y}M</b>">
            </e-chart-tooltipsettings>
            <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Double"
                                  edgeLabelPlacement="@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift">
                <e-majorgridlines width="0"></e-majorgridlines>
            </e-chart-primaryxaxis>
            <e-chart-primaryyaxis title="Volume in million metric tons"
                                  minimum="0"
                                  maximum="25"
                                  interval="5"
                                  rangePadding="@Syncfusion.EJ2.Charts.ChartRangePadding.None">
                <e-linestyle width="0"></e-linestyle>
                <e-majorticklines width="0"></e-majorticklines>
                <e-minorticklines width="0"></e-minorticklines>
            </e-chart-primaryyaxis>
            <e-chart-chartarea>
                <e-chartarea-border width="0"></e-chartarea-border>
                <e-chartarea-margin bottom=12></e-chartarea-margin>
            </e-chart-chartarea>
            <e-chart-legendsettings visible="true" enableHighlight="true">
            </e-chart-legendsettings>
            <e-series-collection>
                <e-series dataSource="@Model.ChartData" name="Vietnam" xName="Period" width="2" yName="Viet_Growth" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                    <e-series-marker visible="true" height="7" width="7" shape="@Syncfusion.EJ2.Charts.ChartShape.Circle" isFilled="true"></e-series-marker>
                    <e-series-labelSettings visible="true"></e-series-labelSettings>
                </e-series>
                <e-series dataSource="@Model.ChartData" name="Indonesia" xName="Period" width="2" yName="Can_Growth" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                    <e-series-marker visible="true" height="6" width="6" shape="@Syncfusion.EJ2.Charts.ChartShape.Triangle" isFilled="true"></e-series-marker>
                    <e-series-labelSettings visible="true"></e-series-labelSettings>
                </e-series>
                <e-series dataSource="@Model.ChartData" name="France" xName="Period" width="2" yName="Mal_Growth" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                    <e-series-marker visible="true" height="7" width="7" shape="@Syncfusion.EJ2.Charts.ChartShape.Diamond" isFilled="true"></e-series-marker>
                    <e-series-labelSettings visible="true"></e-series-labelSettings>
                </e-series>
                <e-series dataSource="@Model.ChartData" name="Poland" xName="Period" width="2" yName="Egy_Growth" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                    <e-series-marker visible="true" height="5" width="5" shape="@Syncfusion.EJ2.Charts.ChartShape.Rectangle" isFilled="true"></e-series-marker>
                    <e-series-labelSettings visible="true"></e-series-labelSettings>
                </e-series>
                <e-series dataSource="@Model.ChartData" name="Mexico" xName="Period" width="2" yName="Ind_Growth" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                    <e-series-marker visible="true" height="7" width="7" shape="@Syncfusion.EJ2.Charts.ChartShape.Pentagon" isFilled="true"></e-series-marker>
                    <e-series-labelSettings visible="true"></e-series-labelSettings>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
```

### src/components/chart-line/chart.cshtml.cs

```cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace EJ2CoreSampleBrowser.Pages.Chart
{
    public class LineModel : PageModel
    {
        public List<LineChartData> ChartData { get; set; }
        public void OnGet()
        {
            ChartData = new List<LineChartData>
            {
                new LineChartData { Period = 2016, Can_Growth = 4.8 , Viet_Growth = 7.8 , Mal_Growth = 14.6, Egy_Growth = 8.9 , Ind_Growth = 19.0 },
                new LineChartData { Period = 2017, Can_Growth = 5.2 , Viet_Growth = 10.3, Mal_Growth = 15.5, Egy_Growth = 10.3, Ind_Growth = 20.0 },
                new LineChartData { Period = 2018, Can_Growth = 6.2 , Viet_Growth = 15.5, Mal_Growth = 15.4, Egy_Growth = 10.8, Ind_Growth = 20.2  },
                new LineChartData { Period = 2019, Can_Growth = 7.8 , Viet_Growth = 17.5, Mal_Growth = 14.4, Egy_Growth = 9.0 , Ind_Growth = 18.4 },
                new LineChartData { Period = 2020, Can_Growth = 9.3 , Viet_Growth = 19.5, Mal_Growth = 11.6, Egy_Growth = 7.9 , Ind_Growth = 16.8 },
            };
        }
        
    }

    public class LineChartData
    {
        public DateTime X;
        public double Y;
        public int Period;
        public double Can_Growth;
        public double Viet_Growth;
        public double Mal_Growth;
        public double Egy_Growth;
        public double Ind_Growth;
    }
   
}

```