StackedLine100.cshtml

@using Syncfusion.EJ2;
@section ControlsSection{
    <div class="control-section">
        <div style="text-align:center">
      @Html.EJS().Chart("container-vertical").Series(series =>
 {
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine100).Marker(mkr => mkr.Visible(true)).XName("x").YName("y").DataSource(ViewBag.dataSource).Name("John").DashArray("5,1").Add();
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine100).Marker(mkr => mkr.Visible(true)).XName("x").YName("y1").DataSource(ViewBag.dataSource).Name("Peter").DashArray("5,1").Add();
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine100).Marker(mkr => mkr.Visible(true)).XName("x").YName("y2").DataSource(ViewBag.dataSource).Name("Steve").DashArray("5,1").Add();
     series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine100).Marker(mkr => mkr.Visible(true)).XName("x").YName("y3").DataSource(ViewBag.dataSource).Name("Charle").DashArray("5,1").Add();
 }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
 .MajorGridLines(mg => mg.Width(0)).MinorGridLines(mg => mg.Width(0))
 .MajorTickLines(mt => mt.Width(0)).
 MinorTickLines(mt => mt.Width(0)).LineStyle(ls => ls.Width(0))
 ).PrimaryYAxis(py => py.Title("Expense").Interval(20).LineStyle(ly => ly.Width(0)).MajorTickLines(mt => mt.Width(0))
       ).Title("Family Expense for Month").ChartArea(area => area.Border(br => br.Width(0))).Tooltip(tt => tt.Enable(true)).Load("load").Render()
        </div>
        <div style="float: right; margin-right: 10px;">
            Source:
            <a href="https://www.cyberagent.co.jp/en/newsinfo/press/detail/id=12026" target="_blank">www.cyberagent.co.jp</a>
        </div>
    </div>

    <style>
        #control-container {
            padding: 0px !important;
        }
        #container {
            display: block;
        }
    </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%" : "80%";
        }
    </script>
}
@section Meta{
                    <meta name="description" content="This example demonstrates the 100% Stacked Line in ASP.NET MVC Chart control. Explore here for more details."/>
                }
@section ActionDescription{
    <p>
        This sample visualizes the family expense data with stacked line series in the chart to identify who spent more money in each category.
        Data points are enhanced with marker and tooltip.
</p>
}
@section Description{
 <p>
    In this example, you can see how to render and configure the stacked line type charts. 100% Stacked Line type charts are used to represent time-dependent data, showing trends in data at equal intervals with stacked values of multiple series.
    You can use <code>dashArray</code>, <code>width</code>, <code>fill</code> properties to customize the line. <code>marker</code> used to represent individual data.</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 stacking column series can be found in this
    <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
</p> 
}
@section Title{
                    <title>ASP.NET MVC Chart 100% Stacked Line Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of 100% Stacked Line in ASP.NET MVC Chart Control</h1>
                }