How can I help you?
Cross hair and track ball in EJ2 JavaScript Chart control
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.
var series1 = [];
var series2 = [];
var point1;
var point2;
var value = 60;
var value1 = 50;
var i;
for (i = 1; i < 250; i++) {
if (Math.random() > .5) {
value += Math.random();
value1 += Math.random();
} else {
value -= Math.random();
value1 -= Math.random();
}
point1 = { x: new Date(2000, i, 1), y: value };
point2 = { x: new Date(2000, i, 1), y: value1 };
series1.push(point1);
series2.push(point2);
}
var char = new ej.charts.Chart({
primaryXAxis: {
majorGridLines: { width: 0 },
valueType: 'DateTime',
crosshairTooltip: { enable: true },
labelFormat: 'yMMM'
},
primaryYAxis:
{
minimum: 10, maximum: 90, interval: 10,
title: 'Temperature (°F)',
rowIndex: 0,
crosshairTooltip: { enable: true }
},
axes: [
{
majorGridLines: { width: 0 },
rowIndex: 0, opposedPosition: true,
minimum: 0, maximum: 160, interval: 20,
name: 'yAxis', title: 'Rainfall (MM)',
crosshairTooltip: { enable: true }
}
],
series: [
{
type: 'Line', width: 2, name: 'Temperature',
dataSource: series1, xName: 'x', yName: 'y'
},
{
type: 'Line', name: 'Rainfall', width: 2,
dataSource: series2, xName: 'x', yName: 'y',
yAxisName: 'yAxis'
}
],
//crosshair for chart
crosshair: { enable: true },
legendSettings: { visible: true },
title: 'Weather Condition'
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script id="Unemployment" type="text/x-template">
<div id='templateWrap'>
<table style="width:100%; border: 1px solid black;">
<tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
<tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
</table>
</div>
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>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.
var series1 = [];
var series2 = [];
var point1;
var point2;
var value = 60;
var value1 = 50;
var i;
for (i = 1; i < 250; i++) {
if (Math.random() > .5) {
value += Math.random();
value1 += Math.random();
} else {
value -= Math.random();
value1 -= Math.random();
}
point1 = { x: new Date(2000, i, 1), y: value };
point2 = { x: new Date(2000, i, 1), y: value1 };
series1.push(point1);
series2.push(point2);
}
var char = new ej.charts.Chart({
primaryXAxis: {
majorGridLines: { width: 0 },
valueType: 'DateTime',
crosshairTooltip: { enable: true },
labelFormat: 'yMMM'
},
primaryYAxis:
{
minimum: 10, maximum: 90, interval: 10,
title: 'Temperature (°F)',
rowIndex: 0,
crosshairTooltip: { enable: true }
},
axes: [
{
majorGridLines: { width: 0 },
rowIndex: 0, opposedPosition: true,
minimum: 0, maximum: 160, interval: 20,
name: 'yAxis', title: 'Rainfall (MM)',
crosshairTooltip: { enable: true }
}
],
series: [
{
type: 'Line', width: 2, name: 'Temperature',
dataSource: series1, xName: 'x', yName: 'y'
},
{
type: 'Line', name: 'Rainfall', width: 2,
dataSource: series2, xName: 'x', yName: 'y',
yAxisName: 'yAxis'
}
],
//crosshair for chart
crosshair: { enable: true },
legendSettings: { visible: true },
title: 'Weather Condition'
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script id="Unemployment" type="text/x-template">
<div id='templateWrap'>
<table style="width:100%; border: 1px solid black;">
<tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
<tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
</table>
</div>
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>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.
var series1 = [];
var series2 = [];
var point1;
var point2;
var value = 60;
var value1 = 50;
var i;
for (i = 1; i < 250; i++) {
if (Math.random() > .5) {
value += Math.random();
value1 += Math.random();
} else {
value -= Math.random();
value1 -= Math.random();
}
point1 = { x: new Date(2000, i, 1), y: value };
point2 = { x: new Date(2000, i, 1), y: value1 };
series1.push(point1);
series2.push(point2);
}
var chart = new ej.charts.Chart({
primaryXAxis: {
majorGridLines: { width: 0 },
valueType: 'DateTime',
crosshairTooltip: { enable: true, fill: 'green' },
labelFormat: 'yMMM'
},
primaryYAxis:
{
minimum: 10, maximum: 90, interval: 10,
title: 'Temperature (°F)',
rowIndex: 0,
crosshairTooltip: { enable: true, fill: 'green' },
},
axes: [
{
majorGridLines: { width: 0 },
rowIndex: 0, opposedPosition: true,
minimum: 0, maximum: 160, interval: 20,
name: 'yAxis', title: 'Rainfall (MM)',
crosshairTooltip: { enable: true, fill: 'green' },
}
],
series: [
{
type: 'Line', width: 2, name: 'Temperature',
dataSource: series1, xName: 'x', yName: 'y'
},
{
type: 'Line', name: 'Rainfall', width: 2,
dataSource: series2, xName: 'x', yName: 'y',
yAxisName: 'yAxis'
}
],
crosshair: {
enable: true,
//customizing crosshair
line: {width: 2, color: 'green'} },
legendSettings: { visible: true },
title: 'Weather Condition'
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script id="Unemployment" type="text/x-template">
<div id='templateWrap'>
<table style="width:100%; border: 1px solid black;">
<tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
<tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
</table>
</div>
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Note: To use the crosshair feature, inject
CrosshairmoduleChart.Inject(Crosshair)method.
Snap to data
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.
var chartData = [
{ 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 }
];
var chart = new ej.charts.Chart({
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',
},
primaryYAxis:
{
title: 'Revenue in Millions',
labelFormat: '{value}M',
majorTickLines: { width: 0 },
minimum: 10, maximum: 60,
lineStyle: { width: 0 }
},
series: [
{
dataSource: chartData, name: 'John', xName: 'x',
marker: { visible: true },
type: 'Line', width: 2,
yName: 'y'
}
],
// trackball for chart
tooltip: { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' },
crosshair: { enable: true, lineType: 'Horizontal', snapToData: true },
title: 'Average Sales per Person',
legendSettings: { visible: false }
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script id="Unemployment" type="text/x-template">
<div id='templateWrap'>
<table style="width:100%; border: 1px solid black;">
<tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
<tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
</table>
</div>
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>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 the trackball feature, inject both Crosshair and Tooltip into the provide.
Trackball functionality can be enabled by setting the enable property of the crosshair to true and the shared property of the tooltip to true.
var chartData = [
{ 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 }
];
var chart = new ej.charts.Chart({
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'
},
primaryYAxis:
{
title: 'Revenue in Millions',
labelFormat: '{value}M',
majorTickLines: { width: 0 },
minimum: 10, maximum: 90,
lineStyle: { width: 0 }
},
series: [
{
dataSource: chartData, name: 'John', xName: 'x',
marker: { visible: true },
type: 'Line', width: 2,
yName: 'y'
},
{
dataSource: chartData, name: 'Andrew', xName: 'x',
marker: { visible: true },
type: 'Line', width: 2,
yName: 'y1'
},
{
dataSource: chartData, name: 'Thomas', xName: 'x',
marker: { visible: true },
type: 'Line', width: 2,
yName: 'y2'
},
{
dataSource: chartData, name: 'Mark', xName: 'x',
marker: { visible: true },
type: 'Line', width: 2,
yName: 'y3'
},
{
dataSource: chartData, name: 'William', xName: 'x',
marker: { visible: true },
type: 'Line', width: 2,
yName: 'y4'
}
],
// trackball for chart
tooltip: { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' },
crosshair: { enable: true, lineType: 'Vertical' },
title: 'Average Sales per Person'
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script id="Unemployment" type="text/x-template">
<div id='templateWrap'>
<table style="width:100%; border: 1px solid black;">
<tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
<tr><td bgcolor="#00FFFF">${x}:</td><td bgcolor="#00FFFF">${y}</td></tr>
</table>
</div>
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>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.
var 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 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
//Category in primary X Axis
valueType: 'Category',
},
series:[{
dataSource: chartData,
xName: 'country', yName: 'gold',
type: 'Column'
}],
crosshair: { enable: true, line: { color: 'red' }, lineType: 'Vertical', highlightCategory: true },
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>