@Html.EJS().Chart("DirectSection").Margin(x => x.Bottom(-10).Left(0).Right(0)).ChartArea(ca => ca.Border(br => br.Width(0))).PrimaryYAxis(px => px.LineStyle(ls => ls.Width(0)).MajorTickLines(mt => mt.Width(0)).MajorGridLines(mg => mg.Width(0))
).Width("100%").Height("45%").Axes(axis =>
{
axis.Name("Secondary Axis")
.Minimum(0).LabelFormat("{value}%")
.OpposedPosition(true).Add();
}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).CrossesAt(0).Interval(1).MajorTickLines(mt => mt.Width(0)).MajorGridLines(mg => mg.Width(0)).LineStyle(ls => ls.Width(0))
).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
.Marker(mr => mr.DataLabel(dl => dl.Visible(true).EnableRotation(true).Angle(270).Font(ff => ff.FontWeight("600").Color("#252323")).Position(Syncfusion.EJ2.Charts.LabelPosition.Bottom))).XName("x")
.YName("yValue").DataSource(ViewBag.dataDirectOvertime).Name("MMA").Width(2).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
.Marker(mr => mr.DataLabel(dl => dl.Visible(true).EnableRotation(true).Angle(270).Font(ff => ff.FontWeight("600").Color("#252323")).Position(Syncfusion.EJ2.Charts.LabelPosition.Bottom))).XName("x").
YName("yValue1").DataSource(ViewBag.dataDirectOvertime).Name("Act").Width(2).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area)
.Name("Budget")
.XName("x")
.YName("yValue3")
.Width(2)
.DataSource(ViewBag.dataDirectOvertime)
.Opacity(0.6).Add();
series.YAxisName("Secondary Axis").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).XName("x").YName("yValue2").Marker(mr => mr.Visible(true).Height(6).Width(6).DataLabel(dl => dl.Visible(true).EnableRotation(false).Angle(270).Font(ff => ff.FontWeight("600").Color("#252323")).Position(Syncfusion.EJ2.Charts.LabelPosition.Top))).DataSource(ViewBag.dataDirectOvertime).Name("%").Width(2).Add();
}).Tooltip(tt => tt.Enable(true)).Crosshair(cr => cr.Enable(true)).Palettes(ViewBag.seriesColorsDirectOvertime).Render()