Line.cshtml

@using Syncfusion.EJ2;
@section ControlsSection{
    <div class="control-section">
        <div style="text-align:center">

            @Html.EJS().Chart("container").ChartArea(area => area.Border(br=>br.Color("transparent"))).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue")
           .Marker(mr=>mr.Visible(true).Width(10).Height(10)).YName("yValue")
           .DataSource(ViewBag.dataSource).Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2).XName("xValue").YName("yValue1")
           .Marker(mr => mr.Visible(true).Width(10).Height(10))
           .DataSource(ViewBag.dataSource).Name("England").Add();


       }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
       .MajorGridLines(mg=>mg.Width(0))
       .IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years)
       .EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).LabelFormat("y")
       ).PrimaryYAxis(py => py.LabelFormat("{value}%")
       .RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)
       .MajorTickLines(mt=>mt.Width(0))
       .MinorTickLines(mt => mt.Width(0))
       .LineStyle(ls => ls.Width(0)).Interval(20).Minimum(0).Maximum(100)
       ).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()


 
        </div>
    </div>
 @*custom code start*@
    <style>
        #control-container {
            padding: 0px !important;
        }
    </style>
    <script>
        var load = function (args) {
            var selectedTheme = themeName ? themeName : 'Material';
            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast');
            args.chart.width = ej.base.Browser.isDevice ? "100%" : "60%";
        }
    </script>
 @*custom code end*@
}
@section ActionDescription{
    <p>
        This sample visualizes the consumer price data with default line series in the chart. 
        Data points are enhanced with marker and tooltip.
    </p>
}
 @*custom code start*@
@section Meta{
                    <meta name="description" content="This example demonstrates the Line in ASP.NET MVC Chart control. Explore here for more details."/>
                }
 @*custom code end*@
@section Description{
    <p>
        In this example, you can see how to render and configure the line type charts. Line type charts are used to represent time-dependent data, showing trends in data at equal intervals. You can use <code>dashArray</code>, <code>width</code>,
        <code>fill</code> properties to customize the line. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its value.
    </p>
    <p>
        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
    </p>
    <br>
    <p>
        More information on the line series can be found in this
        <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/series/#type">documentation section</a>.
    </p>
}
@section Title{
                    <title>ASP.NET MVC Chart Line Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of Line in ASP.NET MVC Chart Control</h1>
                }