CombinationSeries.cshtml

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



        @Html.EJS().Chart("container").Series(series =>
   {

       series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Private Consumption").Width(2).Add();
       series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("xValue").YName("yValue1").DataSource(ViewBag.dataSource).Name("Government Consumption").Width(2).Add();
       series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("xValue").YName("yValue2").DataSource(ViewBag.dataSource).Name("Investment").Width(2).Add();
       series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("xValue").YName("yValue3").DataSource(ViewBag.dataSource).Name("Net Foreign Trade").Width(2).Add();
       series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).XName("xValue").YName("yValue4").Marker(mr => mr.Visible(true).Height(10).Width(10)).DataSource(ViewBag.dataSource).Name("GDP").Width(2).Add();

   }).PrimaryYAxis(px => px.Minimum(-3).Maximum(3).Interval(1).Title("Growth").LabelFormat("{value}B").LineStyle(ls=>ls.Width(0)).MajorTickLines(mt=>mt.Width(0))
       ).PrimaryXAxis(px => px.Interval(1).Title("Years").Interval(1).LineStyle(ls=>ls.Width(0)).MajorGridLines(mg=>mg.Width(0)).MajorTickLines(mt=>mt.Width(0)
       ).LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate45).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
       ).Tooltip(tt => tt.Enable(true)).ChartArea(area => area.Border(br=>br.Color("transparent"))).LegendSettings(lg => lg.Visible(true)).Title("Annual Growth GDP in France").Load("load").Render()

       
    </div>
    <div style="float: right; margin-right: 10px;">
        Source:
        <a href="http://perspectives.pictet.com/2016/01/29/growth-accelerated-markedly-in-france-and-spain-in-2015/" target="_blank">perspectives.pictet.com</a>
    </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*@
}
 @*custom code start*@
@section Meta{
                    <meta name="description" content="This example demonstrates the Multi-Series Chart in ASP.NET MVC Chart control. Explore here for more details."/>
                }
 @*custom code end*@
@section ActionDescription{
    <p>
        This sample illustrates a combination of line and stacked column series. Tooltip shows the information about the data point.
    </p>
}
@section Description{
   <p>
    In this example, you can see how to render and configure the different type of charts. You can render any combination of series in chart except bar.
    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 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 Multi-Series Chart Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of Multi-Series Chart in ASP.NET MVC Chart Control</h1>
                }