Crosshairs
Stay organized with collections
Save and categorize content based on your preferences.
Overview
Crosshairs are thin vertical and horizontal lines centered on a
data point in a chart. When you, as a chart creator, enable crosshairs
in your charts, your users will then be able to target a single
element:
Crosshairs can appear on focus, selection, or both. They're
available for scatter charts,
line charts, area charts,
and for the line and area portions
of combo
charts.
A Simple Example
Hover over the points below, or select them, to see crosshairs:
Here's a complete web page that creates the above chart, with the
line for crosshairs in bold:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number');
data.addColumn('number');
for (var i = 0; i < 100; i++)
data.addRow([Math.floor(Math.random()*100),
Math.floor(Math.random()*100)]);
var options = {
legend: 'none',
crosshair: { trigger: 'both' } // Display crosshairs on focus and selection.
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Crosshair Options
The following crosshair options are available:
crosshair: { trigger: 'both' } | display on both focus and selection |
crosshair: { trigger: 'focus' } | display on focus only |
crosshair: { trigger: 'selection' } | display on selection only |
crosshair: { orientation: 'both' } | display both horizontal and vertical hairs |
crosshair: { orientation: 'horizontal' } | display horizontal hairs only |
crosshair: { orientation: 'vertical' } | display vertical hairs only |
crosshair: { color: color_string } | set crosshair color to color_string, e.g., 'red' or '#f00' |
crosshair: { opacity: opacity_number } | set crosshair opacity to opacity_number, with 0.0 being fully transparent and 1.0 fully opaque |
crosshair: { focused: { color: color_string } } | set crosshair color to color_string on focus |
crosshair: { focused: { opacity: opacity_number } } | set crosshair opacity to opacity_number on focus |
crosshair: { selected: { color: color_string } } | set crosshair color to color_string on selection |
crosshair: { selected: { opacity: opacity_number } } | set crosshair opacity to opacity_number on selection |
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-07-10 UTC.
[null,null,["Last updated 2024-07-10 UTC."],[],[],null,["# Crosshairs\n\n1. [Overview](#overview)\n2. [A Simple Example](#simple_example)\n3. [Crosshair Options](#options)\n\nOverview\n--------\n\nCrosshairs are thin vertical and horizontal lines centered on a\ndata point in a chart. When you, as a chart creator, enable crosshairs\nin your charts, your users will then be able to target a single\nelement:\n\nCrosshairs can appear on focus, selection, or both. They're\navailable for [scatter charts](/chart/interactive/docs/gallery/scatterchart),\n[line charts](/chart/interactive/docs/gallery/linechart), [area charts](/chart/interactive/docs/gallery/areachart),\nand for the line and area portions\nof [combo\ncharts](/chart/interactive/docs/gallery/combochart).\n\nA Simple Example\n----------------\n\nHover over the points below, or select them, to see crosshairs: \n\nHere's a complete web page that creates the above chart, with the\nline for crosshairs in bold: \n\n```\n\u003chtml\u003e\n \u003chead\u003e\n \u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n \u003cscript type=\"text/javascript\"\u003e\n google.charts.load(\"current\", {packages:[\"corechart\"]});\n google.charts.setOnLoadCallback(drawChart);\n function drawChart() {\n var data = new google.visualization.DataTable();\n data.addColumn('number');\n data.addColumn('number');\n for (var i = 0; i \u003c 100; i++)\n data.addRow([Math.floor(Math.random()*100),\n Math.floor(Math.random()*100)]);\n var options = {\n legend: 'none',\n crosshair: { trigger: 'both' } // Display crosshairs on focus and selection.\n };\n var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));\n chart.draw(data, options);\n }\n \u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"chart_div\" style=\"width: 900px; height: 500px;\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nCrosshair Options\n-----------------\n\nThe following crosshair options are available:\n\n|------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|\n| `crosshair: { trigger: 'both' }` | display on both focus and selection |\n| `crosshair: { trigger: 'focus' }` | display on focus only |\n| `crosshair: { trigger: 'selection' }` | display on selection only |\n| `crosshair: { orientation: 'both' }` | display both horizontal and vertical hairs |\n| `crosshair: { orientation: 'horizontal' }` | display horizontal hairs only |\n| `crosshair: { orientation: 'vertical' }` | display vertical hairs only |\n| `crosshair: { color: `*color_string*` }` | set crosshair color to *color_string* , e.g., `'red'` or `'#f00'` |\n| `crosshair: { opacity: `*opacity_number*` }` | set crosshair opacity to *opacity_number* , with `0.0` being fully transparent and `1.0` fully opaque |\n| `crosshair: { focused: { color: `*color_string*` } }` | set crosshair color to *color_string* on focus |\n| `crosshair: { focused: { opacity: `*opacity_number*` } }` | set crosshair opacity to *opacity_number* on focus |\n| `crosshair: { selected: { color: `*color_string*` } }` | set crosshair color to *color_string* on selection |\n| `crosshair: { selected: { opacity: `*opacity_number*` } }` | set crosshair opacity to *opacity_number* on selection |"]]