argumentAxis label

Specifies options for argument axis labels.

Type: Object

Axis labels represent textual values for axis ticks, which are not visible by default. To specify custom settings for the argument axis labels, use the label configuration object. To set a common value for labels on all axes, use the commonAxisSettings | label configuration object. This object exposes the properties that can be specified for labels on all axes at once. Note that values specified for the argument axis individually (in the argumentAxis | label object) override values that are specified for all axes (in the commonAxisSettings | label object).

Show Example:
jQuery

In the following example, the argument axis labels are rotated by 45 degrees. In addition, an indent from the argument axis is set to 25 pixels.

<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: {
            type: 'discrete',
            categories: [1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020, 2030, 2040, 2050],
            grid: { visible: true },
            label: { indentFromAxis: 25, rotationAngle: 45 }
        }
    });
});

alignment

Specifies the label's position relative to the tick (grid line).

Type: String
Default Value: undefined
Accepted Values: 'left' | 'center' | 'right'

Show Example:
jQuery

Use the drop-down list in the bottom to change the alignment option of the argument axis labels.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    alignment:
    <select id="dropdownListSelector">
        <option value="center">center</option>
        <option value="right">right</option>
        <option value="left">left</option>
    </select>
</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' }
        ],
        animation: false,
        argumentAxis: {
            visible: true,
            opacity: 0.75,
            label: { alignment: 'center' },
            tick: { visible: true, opacity: 0.75 }
        }
    });

    $('#dropdownListSelector').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            argumentAxis: {
                label: { alignment: this.value }
            }
        });
    });
});

customizeText

Specifies a callback function that returns the text to be displayed by argument axis labels.

Type: function(argument)
Function parameters:
argument: Object
Defines an argument value.
Object structure:
Specifies the axis argument that is currently represented.
valueText: String
Specifies the value of the currently represented argument with applied formatting if the format and precision (optional) properties are specified.
Return Value: String
The text to be displayed by argument axis labels.

When implementing a callback function for this configuration option, use the argument value to be displayed in a label. This value can be accessed using the fields of the object that is passed as the function's parameter. Alternatively, you can use the this object within the function. This object has the same structure as the object passed as a parameter.

For general information on data formatting, refer to the Data Formatting topic.

Show Example:
jQuery

In the example below, an additional text is appended to the argument axis label values using the customizeText option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { time: 10, car1: 110, car2: 104, car3: 112 },
    { time: 20, car1: 130, car2: 124, car3: 132 },
    { time: 30, car1: 143, car2: 135, car3: 141 },
    { time: 40, car1: 157, car2: 157, car3: 160 },
    { time: 50, car1: 169, car2: 166, car3: 174 },
    { time: 60, car1: 181, car2: 180, car3: 185 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'time'
        },
        series: [
            { valueField: 'car1', name: 'Car #1' },
            { valueField: 'car2', name: 'Car #2' },
            { valueField: 'car3', name: 'Car #3' }
        ],
        argumentAxis: {
            label: {
                customizeText: function () {
                    return this.value + ' sec';
                }
            }
        }
    });
});

font

Specifies font options for axis labels.

Type: Object

Show Example:
jQuery

In this example, the text of the argument axis' labels is colored in black and enlarged up to the size of 15 pixels.

<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: {
            label: {
                font: { color: 'black', size: 15 }
            }
        }
    });
});

format

Specifies a format for the text displayed by axis labels.

Type: String
Default Value: ''
Accepted Values: 'currency' | 'fixedPoint' | 'percent' | 'decimal' | 'exponential' | 'largeNumber' | 'thousands' | 'millions' | 'billions' | 'trillions' | 'longDate' | 'longTime' | 'monthAndDay' | 'monthAndYear' | 'quarterAndYear' | 'shortDate' | 'shortTime' | 'millisecond' | 'day' | 'month' | 'quarter' | 'year'

Labels display axis values. You can apply formatting to the label text by using one of the available formats.

NOTE: You can set a precision for a label text when the 'fixedPoint', 'exponential', 'currency' or 'percent' format is applied. Use the precision property to do this.

For details on formatting provided, refer to the Data Formatting topic.

Show Example:
jQuery

The example below represents a chart with formatted argument axis labels. The format of these labels is set to 'fixedPoint' using the format option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { x: 0, y1: 3, y2: 2.5, y3: 5 },
    { x: 0.5, y1: 5, y2: 2.4, y3: 7 },
    { x: 1, y1: 12, y2: 6, y3: 8 },
    { x: 1.5, y1: 15, y2: 14, y3: 11.3 },
    { x: 2, y1: 12, y2: 13, y3: 12 },
    { x: 2.5, y1: 13, y2: 11.5, y3: 9.8 },
    { x: 3, y1: 9, y2: 10, y3: 10.3 },
    { x: 3.5, y1: 7, y2: 11, y3: 6 },
    { x: 4, y1: 5, y2: 4, y3: 3 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'x'
        },
        series: [
        { valueField: 'y1' },
        { valueField: 'y2' },
        { valueField: 'y3' }
        ],
        argumentAxis: {
            label: {
                format: 'fixedPoint',
                precision: 2
            }
        }
    });
});

indentFromAxis

Specifies the spacing between an axis and its labels in pixels.

Type: Number
Default Value: 10

IdentFromAxis ChartJS

overlappingBehavior

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

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

When labels overlap each other, you can specify how these labels will be displayed by setting the overlappingBehavior option. The values accepted by this option depend on whether an axis is horizontal or vertical.

NOTE: By default, the argument axis is horizontal and the value axis is vertical. To swap the axes over, assign true to the rotated property.

For a vertical axis, the following values can be assigned to the overlappingBehavior option.

  • auto
    Resolve the label overlapping automatically
  • ignore
    Leave the labels overlapped
  • enlargeTickInterval
    Leave the labels as they are, but enlarge the axis tick intervals so that the labels do not overlap

Horizontal axis labels have two more modes. These modes are always applied no matter there is a label overlap.

  • 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

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

precision

Specifies a precision for the formatted value displayed in the axis labels.

Type: Number
Default Value: 0

This property's value must be an integer indicating the number of digits to show in the axis values displayed in labels. This property value is used when labels display axis values in one of the following numeric formats: 'fixedPoint', 'exponential', 'currency' or 'percent'. To learn how to set a format for axis values, refer to the format property description.

For general information on data formatting, refer to the Data Formatting topic.

Show Example:
jQuery

The example below represents a chart with formatted argument axis labels. The format of these labels is set to 'fixedPoint' using the format option and the presicion is set to 2 using the precision option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { x: 0, y1: 3, y2: 2.5, y3: 5 },
    { x: 0.5, y1: 5, y2: 2.4, y3: 7 },
    { x: 1, y1: 12, y2: 6, y3: 8 },
    { x: 1.5, y1: 15, y2: 14, y3: 11.3 },
    { x: 2, y1: 12, y2: 13, y3: 12 },
    { x: 2.5, y1: 13, y2: 11.5, y3: 9.8 },
    { x: 3, y1: 9, y2: 10, y3: 10.3 },
    { x: 3.5, y1: 7, y2: 11, y3: 6 },
    { x: 4, y1: 5, y2: 4, y3: 3 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'x'
        },
        series: [
        { valueField: 'y1' },
        { valueField: 'y2' },
        { valueField: 'y3' }
        ],
        argumentAxis: {
            label: {
                format: 'fixedPoint',
                precision: 2
            }
        }
    });
});

rotationAngle

Deprecated

Use the overlappingBehavior | rotationAngle option instead.

Specifies the angle that must be used to rotate the axis labels from their initial position.

Type: Number
Default Value: 0

staggered

Deprecated

Instead use the overlappingBehavior | mode option set to stagger.

Indicates whether to stagger horizontal axis labels in two rows.

Type: Boolean
Default Value: false
Accepted Values: true|false

staggeringSpacing

Deprecated

Use the overlappingBehavior | staggeringSpacing option instead.

Specifies, in pixels, the spacing between staggered rows where horizontal axis labels are located.

Type: Number
Default Value: 5

StaggeringSpacing ChartJS

visible

Indicates whether or not axis labels are visible.

Type: Boolean
Default Value: false
Accepted Values: true|false

Show Example:
jQuery

Use the check box in the bottom to change visibility of the argument axis' labels.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    <input type="checkbox" id="visibleArgumentLabelsCheckbox" checked> Show Argument Axis Labels
</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'
        },
        animation: false,
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ]
    });

    $('#visibleArgumentLabelsCheckbox').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            argumentAxis: {
                label: { visible: this.checked }
            }
        });
    });
});