{"id":24015,"date":"2023-08-14T19:47:38","date_gmt":"2023-08-14T19:47:38","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24015"},"modified":"2026-01-13T11:34:53","modified_gmt":"2026-01-13T11:34:53","slug":"highcharts-dashboard","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/highcharts-dashboard\/","title":{"rendered":"Highcharts Dashboards"},"content":{"rendered":"<p>In this tutorial, I will walk you through the process of building a responsive and interactive Highcharts dashboard with synchronized data. With the help of the Highcharts Dashboards library, creating a dashboard becomes effortless.<\/p>\n<p>The result will look like the following dashboard:<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"A pie chart visualizes the nutrient composition of an egg yolk\" src=\"https:\/\/www.highcharts.com\/samples\/dashboards\/demo\/axes-sync\" width=\"100%\" height=\"1270px\"><\/iframe><\/p>\n<p>Even if you&#8217;re new to the Highcharts core library, don&#8217;t worry, the Highcharts dashboards configuration is user-friendly. Let&#8217;s dive into the code of this example to see how easy it is.<\/p>\n<p>The goal is to create a dashboard displaying worldwide polio (pol3) immunization coverage among one-year-olds. The data is collected from the <a href=\"https:\/\/www.who.int\/\" target=\"_blank\" rel=\"noopener\">World Health Organization<\/a>. The requirements include four area charts: one for global coverage, one for South-East Asia, and two side-by-side charts for Africa and Europe. The top two charts should be synchronized, as well as the bottom two charts.<br \/>\nLet&#8217;s proceed with building this dashboard in four simple steps. Remember, the Highcharts Dashboards library handles most of the heavy lifting, so I just need to use the right options for fetching data and synchronizing the charts.<\/p>\n<h2>Step 1: Libraries<\/h2>\n<p>Be sure that you get all the right libraries to build the dashboard: <\/p>\n<pre>\r\n&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<\/pre>\n<p>The explanation for each library is beyond the scope of this tutorial, however, feel free to check <a href=\"https:\/\/www.highcharts.com\/docs\/dashboards\/installation\" target=\"_blank\" rel=\"noopener\">Highcharts documentation<\/a> for more information.<\/p>\n<h2>Step 2: Dataset<\/h2>\n<p>I fetch and set up the data in CSV format:<\/p>\n<pre>&lt;pre id=\"csv\"&gt;x,Global,Africa,Europe,South-East Asia\r\n946684800000,73,54,94,64\r\n978307200000,73,55,94,65\r\n1009843200000,74,59,93,65\r\n<\/pre>\n<p>I use the dataPool object to create separate datasets for the upper and bottom two charts. A separate datasets technique will help the synchronization I mentioned above:<\/p>\n<pre>dataPool: {\r\n  connectors: [{\r\n    id: 'connector-1',\r\n    type: 'CSV',\r\n    options: {\r\n      csv: csvData\r\n    }\r\n  }, {\r\n    id: 'connector-2',\r\n    type: 'CSV',\r\n    options: {\r\n      csv: csvData\r\n    }\r\n  }]\r\n},<\/pre>\n<h2>Step 3: Create the layout<\/h2>\n<p>I use the gui object to structure the chart layout as follows:<\/p>\n<pre>gui: {\r\n  layouts: [\r\n    {\r\n      id: \"layout-1\",\r\n      rows: [\r\n        {\r\n          cells: [\r\n            {\r\n              id: \"dashboard-col-1\"\r\n            }\r\n          ]\r\n        },\r\n        {\r\n          cells: [\r\n            {\r\n              id: \"dashboard-col-2\"\r\n            }\r\n          ]\r\n        },\r\n        {\r\n          cells: [\r\n            {\r\n              id: \"dashboard-col-3\"\r\n            },\r\n            {\r\n              id: \"dashboard-col-4\"\r\n            }\r\n          ]\r\n        }\r\n      ]\r\n    }\r\n  ];\r\n}<\/pre>\n<p>Each cell groups one or more charts together to get the layout as required: two single charts on the top and two together at the bottom.<\/p>\n<h2>Step 4: Create the charts<\/h2>\n<p>I use the components object to create charts by specifying the cell <code>ID<\/code>, connector <code>ID<\/code>, data to fetch (using the columnAssignment object), and regular Highcharts configuration (chartOptions object). Notice that I also use the <code>sync<\/code> object with the options <code>extremes<\/code> and <code>highlight<\/code>. <code>extremes<\/code> to synchronize the selection or panning between charts, and <code>highlight<\/code> to synchronize the hovering process between charts. One last thing, in this demos, as there are not many columns to pull the data, I just discard the unwanted data in the <code>columnAssignment<\/code> object. For instance, to display the global data, I set the European, African, and South East Asia to <code>null<\/code>:<\/p>\n<pre>columnAssignment: {\r\n  x: 'x',\r\n  Europe: null,\r\n  Africa: null,\r\n  'South-East Asia': null\r\n},<\/pre>\n<p><i><b>Remark<\/b><br \/>\nYou do not need to use <code>null<\/code> values in the <code>columnAssigment<\/code>. At this moment the core applies them by default.<br \/>\n<\/i><\/p>\n<p>Congratulations, you have now built a fully functional Highcharts dashboard with synchronized data.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A step by step tutorial to create a simple dashboard with Highcharts Dashboards library<\/p>\n","protected":false},"author":32,"featured_media":24016,"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-24015","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\/24015","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=24015"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24015\/revisions"}],"predecessor-version":[{"id":24220,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24015\/revisions\/24220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24016"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24015"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}