Your search did not match any results.

Charts - Resolved Axis Label Overlapping

In this demo, argument axis labels overlap due to their length.

To specify the overlapping behavior, you can use one of the following label.overlappingBehavior modes:

  • none
    Leaves axis labels overlapped.

  • hide
    Hides certain axis labels and leaves more space for the others.

  • rotate
    Rotates axis labels at the angle specified by the rotationAngle property.

  • stagger
    Arranges axis labels into two staggered rows. Use the staggeringSpacing property to specify an empty space between rows.

Backend API
<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) .InputAttr("aria-label", "Overlapping Mode") .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 System; using System.Collections.Generic; using System.Linq; using System.Text.Json; 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; }

All of the values above can be applied to a horizontal axis, but only none and hide can be specified for a vertical axis.