<div id="chart-demo">
@(Html.DevExtreme().Chart()
.ID("chart")
.Series(s => {
s.Add().ArgumentField("Country").ValueField("Val");
})
.ArgumentAxis(a => a
.Label(l => l
.OverlappingBehavior(OverlappingBehavior.Stagger)
.WordWrap(VizWordWrap.None)
)
)
.Legend(l => l
.Visible(false)
)
.DataSource(new[] {
new { Country = "China", Val = 1382500000 },
new { Country = "India", Val = 1314300000 },
new { Country = "United States", Val = 324789000 },
new { Country = "Indonesia", Val = 261600000 },
new { Country = "Brazil", Val = 207332000 },
new { Country = "Pakistan", Val = 196865000 },
new { Country = "Nigeria", Val = 188500000 },
new { Country = "Bangladesh", Val = 162240000 },
new { Country = "Russia", Val = 146400000 },
new { Country = "Japan", Val = 126760000 },
new { Country = "Mexico", Val = 122273000 },
new { Country = "Ethiopia", Val = 104345000 },
new { Country = "Philippines", Val = 103906000 },
new { Country = "Egypt", Val = 92847800 }
}
).
Title("Population by Countries")
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Overlapping Modes:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] {
OverlappingBehavior.Stagger,
OverlappingBehavior.Rotate,
OverlappingBehavior.Hide,
OverlappingBehavior.None
})
.Value(OverlappingBehavior.Stagger)
.OnValueChanged(@<text>
function(e) {
var chart = $("#chart").dxChart("instance");
chart.option("argumentAxis.label.overlappingBehavior", e.value);
}
</text>)
)
</div>
</div>
</div>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult AxisLabelsOverlapping() {
return View();
}
}
}
#chart {
height: 330px;
max-width: 900px;
margin: auto;
}
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 10px;
}
.option > span {
position: relative;
top: 2px;
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}