Bar.cshtml

@using Syncfusion.EJ2;
@section ControlsSection{
    <div class="control-section">
        <div align="center">
            @Html.EJS().Chart("container").Series(
            series => {
                series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).Name("Imports").XName("x").YName("y")
                .Marker(mr => mr.DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top).Font(ff => ff.FontWeight("600").Color("#ffffff"))))
                .DataSource(ViewBag.dataSource).Add();
                series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).Name("Exports").XName("x").YName("y")
                .Marker(mr => mr.DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top).Font(ff => ff.FontWeight("600").Color("#ffffff"))))
                .DataSource(ViewBag.dataSource1).Add();

            }).PrimaryXAxis(
            px => {
                px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg=>mg.Width(0)).
                Title("Food");
            }).PrimaryYAxis(
            py => {
                py.
                LabelFormat("{value}B").
                EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).MajorGridLines(mg=>mg.Width(0));
            }).Tooltip(
            tooltip => {
                tooltip.Enable(true);
            }).ChartArea(area => area.Border(br=>br.Color("transparent"))).Title("UK Trade in Food Groups - 2015").Load("load").Render()       
        
        </div>
        <div style="float: right; margin-right: 10px;">
            Source:
            <a href="https://www.gov.uk/" target='_blank'>www.gov.uk</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 Bar in ASP.NET MVC Chart control. Explore here for more details."/>
                }
@*custom code end*@
@section ActionDescription{
    <p>
        This sample visualizes the data about UK trade in food groups of the year 2015 with default bar series in the chart. 
        Data points values are showed by using data label.
    </p>
}
@section Description{
    <p>
    In this example, you can see how to render and configure the bar type charts. Similar to column charts, but the orientation of y axis is horizontal instead of vertical.
    You can use <code>border</code>, <code>fill</code> properties to customize the data appearance. <code>dataLabel</code> is 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 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 Bar Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of Bar in ASP.NET MVC Chart Control</h1>
                }