argumentAxis constantLines[]

Defines an array of the argument axis constant lines.

Type: Array

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 argument axis constant lines at once. For this purpose, use the argumentAxis | constantLineStyle configuration object. Note that the options that are set within the argumentAxis | constantLine object override the corresponding options that are set within the argumentAxis | constantLineStyle object.

Show Example:
jQuery

In the following example, each argument 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' }
        ],
        argumentAxis: {
            constantLines: [{
                    value: 1955,
                    color: 'lightsalmon',
                    width: 1
                }, {
                    value: 1992,
                    color: 'orange',
                    width: 2
                }, {
                    value: 2013,
                    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 argument 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' }
        ],
        argumentAxis: {
            constantLines: [{
                    value: 1955,
                    color: 'lightsalmon'
                }, {
                    value: 1992,
                    color: 'orange'
                }, {
                    value: 2013,
                    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 argument axis constant line is drawn in different dash styles.

<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,
                    dashStyle: 'dotDash'
                }, {
                    value: 1992,
                    dashStyle: 'longDash'
                }, {
                    value: 2013
                }
            ]
        }
    });
});

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 argument axis constant lines simultaneously. For this purpose, use the argumentAxis | constantLineStyle | label object. Note that the options that are set within the argumentAxis | constantLine | label object override the corresponding options that are set within the argumentAxis | constantLineStyle | label object.

Show Example:
jQuery

In the following example, a number of options for the argument axis constant line labels are changed. The "1955" and "1992" labels are aligned to the left, while the "2013" label is positioned outside the chart plot and displayed with the altered text. In addition, all 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' }
        ],
        argumentAxis: {
            constantLines: [
                {
                    value: 1955,
                    label: {
                        horizontalAlignment: 'left',
                        font: { color: 'lightsalmon' }
                    }
                }, {
                    value: 1992,
                    label: {
                        horizontalAlignment: 'left',
                        font: { color: 'salmon' }
                    }
                }, {
                    value: 2013,
                    label: {
                        position: 'outside',
                        text: 'now',
                        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 argument 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' }
        ],
        argumentAxis: {
            constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }]
        }
    });
});

width

Specifies a constant line width in pixels.

Type: Number
Default Value: 1

Show Example:
jQuery

In the following example, each argument 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' }
        ],
        argumentAxis: {
            constantLines: [{
                    value: 1955,
                    width: 1
                }, {
                    value: 1992,
                    width: 2
                }, {
                    value: 2013,
                    width: 3
            }]
        }
    });
});