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 labels' 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").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line',
            closed: false
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            label: { indentFromAxis: 25 }
        }
    });
});

customizeHint

Specifies the text for a hint that appears when a user hovers the mouse pointer over a label on the argument axis.

Type: function(argument)
Function parameters:
argument: Object
An object providing access to the value displayed by the axis label.
Object structure:
The value as it is specified in the data source.
valueText: String
The value with applied formatting.
Return Value: String
The text to be displayed in the hint.

This option accepts a function that must return the required text. When implementing this function, use its parameter to access the value displayed by the axis label.

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").dxPolarChart({
        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

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.
Return Value: String
The text to be displayed by argument axis labels.
Cannot be used in themes.

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, 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").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'time',
            type: 'line'
        },
        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 a format for the text 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.
  • Data Formatting - shows how to apply formatting to various widget elements.
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, y: 3 },
    { x: 0.5, y: 5 },
    { x: 1, y: 12 },
    { x: 1.5, y: 15 },
    { x: 2, y: 12 },
    { x: 2.5, y: 13 },
    { x: 3, y: 9 },
    { x: 3.5, y: 7 },
    { x: 4, y: 5 }
];

$(function () {
    $("#chartContainer").dxPolarChart({
        dataSource: dataSource,
        series: [
            {
                argumentField: 'x',
                valueField: 'y',
                type: 'line'
            }
        ],
        legend: { visible: false },
        argumentAxis: {
            label: {
                format: {
                    type: 'fixedPoint',
                    precision: 2
                }
            }
        }
    });
});

indentFromAxis

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

Type: Number
Default Value: 5

IdentFromAxis ChartJS

overlappingBehavior

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

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

When labels overlap each other, you can specify how these labels will be displayed by setting the overlappingBehavior option.

The following values are possible.

  • 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.

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

Indicates whether or not axis labels are visible.

Type: Boolean
Default Value: true

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').dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line'
        },
        animation: false,
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ]
    });

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