{"id":24152,"date":"2023-09-17T20:42:01","date_gmt":"2023-09-17T20:42:01","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24152"},"modified":"2026-01-13T11:35:31","modified_gmt":"2026-01-13T11:35:31","slug":"data-cursor-synchronized-highcharts-dashboard","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/data-cursor-synchronized-highcharts-dashboard\/","title":{"rendered":"Data cursor synchronized Highcharts dashboard"},"content":{"rendered":"<p>In this tutorial, I&#8217;ll walk you through a simple 4 steps process to create a data cursor synchronized dashboard using Highcharts and the Highcharts Dashboards (check GIF and demo below):<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"A data cursor synchronized dashboard with random dataset\" src=\"https:\/\/wp-assets.highcharts.com\/svg\/dataCursordashboard.gif\" width=\"100%\" height=\"750px\"><\/iframe><\/p>\n<p>If you&#8217;re new to Highchart dashboards, feel free to take a look at the following article <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/highcharts-dashboard\/\" target=\"_blank\" rel=\"noopener\">Highcharts Dashboards 101<\/a> for a quick introduction. Additionally, if you wonder what could be the reasons you might need to create a data cursor sync dashboard, check the following article <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/5-reasons-data-cursor-synchronized-dashboard\/\" target=\"_blank\" rel=\"noopener\">5 reasons why you need DataCursor sync dashboard<\/a>.<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"A data cursor synchronized dashboard with random dataset\" src=\"https:\/\/www.highcharts.com\/samples\/dashboards\/sync\/datacursor-sync\" width=\"100%\" height=\"1000px\"><\/iframe><\/p>\n<p>Let\u2019s get started<\/p>\n<h2>Step 1: Modules<\/h2>\n<p>To begin, I need to include the necessary Highcharts and Highcharts Dashboards modules:<\/p>\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/dashboards.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/highcharts.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/modules\/accessibility.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/dashboards\/modules\/dashboards-plugin.js\"&gt;&lt;\/script&gt;\r\n&lt;div id=\"container\"&gt;&lt;\/div&gt;<\/pre>\n<h2>Step 2: Building the dashboard<\/h2>\n<p>Before building the dashboard, I have to do some magic to initialize a few important variables, such as:<\/p>\n<pre>const DataCursor = Dashboards.DataCursor;\r\nconst DataTable = Dashboards.DataTable;\r\nconst cursor = new DataCursor();\r\nconst vegeTable = buildVegeTable();<\/pre>\n<p>Here is an explanation:<\/p>\n<ul>\n<li><code>DataCursor<\/code> and <code>DataTable<\/code> are classes provided by the Highcharts Dashboards library for managing cursor data and creating data tables, respectively.<\/li>\n<li><code>cursor<\/code> is an instance of the <code>DataCursor<\/code> class, which will be used to track cursor-related data.<\/li>\n<li><code>vegeTable<\/code> is a data table created using the <code>buildVegeTable()<\/code> function. It contains information about vegetables and their respective amounts.<\/li>\n<\/ul>\n<p>Now, I can proceed to create the dashboard using the <code>Dashboards.board<\/code> function. This function takes care of laying out the main dashboard\u2019s layers and components:<\/p>\n<pre>Dashboards.board('container', {\r\n  gui: {\r\n    layouts: [{\r\n      id: 'dashboards-layout-1',\r\n      rows: [{\r\n        cells: [{\r\n          id: 'highcharts-dashboards-cell-a0'\r\n        }, {\r\n          id: 'highcharts-dashboards-cell-b0'\r\n        }]\r\n      }, {\r\n        cells: [{\r\n          id: 'highcharts-dashboards-cell-a1'\r\n        }]\r\n      }]\r\n    }]\r\n  },\r\n  components: [{\r\n    cell: 'highcharts-dashboards-cell-a0',\r\n    type: 'Highcharts',\r\n    chartOptions: buildChartOptions('bar', vegeTable, cursor)\r\n  }, {\r\n    cell: 'highcharts-dashboards-cell-b0',\r\n    type: 'Highcharts',\r\n    chartOptions: buildChartOptions('line', vegeTable, cursor)\r\n  }, {\r\n    cell: 'highcharts-dashboards-cell-a1',\r\n    type: 'Highcharts',\r\n    chartOptions: buildChartOptions('pie', vegeTable, cursor)\r\n  }]\r\n});<\/pre>\n<p>The <code>layouts<\/code> contains three cells. The first cell has 2 charts (a bar and a line chart), whereas the second cell has only one chart (a pie chart).<br \/>\nUnder <code>component<\/code>, three Highcharts components are defined to the dashboard, each representing a different chart type (bar, line, and pie).<\/p>\n<h2>Step 3: The data<\/h2>\n<p>The data structure I am using in this dashboard is very simple; however, feel free to be creative and use the data of your choice \ud83d\ude09<br \/>\nI use the <code>buildVegeTable<\/code> function to construct a <code>DataTable<\/code> object with vegetable names and corresponding amounts:<\/p>\n<pre>function buildVegeTable() {\r\n  const table = new DataTable({\r\n    columns: {\r\n      vegetable: [\r\n        'Broccoli',\r\n        'Carrots',\r\n        'Corn',\r\n        'Cucumbers',\r\n        'Onions',\r\n        'Potatoes',\r\n        'Spinach',\r\n        'Tomatoes'\r\n      ],\r\n      amount: [\r\n        44,\r\n        51,\r\n        38,\r\n        45,\r\n        57,\r\n        62,\r\n        35,\r\n        61\r\n      ]\r\n    },\r\n    id: 'Vegetables'\r\n  });\r\n\r\n  table.setColumnAlias('name', 'vegetable');\r\n  table.setColumnAlias('y', 'amount');\r\n\r\n  return table;\r\n}<\/pre>\n<h2>Step 4: Synchronization<\/h2>\n<p>Here is the main piece of the code in this dashboard to synchronize the charts. I use Highcharts event listeners for the chart <code>events<\/code> that listens for cursor interactions and updates all charts&#8217; tooltips accordingly.<\/p>\n<pre>function buildChartOptions(type, table, cursor) {\r\n  return {\r\n    chart: {\r\n      events: {\r\n        load: function() {\r\n          const chart = this;\r\n          const series = chart.series[0];\r\n          cursor.addListener(table.id, 'point.mouseOver', function(e) {\r\n            const point = series.data[e.cursor.row];\r\n            if (chart.hoverPoint !== point) {\r\n              chart.tooltip.refresh(point);\r\n            }\r\n          });\r\n          cursor.addListener(table.id, 'point.mouseOut', function() {\r\n            chart.tooltip.hide();\r\n          });\r\n        }\r\n      }\r\n    },\r\n  };\r\n}<\/pre>\n<p>With just four simple steps, you now know how to create your own synchronized dashboard. So, don&#8217;t hesitate any longer; dive right in and get started on drafting the best data synchronization dashboard you can imagine.<\/p>\n<p>\u00a0<\/p>\n<h2><strong>Related posts<\/strong><\/h2>\n<ul>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/stock-chart-examples-using-highcharts-stock\/\">Stock chart examples using Highcharts Stock<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/stock-charting-with-highcharts\/\">Stock charting with Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/financial-charts-with-highcharts\/\">Financial charts with Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/intraday-chart-examples-using-highcharts\/\">Intraday chart examples using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/dynamic-charts-in-javascript-with-highcharts\/\">Dynamic charts in JavaScript with Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/data-charting-with-highcharts\/\">Data charting with Highcharts<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I&#8217;ll walk you through a simple 4 steps process to create a data cursor synchronized dashboard using Highcharts and the Highcharts Dashboards (check GIF and demo below): If you&#8217;re new to Highchart dashboards, feel free to take a look at the following article Highcharts Dashboards 101 for a quick introduction. Additionally, if [&hellip;]<\/p>\n","protected":false},"author":32,"featured_media":24160,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1010,1031],"coauthors":[699],"class_list":["post-24152","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-dashboards","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=24152"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24152\/revisions"}],"predecessor-version":[{"id":26055,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24152\/revisions\/26055"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24160"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24152"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}