Cross hair and track ball in React Chart component

3 Feb 202624 minutes to read

The crosshair feature displays vertical and horizontal guide lines that intersect at the mouse or touch position, helping to identify the corresponding axis values precisely.

Crosshair lines can be enabled by setting the enable property in the crosshair settings.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries, Crosshair } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime' };
    const crosshair = { enable: true };
    const marker = { visible: true };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} crosshair={crosshair} title='Sales History of Product X'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Crosshair, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product X' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,CrosshairSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, LineSeries,  Crosshair}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const crosshair: CrosshairSettingsModel = { enable: true };
  const marker = { visible: true };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      crosshair={crosshair}
      title='Sales History of Product X'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Crosshair, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product X' type='Line'
          marker={marker} >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

datasource.tsx

export let data: Object[] = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

Tooltip for axis

Axis tooltip labels can be enabled by setting the enable property of crosshairTooltip in the corresponding axis. This tooltip displays the current axis value at the crosshair position.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries, Crosshair } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', crosshairTooltip: { enable: true } };
    const primaryyAxis = { crosshairTooltip: { enable: true } };
    const crosshair = { enable: true };
    const marker = { visible: true };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} crosshair={crosshair} title='Sales History of Product X'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Crosshair, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product X' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,CrosshairSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, LineSeries,  Crosshair}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', crosshairTooltip: { enable: true } };
  const primaryyAxis: AxisModel = { crosshairTooltip: { enable: true } };
  const crosshair: CrosshairSettingsModel = { enable: true };
  const marker = { visible: true };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      crosshair={crosshair}
      title='Sales History of Product X'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Crosshair, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product X' type='Line'
          marker={marker} >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

datasource.tsx

export let data: Object[] = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

Customization

The fill and textStyle properties of crosshairTooltip are used to customize the background color and font style of the crosshair label.
The color and width of the crosshair lines can be customized by using the line property in the crosshair settings.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries, Crosshair } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'DateTime', crosshairTooltip: { enable: true, fill: 'green' } };
    const primaryyAxis = { crosshairTooltip: { enable: true, fill: 'green' } };
    const crosshair = { enable: true, line: { width: 2, color: 'green' } };
    const marker = { visible: true };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} crosshair={crosshair} title='Sales History of Product X'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Crosshair, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product X' type='Line' marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Product X' type='Line' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,CrosshairSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, LineSeries,  Crosshair}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime', crosshairTooltip: { enable: true, fill: 'green' } };
  const primaryyAxis: AxisModel = { crosshairTooltip: { enable: true, fill: 'green' } };
  const crosshair: CrosshairSettingsModel = { enable: true, line: { width: 2, color: 'green' } };
  const marker = { visible: true };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      crosshair={crosshair}
      title='Sales History of Product X'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Crosshair, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='Product X' type='Line'
          marker={marker} >
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='Product X' type='Line'
          marker={marker} >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

datasource.tsx

export let data: Object[] = [
    { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
    { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
    { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
    { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
    { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
    { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
    { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
    { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];

Note: To use crosshair feature, we need to inject Crosshair module into the services.

Snap to data

Enabling the snapToData property in the crosshair aligns it with the nearest data point instead of following the exact mouse position.
By enabling the snapToData property, the crosshair snaps to the nearest data point instead of following the exact mouse position. This improves accuracy when inspecting values.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, LineSeries, Crosshair } from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis = { 
    title: 'Years',
    minimum: new Date(2000, 1, 1), 
    maximum: new Date(2006, 2, 11),
    intervalType: 'Years',
    valueType: 'DateTime',
    lineStyle: { width: 0 },
    majorGridLines: { width: 0 },
    edgeLabelPlacement: 'Shift'
  };
  const primaryyAxis = { 
    title: 'Revenue in Millions',
    labelFormat: '{value}M',
    majorTickLines: { width: 0 },
    minimum: 10, maximum: 60,
    lineStyle: { width: 0 }
  };
  const crosshair = { 
    enable: true, 
    lineType: 'Horizontal', 
    snapToData: true
  };
  const tooltip = { 
    enable: true, 
    shared: true, 
    format: '${series.name} : ${point.x} : ${point.y}' 
  };
  const marker = { visible: true };
  const legendSettings = { visible: false };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      crosshair={crosshair}
      tooltip={tooltip}
      legendSettings={legendSettings}
      title='Average Sales per Person'>
      <Inject services={[LineSeries, Legend, Tooltip, Crosshair, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='John' type='Line' width={2} marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, CrosshairSettingsModel, TooltipSettingsModel, LegendSettingsModel, Legend, DateTime, Tooltip, LineSeries, Crosshair } from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { 
    title: 'Years',
    minimum: new Date(2000, 1, 1), 
    maximum: new Date(2006, 2, 11),
    intervalType: 'Years',
    valueType: 'DateTime',
    lineStyle: { width: 0 },
    majorGridLines: { width: 0 },
    edgeLabelPlacement: 'Shift'
  };
  const primaryyAxis: AxisModel = { 
    title: 'Revenue in Millions',
    labelFormat: '{value}M',
    majorTickLines: { width: 0 },
    minimum: 10, maximum: 60,
    lineStyle: { width: 0 }
  };
  const crosshair: CrosshairSettingsModel = { 
    enable: true, 
    lineType: 'Horizontal', 
    snapToData: true
  };
  const tooltip: TooltipSettingsModel = { 
    enable: true, 
    shared: true, 
    format: '${series.name} : ${point.x} : ${point.y}' 
  };
  const marker = { visible: true };
  const legendSettings: LegendSettingsModel = { visible: false };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      crosshair={crosshair}
      tooltip={tooltip}
      legendSettings={legendSettings}
      title='Average Sales per Person'>
      <Inject services={[LineSeries, Legend, Tooltip, Crosshair, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='John' type='Line' width={2} marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let data = [
    { x: new Date(2000, 2, 11), y: 15 },
    { x: new Date(2000, 9, 14), y: 20 },
    { x: new Date(2001, 2, 11), y: 25 },
    { x: new Date(2001, 9, 16), y: 21 },
    { x: new Date(2002, 2, 7),  y: 13 },
    { x: new Date(2002, 9, 7),  y: 18 },
    { x: new Date(2003, 2, 11), y: 24 },
    { x: new Date(2003, 9, 14), y: 23 },
    { x: new Date(2004, 2, 6),  y: 19 },
    { x: new Date(2004, 9, 6),  y: 31 },
    { x: new Date(2005, 2, 11), y: 39 },
    { x: new Date(2005, 9, 11), y: 50 },
    { x: new Date(2006, 2, 11), y: 24 }
];

datasource.tsx

export let data: Object[] = [
    { x: new Date(2000, 2, 11), y: 15 },
    { x: new Date(2000, 9, 14), y: 20 },
    { x: new Date(2001, 2, 11), y: 25 },
    { x: new Date(2001, 9, 16), y: 21 },
    { x: new Date(2002, 2, 7),  y: 13 },
    { x: new Date(2002, 9, 7),  y: 18 },
    { x: new Date(2003, 2, 11), y: 24 },
    { x: new Date(2003, 9, 14), y: 23 },
    { x: new Date(2004, 2, 6),  y: 19 },
    { x: new Date(2004, 9, 6),  y: 31 },
    { x: new Date(2005, 2, 11), y: 39 },
    { x: new Date(2005, 9, 11), y: 50 },
    { x: new Date(2006, 2, 11), y: 24 }
];

Trackball

The trackball feature tracks the data point closest to the mouse or touch position. A trackball marker highlights the nearest point, and the trackball tooltip displays detailed information about that point.

To use trackball feature, we need to inject Crosshair and Tooltip module into the services.
Trackball functionality can be enabled by setting the enable property of the crosshair to true and the shared property of the tooltip to true.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries, Crosshair } from '@syncfusion/ej2-react-charts';
import { trackData } from './datasource';
function App() {
    const primaryxAxis = {
        title: 'Years', minimum: new Date(2000, 1, 1),
        maximum: new Date(2006, 2, 11), intervalType: 'Years', valueType: 'DateTime'
    };
    const primaryyAxis = { crosshairTooltip: { enable: true, fill: 'green' } };
    const crosshair = { enable: true, lineType: 'Vertical' };
    const marker = { visible: true };
    const tooltip = { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} crosshair={crosshair} tooltip={tooltip} title='Average Sales per Person'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Crosshair, DateTime]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={trackData} xName='x' yName='y' name='John' type='Line' width={2} marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={trackData} xName='x' yName='y1' name='Andrew' type='Line' width={2} marker={marker}></SeriesDirective>
        <SeriesDirective dataSource={trackData} xName='x' yName='y2' name='Thomas' type='Line' width={2} marker={marker}></SeriesDirective>
        <SeriesDirective dataSource={trackData} xName='x' yName='y3' name='Mark' type='Line' width={2} marker={marker}></SeriesDirective>
        <SeriesDirective dataSource={trackData} xName='x' yName='y4' name='William' type='Line' width={2} marker={marker}></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,CrosshairSettingsModel,TooltipSettingsModel,
         Legend, DateTime, Tooltip, DataLabel, LineSeries,  Crosshair}
from'@syncfusion/ej2-react-charts';
import { trackData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = {
    title: 'Years', minimum: new Date(2000, 1, 1),
    maximum: new Date(2006, 2, 11), intervalType: 'Years', valueType: 'DateTime'
  };
  const primaryyAxis: AxisModel = { crosshairTooltip: { enable: true, fill: 'green' } };
  const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
  const marker = { visible: true };
  const tooltip: TooltipSettingsModel = { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' };
  
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      crosshair={crosshair}
      tooltip={tooltip}
      title='Average Sales per Person'>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Crosshair, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={trackData} xName='x' yName='y' name='John' type='Line' width={2}
          marker={marker} >
        </SeriesDirective>
        <SeriesDirective dataSource={trackData} xName='x' yName='y1' name='Andrew' type='Line' width={2}
          marker={marker} ></SeriesDirective>
        <SeriesDirective dataSource={trackData} xName='x' yName='y2' name='Thomas' type='Line' width={2}
          marker={marker} ></SeriesDirective>
        <SeriesDirective dataSource={trackData} xName='x' yName='y3' name='Mark' type='Line' width={2}
          marker={marker} ></SeriesDirective>
        <SeriesDirective dataSource={trackData} xName='x' yName='y4' name='William' type='Line' width={2}
          marker={marker} ></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let trackData = [
    { x: new Date(2000, 2, 11), y: 15, y1: 39, y2: 60, y3: 75, y4: 85 },
    { x: new Date(2000, 9, 14), y: 20, y1: 30, y2: 55, y3: 75, y4: 83 },
    { x: new Date(2001, 2, 11), y: 25, y1: 28, y2: 48, y3: 68, y4: 85 },
    { x: new Date(2001, 9, 16), y: 21, y1: 35, y2: 57, y3: 75, y4: 87 },
    { x: new Date(2002, 2, 7),  y: 13, y1: 39, y2: 62, y3: 71, y4: 82 },
    { x: new Date(2002, 9, 7),  y: 18, y1: 41, y2: 64, y3: 69, y4: 74 },
    { x: new Date(2003, 2, 11), y: 24, y1: 45, y2: 57, y3: 81, y4: 73 },
    { x: new Date(2003, 9, 14), y: 23, y1: 48, y2: 53, y3: 84, y4: 75 },
    { x: new Date(2004, 2, 6),  y: 19, y1: 54, y2: 63, y3: 85, y4: 73 },
    { x: new Date(2004, 9, 6),  y: 31, y1: 55, y2: 50, y3: 87, y4: 60 },
    { x: new Date(2005, 2, 11), y: 39, y1: 57, y2: 66, y3: 75, y4: 48 },
    { x: new Date(2005, 9, 11), y: 50, y1: 60, y2: 65, y3: 70, y4: 55 },
    { x: new Date(2006, 2, 11), y: 24, y1: 60, y2: 79, y3: 85, y4: 40 }
];

datasource.tsx

export let trackData: Object[] = [
    { x: new Date(2000, 2, 11), y: 15, y1: 39, y2: 60, y3: 75, y4: 85 },
    { x: new Date(2000, 9, 14), y: 20, y1: 30, y2: 55, y3: 75, y4: 83 },
    { x: new Date(2001, 2, 11), y: 25, y1: 28, y2: 48, y3: 68, y4: 85 },
    { x: new Date(2001, 9, 16), y: 21, y1: 35, y2: 57, y3: 75, y4: 87 },
    { x: new Date(2002, 2, 7),  y: 13, y1: 39, y2: 62, y3: 71, y4: 82 },
    { x: new Date(2002, 9, 7),  y: 18, y1: 41, y2: 64, y3: 69, y4: 74 },
    { x: new Date(2003, 2, 11), y: 24, y1: 45, y2: 57, y3: 81, y4: 73 },
    { x: new Date(2003, 9, 14), y: 23, y1: 48, y2: 53, y3: 84, y4: 75 },
    { x: new Date(2004, 2, 6),  y: 19, y1: 54, y2: 63, y3: 85, y4: 73 },
    { x: new Date(2004, 9, 6),  y: 31, y1: 55, y2: 50, y3: 87, y4: 60 },
    { x: new Date(2005, 2, 11), y: 39, y1: 57, y2: 66, y3: 75, y4: 48 },
    { x: new Date(2005, 9, 11), y: 50, y1: 60, y2: 65, y3: 70, y4: 55 },
    { x: new Date(2006, 2, 11), y: 24, y1: 60, y2: 79, y3: 85, y4: 40 }
];

Crosshair highlight

The highlightCategory property highlights the background of the entire category when the crosshair is moved over the chart.
The crosshair line color can be customized using the color property within the line configuration.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Crosshair } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
  const primaryxAxis = { valueType: 'Category', title: 'Countries' };
  return <ChartComponent id='charts' primaryXAxis={primaryxAxis}
  crosshair={{ enable: true, line: { color: 'red' }, lineType: 'Vertical', highlightCategory: true }}
    title='Olympic Medals'>
    <Inject services={[ColumnSeries, Legend, Category, Crosshair]} />
    <SeriesCollectionDirective>
      <SeriesDirective dataSource={chartData} xName='country' yName='gold' type='Column'>
      </SeriesDirective>
    </SeriesCollectionDirective>
  </ChartComponent>
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel,ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Crosshair} from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
  return <ChartComponent id='charts' primaryXAxis={primaryxAxis}
    crosshair={{ enable: true, line: { color: 'red' }, lineType: 'Vertical', highlightCategory: true }}
      title='Olympic Medals'>
      <Inject services={[ColumnSeries, Legend, Category, Crosshair]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={chartData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

datasource.jsx

export let chartData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];

datasource.tsx

export let chartData: Object[] = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];