Configuration crosshair

An object that specifies the appearance options of the chart crosshair.

Type: Object

Crosshair is a pointer, which is represented by two mutually-crossing lines stretched over the entire chart plot. The crosshair helps you identify the values that lie between the series points more precisely. When enabled, the crosshair center follows the mouse cursor. To enable the crosshair, set the enabled option within the crosshair configuration object to true.

Use the crosshair configuration object to specify options for both of the crosshair lines. To set the options for the horizontal or vertical crosshair line individually, specify these options within the crosshair | horizontalLine or crosshair | verticalLine object correspondingly.

Show Example:
jQuery

In this example, the horizontal and vertical crosshair lines have a different color and dash style. In addition, the opacity of both crosshair lines is changed 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: {
                color: 'skyblue',
                dashStyle: 'longDash'
            },
            verticalLine: {
                color: 'limegreen',
                dashStyle: 'dotdashdot'
            },
            opacity: 0.8
        }
    });
});

color

Specifies a color for the crosshair lines.

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 crosshair lines are colored in deepskyblue.

<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,
            color: 'deepskyblue'
        }
    });
});

dashStyle

Specifies a dash style for the crosshair lines.

Type: String
Default Value: 'solid'
Accepted Values: 'solid'|any combination of 'longDash', 'dash', 'dot'

The following values are available.

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

In this example, the crosshair lines are 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,
            dashStyle: 'longDashdot'
        }
    });
});

enabled

Specifies whether to enable the crosshair or not.

Type: Boolean
Default Value: false
Accepted Values: true|false

Show Example:
jQuery

Toggle the check box below to enable/disable the chart crosshair.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:15px;max-width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="enableCrosshairCheckbox" checked> Enable the Crosshair
</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 }
    });

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

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
            }
        }
    });
});

opacity

Specifies the opacity of the crosshair lines.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the crosshair lines are 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,
            opacity: 0.8
        }
    });
});

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
            }
        }
    });
});

width

Specifies the width of the crosshair lines.

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, the crosshair lines are 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,
            width: 3
        }
    });
});