crosshair verticalLine

Specifies the appearance of the vertical crosshair line.

Type: Object|Boolean

Within this object you can specify the appearance of the vertical crosshair line. If you need to change only the visibility of the line rather than the other options, you can assign true or false directly to the verticalLine field.

Show Example:
jQuery

In this example, the vertical crosshair line is colored in darkseagreen and displayed in the dashdot dash style. In addition, the opacity of this crosshair line is changed to 0.85.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { 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' }
        ],
        crosshair: {
            enabled: true,
            horizontalLine: { visible: false },
            verticalLine: {
                color: 'darkseagreen',
                dashStyle: 'dashdot',
                opacity: 0.85
            }
        }
    });
});

color

Specifies a color for the vertical crosshair line.

Type: String
Default Value: "#f78119"

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 vertical crosshair line is colored in indianred.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { 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' }
        ],
        crosshair: {
            enabled: true,
            horizontalLine: { visible: false },
            verticalLine: {
                color: 'indianred'
            }
        }
    });
});

dashStyle

Specifies a dash style for the vertical crosshair line.

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

The following values are available.

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

In this example, the vertical crosshair line is displayed in the longDashdot dash style.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { 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' }
        ],
        crosshair: {
            enabled: true,
            horizontalLine: { visible: false },
            verticalLine: {
                dashStyle: 'longDashdot'
            }
        }
    });
});

label

Configures the label that belongs to the vertical crosshair line.

Type: Object

The label of the vertical crosshair line indicates the value of the series point currently focused by the crosshair pointer. The value is indicated on the value axis.

To make the label of the vertical crosshair line visible, assign true to the label | visible field. Additionally, you can change the color of the label's background using the backgroundColor option and specify the font settings of the label's text using the font object.

The options of the crosshair | verticalLine | label object configure only the label that belongs to the vertical crosshair line. The same options may be specified for both the labels at once using the label object declared straight in the crosshair object.

opacity

Specifies the opacity of the vertical crosshair line.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the vertical crosshair line is displayed with the opacity set to 0.8.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { 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' }
        ],
        crosshair: {
            enabled: true,
            horizontalLine: { visible: false },
            verticalLine: {
                opacity: 0.8
            }
        }
    });
});

visible

Specifies whether to show the vertical crosshair line or not.

Type: Boolean
Default Value: true

If the crosshair label is visible, and this option is set to false, the label will not appear.

Show Example:
jQuery

Toggle the check box below to change the visibility of the vertical crosshair line.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:15px;max-width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="showVerticalLineCheckbox" checked> Show the Vertical Crosshair Line
</div>
var dataSource = [
    { 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' }
        ],
        animation: { enabled: false },
        crosshair: {
            enabled: true,
            horizontalLine: { visible: false },
            verticalLine: {
                visible: true
            }
        }
    });

    $('#showVerticalLineCheckbox').change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            crosshair: {
                verticalLine: { visible: this.checked }
            }
        });
    });
});

width

Specifies the width of the vertical crosshair line.

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, the vertical crosshair line is displayed with a 3-pixel width.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { 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' }
        ],
        crosshair: {
            enabled: true,
            horizontalLine: { visible: false },
            verticalLine: {
                width: 3
            }
        }
    });
});