argumentAxis label

    Configures the labels of the argument axis.

    Type: Object

    Axis labels display the values of major axis ticks.

    DevExtreme HTML5 Charts AxisLabels

    See Also
    • commonAxisSettings | label - configures the labels of all axes in the widget.

    alignment

    Aligns axis labels in relation to ticks.

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

    customizeHint

    Specifies the hint that appears when a user points to an axis label.

    Type: function(argument)
    Function parameters:
    argument: Object
    Contains the argument displayed by an axis label.
    Object structure:
    The raw argument from the data source.
    valueText: String
    The formatted argument.
    Return Value: String
    The text to be displayed in the hint.

    DevExtreme HTML5 Charts AxisLabelHint

    NOTE: The value and valueText fields are also exposed by the this object.

    Show Example:
    jQuery

    In the example below, the "Rus..." argument axis label is detailed in a hint. This is performed using the label's customizeHint option.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { state: "Germany", young: 6.7, middle: 28.6, older: 5.1 },
        { state: "Japan", young: 9.6, middle: 43.4, older: 9 },
        { state: "Rus...", young: 13.5, middle: 49, older: 5.8 },
        { state: "USA", young: 30, middle: 90.3, older: 14.5 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: "state",
                type: "stackedBar"
            },
            series: [
                { valueField: "young", name: "0-14" },
                { valueField: "middle", name: "15-64" },
                { valueField: "older", name: "65 and older" }
            ],
            legend: {
                verticalAlignment: "bottom",
                horizontalAlignment: "center",
                itemTextPosition: 'top'
            },
            argumentAxis: {
                label: {
                    customizeHint: function (arg) {
                        if (arg.value == 'Rus...') return "Russian Federation";
                    }
                }
            },
            title: "Male Age Structure",
            tooltip: {
                enabled: true,
                location: "edge",
                customizeText: function () {
                    return this.seriesName + " years: " + this.valueText;
                }
            }
        });
    });
    

    customizeText

    Customizes the text displayed by axis labels.

    Type: function(argument)
    Function parameters:
    argument: Object
    Contains the argument displayed by an axis label.
    Object structure:
    The raw argument from the data source.
    valueText: String
    The formatted argument.
    Return Value: String
    The text to be displayed by the axis label.
    Cannot be used in themes.

    NOTE: The value and valueText fields are also exposed by the this object.

    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

    format

    Specifies the format of the arguments displayed by axis labels.

    Type: Format
    Default Value: undefined

    NOTE: DevExtreme widgets provide a wide choice of predefined formats. If you are, however, going to use custom formats, link the Globalize library to your project. Learn how to do this from the Installation topic.

    See Also
    • format - provides a comprehensive overview of formatting capabilities.
    • argumentAxis | label | customizeText - customizes the text displayed by axis labels.
    • Data Formatting - shows how to apply formatting to various widget elements.

    indentFromAxis

    Adds a pixel-measured empty space between an axis and its labels.

    Type: Number
    Default Value: 10

    DevExtreme HTML5 Charts IdentFromAxis

    See Also

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

    precision

    Deprecated

    Use the argumentAxis | label | format | precision option instead.

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

    Type: Number
    Default Value: undefined

    visible

    Shows/hides axis labels.

    Type: Boolean
    Default Value: true