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:
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["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 |"]]
