label overlappingBehavior

    Decides how to arrange axis labels when there is not enough space to keep all of them.

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

    When axis labels overlap each other, you can rearrange them by setting the overlappingBehavior option. Depending on whether an axis is horizontal or vertical, this option accepts different values.

    NOTE: Unless the rotated option is set to true, the argument axis is horizontal and the value axis is vertical.

    The following values can be specified for both horizontal and vertical axes.

    • enlargeTickInterval
      Enlarges the tick interval and, consequently, the interval between axis labels.
    • ignore
      Leaves axis labels as they are - overlapped by each other.

    The following values can be specified for horizontal axes only.

    • rotate
      Rotates axis labels through the angle specified by the rotationAngle option.
    • stagger
      Arranges axis labels in two rows in a staggering manner. An empty space between the rows is specified by the staggeringSpacing option.

    NOTE: When specified, "rotate" and "stagger" apply even if axis labels do not overlap each other.

    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

    Decides how to arrange axis labels when there is not enough space to keep all of them.

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

    This option accepts one of the following values.

    • enlargeTickInterval
      Enlarges the tick interval and, consequently, the interval between axis labels.
    • ignore
      Leaves axis labels as they are - overlapped by each other.
    • rotate
      Rotates axis labels through the angle specified by the rotationAngle option.
    • stagger
      Arranges axis labels in two rows in a staggering manner. An empty space between the rows is specified by the staggeringSpacing option.

    Alternatively, you can assign any of these values directly to the overlappingBehavior option.

    rotationAngle

    Specifies the rotation angle of axis labels. Applies only if the mode option is "rotate".

    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

    Adds a pixel-measured empty space between two staggered rows of axis labels. Applies only if the mode option is "stagger".

    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 }
            }
        });
    });