StackedBar100.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.StackingBar100).XName("x").YName("y").DataSource(ViewBag.dataSource).Name("Apple").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100).XName("x").YName("y").DataSource(ViewBag.dataSource1).Name("Orange").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100).XName("x").YName("y").DataSource(ViewBag.dataSource2).Name("Wastage").Add();
           
       }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg=>mg.Width(0))
       ).PrimaryYAxis(py => py.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).MajorTickLines(mt=>mt.Width(0)).LineStyle(ls=>ls.Width(0))
       ).Title("Sales Comparison").ChartArea(area => area.Border(br=>br.Color("transparent"))).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*@
}
   @*custom code start*@
@section Meta{
                    <meta name="description" content="This example demonstrates the 100% Stacked Bar in ASP.NET MVC Chart control. Explore here for more details."/>
                }
   @*custom code end*@
@section ActionDescription{
    <p>
    This sample visualizes percentage of sales comparison for different fruits with default 100% stacked bar series in chart. Legend in the sample shows the information about the series.
</p>
}
@section Description{
    <p>
    In this example, you can see how to render and configure the 100% stacking bar type charts. You can use <code>border</code>,
    <code>fill</code> properties to customize the vertical bar.
</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 100% stacking bar 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 Bar Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of 100% Stacked Bar in ASP.NET MVC Chart Control</h1>
                }