argumentAxis constantLineStyle

    Specifies the appearance options for the constant lines of the argument axis.

    Type: Object

    Use this object to set the appearance options for the constant lines of the argument axis. For example, you can change the color, dash style and width of the line using the corresponding options or define the look of the labels using the label object.

    To specify a style for the constant lines of the argument and value axes simultaneously, use the commonAxisSettings | constantLineStyle object.

    In addition, you can define the appearance of each constant line individually. For more information, refer to the constantLines object description.

    NOTE: The options specified within the argumentAxis | constantLines object override the corresponding options specified within the argumentAxis | constantLineStyle object. In turn, the options specified within the argumentAxis | constantLineStyle object override the options specified within the commonAxisSettings | constantLineStyle object.

    Show Example:
    jQuery

    In the following example, several appearance options of the argument axis constant lines are changed. These lines are drawn in the yellowgreen color with a 2-pixel width. The dash style of the lines is changed to longDash. In addition, the constant line labels are colored in lightskyblue.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { 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 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
                constantLineStyle: {
                    color: 'yellowgreen',
                    dashStyle: 'longDash',
                    width: 2,
                    label: {
                        font: { color: 'lightskyblue' }
                    }
                }
            }
        });
    });

    color

    Specifies a color for a constant line.

    Type: String
    Default Value: '#000000'

    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 constant lines are drawn in the powderblue color using the color option.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { 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 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
                constantLineStyle: {
                    color: 'powderblue'
                }
            }
        });
    });

    dashStyle

    Specifies a dash style for a constant line.

    Type: String
    Default Value: 'solid'|'longDash'|'dash'|'dot'

    The following values are available.

    • solid
      Displays a solid, continuous constant line.
    • longDash
      Displays a constant line using long dashes.
    • dash
      Displays a constant line using dashes.
    • dot
      Displays a constant line using dots.
    • Any combination of 'longDash', 'dash' and 'dot'
      Displays a constant line by repeating the specified combination. For instance, 'dashdotdash'.
    Show Example:
    jQuery

    In the following example, the argument axis constant lines are drawn in the dotlongDash style using the dashStyle option.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { 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 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
                constantLineStyle: {
                    dashStyle: 'dotlongDash'
                }
            }
        });
    });

    label

    An object defining constant line label options.

    Type: Object

    This object configures all the constant line labels of the argument axis. A constant line label shows information on the constant line. Within the label object, you can configure position, text and font options using corresponding fields. In addition, you can specify the horizontal and vertical alignments for the label.

    To configure styles for the constant line labels of the argument and value axis simultaneously, use the commonAxisSettings | constantLineStyle | label object.

    In addition, you can define the appearance of each constant line label individually. For more information, refer to the argumentAxis | constantLines | label object description.

    NOTE: The options specified within the argumentAxis | constantLines | label object override the corresponding options specified within the argumentAxis | constantLineStyle | label object. In turn, the options specified within the argumentAxis | constantLineStyle | label object override the options specified within the commonAxisSettings | constantLineStyle | label object.

    Show Example:
    jQuery

    In the following example, the argument axis constant line labels are positioned outside the chart. In addition, these labels are drawn in the rosybrown color.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { 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 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
                constantLineStyle: {
                    label: {
                        position: 'outside',
                        font: {
                            color: 'rosybrown'
                        }
                    }
                }
            }
        });
    });

    paddingLeftRight

    Specifies the space between the constant line label and the left/right side of the constant line.

    Type: Number
    Default Value: 10

    Depending on the label's horizontalAlignment option, the value assigned to the paddingLeftRight field is applied to the right or left side of the constant line. If the horizontalAlignment option is set to 'left', the specified padding is applied to the left side of the constant line. If the horizontalAlignment option is set to 'right', the specified padding is applied to the right side of the constant line. If the horizontalAlignment option is set to 'center', the paddingLeftRight field value is ignored, and the padding is calculated automatically.

    ConstantLinePadding ChartJS

    paddingTopBottom

    Specifies the space between the constant line label and the top/bottom side of the constant line.

    Type: Number
    Default Value: 10

    Depending on the label's verticalAlignment option, the value assigned to the paddingTopBottom field is applied to the top or bottom side of the constant line. If the verticalAlignment option is set to 'top', the specified padding is applied to the top side of the constant line. If the verticalAlignment option is set to 'bottom', the specified padding is applied to the bottom side of the constant line. If the verticalAlignment option is set to 'center', the paddingLeftRight field value is ignored, and the padding is calculated automatically.

    ConstantLinePadding ChartJS

    width

    Specifies a constant line width in pixels.

    Type: Number
    Default Value: 1

    Show Example:
    jQuery

    In this example, the argument axis constant lines are drawn with a 2-pixel width.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { 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 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
                constantLineStyle: {
                    width: 2
                }
            }
        });
    });