valueAxis label

    Specifies options for value axis labels.

    Type: Object

    Axis labels represent textual values for axis ticks, which are not visible by default. To specify custom settings for the value axis labels, use the label configuration object. If you need 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 simultaneously. Note that a value specified for the value axis individually (in the valueAxis | label object) overrides the value that is specified in the commonAxisSettings | label object.

    Show Example:
    jQuery

    In this example, additional text is added to the value axis labels using the customizeText option.

    <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' }
            ],
            valueAxis: {
                label: {
                    customizeText: function (value) {
                        return value.value + ' mln'
                    }
                },
                visible: true
            }
        });
    });

    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 menu at the bottom to change the value axis' alignment option.

    <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="right">right</option>
            <option value="left">left</option>
            <option value="center">center</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,
            valueAxis: {
                visible: true,
                opacity: 0.75,
                label: { alignment: 'right' },
                tick: { visible: true, opacity: 0.75 }
            }
        });
    
        $('#dropdownListSelector').change(function () {
            var chart = $('#chartContainer').dxChart('instance');
            chart.option({
                valueAxis: {
                    label: { alignment: this.value }
                }
            });
        });
    });

    customizeHint

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

    Type: function(axisValue)
    Function parameters:
    axisValue: 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 format and precision.
    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.

    customizeText

    Specifies a callback function that returns the text to be displayed in value axis labels.

    Type: function(axisValue)
    Function parameters:
    axisValue: Object
    Defines an axis value.
    Object structure:
    Specifies the axis value that is currently represented.
    valueText: String
    Specifies the currently represented axis value with an applied format, if the format and precision (optional) properties are specified.
    Return Value: String
    The text to be displayed by a value axis label.
    Cannot be used in themes.

    When implementing a callback function for this configuration option, use the 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 added to the value 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: 159, 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' }
            ],
            valueAxis: {
                visible: true,
                label: {
                    customizeText: function () {
                        return this.value + ' mph';
                    }
                }
            }
        });
    });
    
    

    font

    Specifies font options for axis labels.

    Type: Object

    Show Example:
    jQuery

    In this example, the font color of the value axis label text is black, and the font size is increased to 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' }
            ],
            valueAxis: {
                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, refer to the Data Formatting topic.

    Show Example:
    jQuery

    The example below shows a chart with formatted value 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' }
            ],
            valueAxis: {
                axisDivisionFactor: 15,
                visible: true,
                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: 'enlargeTickInterval'
    Accepted Values: '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.

    • 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 regardless of there being a label overlap or not.

    • 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 chart is rotated and the value 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 2 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' }
            ],
            rotated: true,
            valueAxis: {
                tickInterval: 100,
                label: {
                    overlappingBehavior: {
                        mode: 'stagger',
                        staggeringSpacing: 2
                    }
                }
            }
        });
    });

    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 value 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' }
            ],
            valueAxis: {
                visible: true,
                label: {
                    format: 'fixedPoint',
                    precision: 2
                }
            }
        });
    });
    
    

    visible

    Indicates whether or not axis labels are visible.

    Type: Boolean
    Default Value: true

    Show Example:
    jQuery

    Use the check box at the bottom to change the visibility of the value 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="visibleValueLabelsCheckbox" checked> Show Value 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' }
            ]
        });
    
        $('#visibleValueLabelsCheckbox').change(function () {
            var chart = $('#chartContainer').dxChart('instance');
            chart.option({
                valueAxis: {
                    label: { visible: this.checked }
                }
            });
        });
    });