{"id":24186,"date":"2023-09-18T21:00:49","date_gmt":"2023-09-18T21:00:49","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24186"},"modified":"2026-01-13T11:36:10","modified_gmt":"2026-01-13T11:36:10","slug":"financial-dashboard-using-highcharts-dashboards","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/financial-dashboard-using-highcharts-dashboards\/","title":{"rendered":"Creating a financial dashboard using Highcharts Dashboards"},"content":{"rendered":"<p>In this tutorial, I will show you how to create an interactive and visually appealing financial dashboard using Highcharts Dashboards.<\/p>\n<p>If you are new to the Highcharts Dashboards, you can still follow along; however, feel free to check this blog to learn <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/highcharts-dashboard\/\" target=\"_blank\" rel=\"noopener\">how to build Highcharts Dashboards step by step<\/a>; it is kind of a Highcharts Dashboards 101 :).<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"A dashboard displays random data using different type of charts and data grid\" src=\"https:\/\/www.highcharts.com\/samples\/dashboards\/demo\/styling\" width=\"100%\" height=\"1400px\"><\/iframe><\/p>\n<p>There are 4 steps to create such a dashboard:<\/p>\n<h2>Step 1: Libraries<\/h2>\n<p>To create a financial dashboard, I have to include Highcharts and Highcharts Dashboards libraries. Basically, I include the necessary JavaScript libraries and CSS stylesheets for Highcharts Dashboards. The div element with the <code>id=\"container\"<\/code> will serve as the container for the dashboard.<\/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\/dashboards\/datagrid.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<pre>@import url(\"https:\/\/code.highcharts.com\/css\/highcharts.css\"); @import url(\"https:\/\/code.highcharts.com\/dashboards\/css\/dashboards.css\"); @import url(\"https:\/\/code.highcharts.com\/datagrid\/css\/datagrid.css\");<\/pre>\n<h2>Step 2: Data<\/h2>\n<p>In this financial dashboard example, I use mock financial data for transactions. You should replace this with your own financial data source, such as an API or database. <\/p>\n<p>To add data, I use the <code>dataPool<\/code> object in Highcharts Dashboards. <code>dataPool<\/code> is a central location where you can define and store data that will be used by various components within the dashboard.<\/p>\n<pre>data: [\r\n  ['rsf934fds', 'John Doe', 100, 1000],\r\n  ['f0efnakr', 'Anna Smith', 200, 800],\r\n  ['mfaiks12', 'Robert Johnson', 300, 500],\r\n  ['15fqmfk', 'Susan Williams', 400, 100]\r\n]<\/pre>\n<p>The connector is configured to read <code>JSON<\/code> data with specific column names, and it provides a sample dataset containing transaction information for John Doe, Anna Smith, Robert Johnson, and Susan Williams, with columns for <code>'id'<\/code>, <code>'Receiver'<\/code>, <code>'Amount'<\/code>, and <code>'Balance'<\/code>. <\/p>\n<h2>Step 3: Dashboard Layout<\/h2>\n<p>Next, I define the layout of the dashboard. In this example, I have three layers. The first one has two charts and a component to check an external saving account; the second one has one line chart, whereas the last layer has two charts and a data grid.<\/p>\n<pre>gui: {\r\n  layouts: [{\r\n    rows: [{\r\n        id: 'row-1',\r\n        cells: [\r\n          \/\/ ... Define cells for row 1\r\n        ]\r\n      },\r\n      {\r\n        cells: [\r\n          \/\/ ... Define cells for row 2\r\n        ]\r\n      },\r\n      {\r\n        cells: [\r\n          \/\/ ... Define cells for row 3\r\n        ]\r\n      }\r\n    ]\r\n  }]\r\n},<\/pre>\n<p>Feel free to customize the layout according to your specific needs, adding rows and cells as necessary.<\/p>\n<h2>Step 4: Components<\/h2>\n<p>Now, let&#8217;s add some components (KPIs, charts, HTML elements) to our dashboard. I use components; this array contains definitions for the different components that will be displayed on the dashboard.<\/p>\n<pre>components: [{\r\n    type: 'KPI',\r\n    cell: 'dashboard-row-1-cell-1',\r\n    title: 'Total balance',\r\n    chartOptions: {\r\n      \/\/ ... Chart configuration\r\n    }\r\n  },\r\n  {\r\n    type: 'KPI',\r\n    cell: 'dashboard-row-1-cell-2',\r\n    title: 'Savings',\r\n    chartOptions: {\r\n      \/\/ ... Chart configuration\r\n    }\r\n  },\r\n  {\r\n    type: 'HTML',\r\n    cell: 'dashboard-row-1-cell-3',\r\n    elements: [\r\n      \/\/ ... Define HTML elements\r\n    ]\r\n  },\r\n  {\r\n    type: 'Highcharts',\r\n    cell: 'dashboard-row-2-cell-1',\r\n    title: 'Earnings',\r\n    chartOptions: {\r\n      \/\/ ... Chart configuration\r\n    }\r\n  },\r\n]<\/pre>\n<p>You can add more components to the <code>components<\/code> array as needed to create a comprehensive financial dashboard with various widgets and charts.<\/p>\n<p>Now, you can easily create a financial dashboard using Highcharts Dashboards. With the provided code and customization, you can build a tailored financial dashboard to suit your organization&#8217;s or client&#8217;s needs. Make sure to replace the sample data with your financial data source for a fully functional financial dashboard.<\/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\/inspirations\/highcharts-dashboards-with-react\/\">Highcharts Dashboards with React<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/highcharts-dashboards-with-vue\/\">Highcharts Dashboards with Vue<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/highcharts-dashboards-with-angular\/\">Highcharts Dashboards with Angular<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/highcharts-dashboards-with-python\/\">Highcharts Dashboards with Python<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/dashboards\/dashboard-examples-using-highcharts-dashboards\/\">Dashboard examples using Highcharts\u00ae Dashboards<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/javascript-dashboards-with-highcharts\/\">JavaScript dashboards with Highcharts<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step by step tutorial to create a financial dashboard using Highcharts Dashboards.<\/p>\n","protected":false},"author":32,"featured_media":24196,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[788,1010],"coauthors":[699],"class_list":["post-24186","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-finance","tag-highcharts-dashboards"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24186","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=24186"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24186\/revisions"}],"predecessor-version":[{"id":26053,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24186\/revisions\/26053"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24196"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24186"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}