commonAxisSettings constantLineStyle

Specifies the appearance of all the widget's constant lines.

Type: Object

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

To specify styles for the constant lines of the argument and value axis separately, use the constantLineStyle object within the argumentAxis or valueAxis configuration object correspondingly. Note that the options that are set within these objects override the corresponding options that are set within the commonAxisSettings | constantLineStyle object.

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

Show Example:
jQuery

In the following example, several appearance options of the 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' }
        ],
        commonAxisSettings: {
            constantLineStyle: {
                color: 'yellowgreen',
                dashStyle: 'longDash',
                width: 2,
                label: {
                    font: { color: 'lightskyblue' }
                }
            }
        },
        argumentAxis: {
            constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }]
        },
        valueAxis: {
            constantLines: [{ value: 1000 }]
        }
    });
});

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 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' }
        ],
        commonAxisSettings: {
            constantLineStyle: {
                color: 'powderblue'
            }
        },
        argumentAxis: {
            constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }]
        },
        valueAxis: {
            constantLines: [{ value: 1000 }]
        }
    });
});

dashStyle

Specifies a dash style for a constant line.

Type: String
Default Value: 'solid'|any combination of '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 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' }
        ],
        commonAxisSettings: {
            constantLineStyle: {
                dashStyle: 'dotlongDash'
            }
        },
        argumentAxis: {
            constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }]
        },
        valueAxis: {
            constantLines: [{ value: 1000 }]
        }
    });
});

label

An object defining constant line label options.

Type: Object

A constant line label shows information on the constant line. Use the label object to configure all the constant line labels simultaneously. Within this object you can set font options, a position and text using corresponding fields.

To specify styles for the constant line labels of the argument and value axis separately, use the argumentAxis | constantLineStyle | label or valueAxis | constantLineStyle | label configuration object correspondingly. Note that the options that are set within these objects override the corresponding options that are set within 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 or valueAxis | constantLines | label object description.

Show Example:
jQuery

In the following example, the 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' }
        ],
        commonAxisSettings: {
            constantLineStyle: {
                label: {
                    position: 'outside',
                    font: {
                        color: 'rosybrown'
                    }
                }
            }
        },
        argumentAxis: {
            constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }]
        },
        valueAxis: {
            constantLines: [{ value: 1000 }]
        }
    });
});

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 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' }
        ],
        commonAxisSettings: {
            constantLineStyle: {
                width: 2
            }
        },
        argumentAxis: {
            constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }]
        },
        valueAxis: {
            constantLines: [{ value: 1000 }]
        }
    });
});