DevExtreme React - Crosshair

Crosshair is a pointer represented by two mutually-crossing lines stretched over the entire chart plot. The crosshair helps a user identify values of the series points precisely. When enabled, the crosshair follows the cursor and snaps to the nearest series point.

To enable the crosshair, set the crosshair.enabled option to true. To show the crosshair labels, do the same with the crosshair.label.visible option.

$(function() {
    $("#chartContainer").dxChart({
        // ...
        crosshair: {
            enabled: true,
            label: {
                visible: true
            }
        }
    });
});

<dx-chart ... >
    <dxo-crosshair [enabled]="true">
        <dxo-label [visible]="true"></dxo-label>
    </dxo-crosshair>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

For information about all options of the crosshair and its labels, visit the crosshair section of the API reference.

View Demo