crosshair horizontalLine

Specifies the appearance of the horizontal crosshair line.

Type: Object|Boolean

Within this object you can specify the appearance of the horizontal 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 horizontalLine field.

Show Example:
jQuery

In this example, the horizontal 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,
            verticalLine: { visible: false },
            horizontalLine: {
                color: 'darkseagreen',
                dashStyle: 'dashdot',
                opacity: 0.85
            }
        }
    });
});

color

Specifies a color for the horizontal crosshair line.

Type: String
Default Value: '#c6c6c6'

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 horizontal crosshair line is colored in darkslategray.

<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,
            verticalLine: { visible: false },
            horizontalLine: {
                color: 'darkslategray'
            }
        }
    });
});

dashStyle

Specifies a dash style for the horizontal crosshair line.

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

The following values are available.

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

In this example, the horizontal 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,
            verticalLine: { visible: false },
            horizontalLine: {
                dashStyle: 'longDashdot'
            }
        }
    });
});

opacity

Specifies the opacity of the horizontal crosshair line.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the horizontal 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,
            verticalLine: { visible: false },
            horizontalLine: {
                opacity: 0.8
            }
        }
    });
});

visible

Specifies whether or not to show the horizontal crosshair line.

Type: Boolean
Default Value: true

Show Example:
jQuery

Toggle the check box below to change the visibility of the horizontal 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="showHorizontalLineCheckbox" checked> Show the Horizontal 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,
            verticalLine: { visible: false },
            horizontalLine: {
                visible: true
            }
        }
    });

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

width

Specifies the width of the horizontal crosshair line.

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, the horizontal 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,
            verticalLine: { visible: false },
            horizontalLine: {
                width: 3
            }
        }
    });
});