Vue Charts - Crosshair

The DevExtreme Chart component ships with integrated crosshair support (vertical and horizontal lines centered on a data point). When enabled, the crosshair follows the cursor and snaps to the nearest series point. To configure crosshair settings, specify the crosshair object.

Backend API

<template> <DxChart id="chart" :data-source="countriesInfo" > <DxCommonSeriesSettings type="spline" argument-field="country" > <DxPoint hover-mode="allArgumentPoints"/> </DxCommonSeriesSettings> <DxSeries v-for="source in energySources" :key="source.value" :value-field="source.value" :name="source.name" /> <DxArgumentAxis :value-margins-enabled="false" discrete-axis-division-mode="crossLabels" > <DxGrid :visible="true"/> </DxArgumentAxis> <DxCrosshair :enabled="true" :width="3" color="#949494" dash-style="dot" > <DxLabel :visible="true" background-color="#949494" > <DxFont :size="12" color="#fff" /> </DxLabel> </DxCrosshair> <DxLegend :equal-column-width="true" vertical-alignment="bottom" horizontal-alignment="center" item-text-position="bottom" /> <DxTitle text="Energy Consumption in 2024"> <DxSubtitle text="(Millions of Tons, Oil Equivalent)"/> </DxTitle> <DxExport :enabled="true"/> <DxTooltip :enabled="true"/> </DxChart> </template> <script setup lang="ts"> import { DxChart, DxCommonSeriesSettings, DxSeries, DxArgumentAxis, DxGrid, DxCrosshair, DxExport, DxLegend, DxPoint, DxLabel, DxFont, DxTitle, DxSubtitle, DxTooltip, } from 'devextreme-vue/chart'; import { energySources, countriesInfo } from './data.ts'; </script> <style> #chart { height: 440px; } </style>

export const energySources = [ { value: 'hydro', name: 'Hydro-electric' }, { value: 'oil', name: 'Oil' }, { value: 'gas', name: 'Natural gas' }, { value: 'coal', name: 'Coal' }, { value: 'nuclear', name: 'Nuclear' }, ]; export const countriesInfo = [{ country: 'USA', hydro: 60, oil: 940, gas: 910, coal: 210, nuclear: 230, }, { country: 'Japan', hydro: 20, oil: 170, gas: 85, coal: 120, nuclear: 35, }, { country: 'India', hydro: 40, oil: 260, gas: 60, coal: 620, nuclear: 10, }, { country: 'Germany', hydro: 7, oil: 110, gas: 85, coal: 35, nuclear: 5, }, { country: 'Canada', hydro: 90, oil: 110, gas: 120, coal: 5, nuclear: 20, }, { country: 'Brazil', hydro: 110, oil: 150, gas: 50, coal: 15, nuclear: 5, }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

This demo configures the following crosshair properties:

color
Specifies line color.
width
Configures line width.
dashStyle
Specifies line style.
label
Configures labels (text and appearance).

To override settings for each line individually, configure crosshair.horizontalLine and crosshair.verticalLine objects.