DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery 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
$(() => { const chart = $('#chart').dxChart({ dataSource: population, series: [{ argumentField: 'country', }], argumentAxis: { label: { wordWrap: 'none', overlappingBehavior: overlappingModes[0], }, }, legend: { visible: false, }, title: 'Population by Countries', }).dxChart('instance'); $('#overlapping-modes').dxSelectBox({ dataSource: overlappingModes, inputAttr: { 'aria-label': 'Overlapping Mode' }, value: overlappingModes[0], onValueChanged(e) { chart.option('argumentAxis.label.overlappingBehavior', e.value); }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart"></div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Overlapping Modes:</span> <div id="overlapping-modes"></div> </div> </div> </div> </body> </html>
#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; }
const overlappingModes = ['stagger', 'rotate', 'hide', 'none']; const population = [ { country: 'China', val: 1382500000 }, { country: 'India', val: 1314300000 }, { country: 'United States', val: 324789000 }, { country: 'Indonesia', val: 261600000 }, { country: 'Brazil', val: 207332000 }, { country: 'Pakistan', val: 196865000 }, { country: 'Nigeria', val: 188500000 }, { country: 'Bangladesh', val: 162240000 }, { country: 'Russia', val: 146400000 }, { country: 'Japan', val: 126760000 }, { country: 'Mexico', val: 122273000 }, { country: 'Ethiopia', val: 104345000 }, { country: 'Philippines', val: 103906000 }, { country: 'Egypt', val: 92847800 }, ];

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