label overlappingBehavior

Specifies the overlap resolving algorithm to be applied to axis labels.

Type: String|Object
Default Value: 'enlargeTickInterval'
Accepted Values: object|'ignore' | 'stagger' | 'rotate' | 'enlargeTickInterval'

It is recommended that you set the overlappingBehavior configuration property because labels may overlap when resizing the parent window, or when rotating the device that displays the chart.

When labels overlap, you can specify how these labels will be displayed by setting the overlappingBehavior property to one of the following values:

  • ignore
    Leave the labels overlapped.
  • stagger
    Arrange labels in a staggered manner. The spacing between label rows will be 5 pixels.
  • rotate
    Rotate labels so that they are perpendicular to the axis.
  • enlargeTickInterval
    Leave the labels as they are, but enlarge the axis tick intervals so that the labels do not overlap.

To set the custom spacing between staggered rows or the custom rotation angle for the 'stagger' and 'rotate' modes, assign an object to the overlappingBehavior configuration property. Set the object's mode property to the required mode, and set the staggeringSpacing or rotationAngle property to the required value.

Show Example:
jQuery

In the following example, the argument axis tick interval is intentionally set to a very small value so that the labels overlap each other. The overlap is resolved by rotating the labels by 80 degrees.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            tickInterval: 5,
            label: {
                overlappingBehavior: { mode: 'rotate', rotationAngle: 80 }
            }
        }
    });
});

mode

Specifies the overlap resolving algorithm to be applied to series point labels.

Type: String
Default Value: 'enlargeTickInterval'
Accepted Values: 'ignore' | 'stagger' | 'rotate' | 'enlargeTickInterval'

Use this property in the following cases:

  • When you use the 'stagger' algorithm and set the custom spacing between staggered rows. In this instance, set the mode property to 'stagger' and set the staggeringSpacing property to the required value.
  • When you use the 'rotate' algorithm and set a custom rotation angle. In this instance, set the mode property to 'rotate' and set the rotationAngle property to the required angle

Otherwise, it is easier to set the overlappingBehavior configuration property to the required mode directly.

Show Example:
jQuery

In the following example, the argument axis tick interval is intentionally set to a very small value, so that the labels overlap each other. The overlap is resolved by rotating the labels by 90 degrees.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            tickInterval: 5,
            label: {
                overlappingBehavior: { mode: 'rotate', rotationAngle: 90 }
            }
        },
        commonAxisSettings: {
            grid: { visible: true }
        }
    });
});

rotationAngle

Specifies the angle used to rotate axis labels to resolve overlap.

Type: Number
Default Value: 90

Show Example:
jQuery

In the following example, the argument axis tick interval is intentionally set to a very small value, so that the labels overlap each other. The overlap is resolved by rotating the labels by 45 degrees.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            tickInterval: 5,
            label: {
                overlappingBehavior: { mode: 'rotate', rotationAngle: 45 }
            }
        },
        commonAxisSettings: {
            grid: { visible: true }
        }
    });
});

staggeringSpacing

Specifies the spacing that must be set between staggered rows when the 'stagger' algorithm is applied to resolve label overlap.

Type: Number
Default Value: 5

Show Example:
jQuery

In the following example, the argument axis tick interval is intentionally set to a very small value, so that the labels overlap each other. The overlap is resolved by staggering the labels with 3 pixel spacing.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            tickInterval: 5,
            label: {
                overlappingBehavior: { mode: 'stagger', staggeringSpacing: 3 }
            }
        },
        commonAxisSettings: {
            grid: { visible: true }
        }
    });
});