argumentAxis grid

    An object defining the configuration options for the grid lines of an axis in the dxChart widget.

    Type: Object

    Grid lines are the reference lines used to improve the readability of a chart's visual data. Grid lines are drawn from axis ticks throughout the entire chart. The grid object exposes the properties that allow you to specify visibility and appearance settings for axis grid lines. To learn more about axis grid lines and their options, refer to the Grid topic.

    Show Example:
    jQuery

    In this example, the argument axis' grid lines are made visible.

    <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: {
                grid: { visible: true }
            }
        });
    });

    color

    Specifies a color for grid lines.

    Type: String
    Default Value: '#d3d3d3'

    This option supports the following colors.

    • Hexadecimal colors
    • RGB colors
    • RGBA colors (not supported in Internet Explorer 8)
    • Predefined/cross-browser color names
    • Predefined SVG colors (not supported in Internet Explorer 8)
    Show Example:
    jQuery

    In this example, the argument axis' grid lines are colored in teal.

    <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: {
                grid: {
                    visible: true,
                    color: 'teal'
                }
            }
        });
    });
    
    

    opacity

    Specifies an opacity for grid lines.

    Type: Number
    Default Value: undefined

    Show Example:
    jQuery

    In this example, the opacity option of the argument axis grid lines is set to 0.75.

    <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: {
                grid: {
                    visible: true,
                    opacity: 0.75
                }
            }
        });
    });
    
    

    visible

    Indicates whether or not the grid lines of an axis are visible.

    Type: Boolean
    Default Value: false

    Show Example:
    jQuery

    In this example, you can change visibility of the argument axis' grid lines using the check box in the bottom.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    <div id="checkboxContainer" style="height:40px;width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px; text-align:center">
        <input type="checkbox" id="visibleGridCheckbox" checked> Show Argument Axis Gridlines
    </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: {
                grid: { visible: true }
            }
        });
    
        $('#visibleGridCheckbox').change(function () {
            var chart = $('#chartContainer').dxChart('instance');
            chart.option({
                argumentAxis: {
                    grid: { visible: this.checked }
                }
            });
        });
    });
    
    

    width

    Specifies the width of grid lines.

    Type: Number
    Default Value: 1

    Show Example:
    jQuery

    In this example, the width option of the argument axis grid is altered to 3 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: {
                grid: {
                    visible: true,
                    width: 3
                }
            }
        });
    });