valueAxis constantLines[]

    Defines an array of the value axis constant lines.

    Type: Array
    Cannot be used in themes.

    A constant line is a straight line that can be used to display, for example, an asymptote of a graph. To display constant lines on a chart, assign an array of objects specifying the options of each constant line to the constantLines field. It is necessary to set the value option within these objects. The other options can be set if required.

    You can customize the appearance of all the value axis constant lines at once. For this purpose, use the valueAxis | constantLineStyle configuration object. Note that the options that are set within the valueAxis | constantLine object override the corresponding options that are set within the valueAxis | constantLineStyle object.

    View Demo

    Show Example:
    jQuery

    In the following example, each value axis constant line is drawn in a different color and 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' }
            ],
            valueAxis: {
                constantLines: [{
                        value: 500,
                        color: 'lightsalmon',
                        width: 1
                    }, {
                        value: 750,
                        color: 'orange',
                        width: 2
                    }, {
                        value: 1000,
                        color: 'orangered',
                        width: 3
                }]
            }
        });
    });

    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, each value axis constant line is drawn in a different 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' }
            ],
            valueAxis: {
                constantLines: [{
                        value: 500,
                        color: 'lightsalmon'
                    }, {
                        value: 750,
                        color: 'orange'
                    }, {
                        value: 1000,
                        color: 'orangered'
                }]
            }
        });
    });

    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, each value axis constant line is drawn in a different dash style.

    <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' }
            ],
            valueAxis: {
                constantLines: [
                    {
                        value: 500,
                        dashStyle: 'dotDash'
                    }, {
                        value: 750,
                        dashStyle: 'longDash'
                    }, {
                        value: 1000
                    }
                ]
            }
        });
    });

    label

    An object defining constant line label options.

    Type: Object

    A constant line label shows information on the constant line. You can configure label appearance using the label object. Within this object, you can set font options, a position and text using corresponding fields. In addition, you can specify the horizontal and vertical alignments for the label.

    You can set the label options for all the value axis constant lines together. For this purpose, use the valueAxis | constantLineStyle | label object. Note that the options that are set within the valueAxis | constantLine | label object override the corresponding options that are set within the valueAxis | constantLineStyle | label object.

    Show Example:
    jQuery

    In the following example, a number of options for the value axis constant line labels are changed. The "500" and "750" labels are aligned to the bottom, while the "1000" label is positioned outside the chart plot. In addition, all the labels are colored differently.

    <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' }
            ],
            valueAxis: {
                constantLines: [
                    {
                        value: 500,
                        label: {
                            verticalAlignment: 'bottom',
                            font: { color: 'lightsalmon' }
                        }
                    }, {
                        value: 750,
                        label: {
                            verticalAlignment: 'bottom',
                            font: { color: 'salmon' }
                        }
                    }, {
                        value: 1000,
                        label: {
                            position: 'outside',
                            font: {
                                color: 'rosybrown',
                                size: 16
                            }
                        }
                    }
                ]
            }
        });
    });

    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

    value

    Specifies a value to be displayed by a constant line.

    Default Value: undefined

    Show Example:
    jQuery

    In this example, the value option is used to specify the values that the value axis constant lines indicate.

    <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' }
            ],
            valueAxis: {
                constantLines: [{ value: 500 }, { value: 750 }, { value: 1000 }]
            }
        });
    });

    width

    Specifies a constant line width in pixels.

    Type: Number
    Default Value: 1

    Show Example:
    jQuery

    In the following example, each value axis constant line has a different 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' }
            ],
            valueAxis: {
                constantLines: [{
                        value: 500,
                        width: 1
                    }, {
                        value: 750,
                        width: 2
                    }, {
                        value: 1000,
                        width: 3
                }]
            }
        });
    });