StackedColumn100.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.StackingColumn100).XName("x").YName("y").DataSource(ViewBag.dataSource).Name("UK").Add();
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100).XName("x").YName("y1").DataSource(ViewBag.dataSource).Name("Germany").Add();
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100).XName("x").YName("y2").DataSource(ViewBag.dataSource).Name("France").Add();
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100).XName("x").YName("y3").DataSource(ViewBag.dataSource).Name("Italy").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)).LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate45).EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
       ).PrimaryYAxis(py => py.Interval(20).MajorTickLines(mt => mt.Width(0)).
       MinorTickLines(mt => mt.Width(0)).LineStyle(ls => ls.Width(0)).RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Title("GDP (%) per Annum")
       ).Title("Gross Domestic Product Growth").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 Column in ASP.NET MVC Chart control. Explore here for more details."/>
                }
   @*custom code end*@
@section ActionDescription{
   <p>
    This sample visualizes percentage of domestic product growth of four different countries with default 100% stacked column 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 column 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 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 Column Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of 100% Stacked Column in ASP.NET MVC Chart Control</h1>
                }