{"id":17015,"date":"2019-03-27T16:03:28","date_gmt":"2019-03-27T10:33:28","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=17015"},"modified":"2026-01-20T14:36:30","modified_gmt":"2026-01-20T09:06:30","slug":"sales-dashboard-using-react-framework-fusioncharts","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/","title":{"rendered":"Building a Sales Dashboard in React JS using FusionCharts 2026"},"content":{"rendered":"Revenue is critical for growth in any organization, and the sales team is in charge of it. It is critical for the sales team to understand how many leads came from marketing efforts and organic sources and how many of these opportunities received pricing quotes. This results in a pipeline of these deals and their associated revenue. This pipeline also represents the revenue that the sales department can expect in a month or quarter. Furthermore, some of the deals in the pipeline become lost opportunities for a variety of reasons (competitors, pricing too high, or certain features not available in the product). Finally, a subset of these pipeline deals converts to actual customers.\r\n\r\nTo ensure revenue predictability, sales managers and revenue stakeholders in a company must understand different patterns of opportunities, pipeline, and closed deals.\r\n\r\nThis Sales Dashboard enables the sales team to understand trends, identify unprofitable months\/quarters, determine which parts of the sales cycle require more bandwidth, and optimize or reconsider the selling strategy.\r\n<figure class=\"text-center\"><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2019\/03\/Sales-Dashboard-KPIs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-17039\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2019\/03\/Sales-Dashboard-KPIs-300x222.png\" alt=\"Sales-Dashboard-KPIs\" width=\"300\" height=\"222\" \/><\/a><\/figure>\r\n<span data-preserver-spaces=\"true\">To create this dashboard, we will be using React, a JavaScript library for building user interfaces; FusionCharts, a JavaScript-based charting library, and Google Sheets API. Using FusionCharts\u2019 React component, you will be able to create responsive <a href=\"https:\/\/www.fusioncharts.com\/react-charts\">React Charts<\/a>, APIs, animations, drill-downs, real-time updates, and even full exporting of charts &amp; dashboards without any hassle.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">In this tutorial, we\u2019ll create a Sales dashboard by fetching data using Google Sheets API. <\/span><span data-preserver-spaces=\"true\">Before we get started, let\u2019s take a look at the Sales dashboard you\u2019ll be able to create at the end of this tutorial.<\/span>\r\n\r\n<a class=\"editor-rtfLink\" href=\"https:\/\/sowmyaraj92.github.io\/sales-dashboard-gsheetsapi-react\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">Check Sales Dashboardhttps:\/\/sowmyaraj92.github.io\/sales-dashboard-gsheetsapi-react\/<\/span><\/a>\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Include_Dependencies\" title=\"Include Dependencies\">Include Dependencies<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Step_1_Include_React\" title=\"Step 1: Include React\">Step 1: Include React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Step_2_Include_Bootstrap\" title=\"Step 2: Include Bootstrap\">Step 2: Include Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Step_3_Including_the_FusionCharts_Core_Package_and_Its_React_Component\" title=\"Step 3: Including the FusionCharts Core Package and Its React Component\">Step 3: Including the FusionCharts Core Package and Its React Component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Step_4_Including_FusionMaps_Package\" title=\"Step 4: Including FusionMaps Package\">Step 4: Including FusionMaps Package<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Importing_the_Charts_Using_React_Component\" title=\"Importing the Charts Using React Component\">Importing the Charts Using React Component<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Multi-Series_Column_2D\" title=\"Multi-Series Column 2D\">Multi-Series Column 2D<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Multi-Series_Line_Charts\" title=\"Multi-Series Line Charts\">Multi-Series Line Charts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Maps\" title=\"Maps\">Maps<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Google_Sheets_API_Setup\" title=\"Google Sheets API Setup\">Google Sheets API Setup<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Connecting_Google_Sheets_API_and_Fetching_Data\" title=\"Connecting Google Sheets API and Fetching Data\">Connecting Google Sheets API and Fetching Data<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Building_the_Sales_Dashboard\" title=\"Building the Sales Dashboard\">Building the Sales Dashboard<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Creating_the_Navigation_Section\" title=\"Creating the Navigation Section\">Creating the Navigation Section<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#Creating_the_Charts_Section\" title=\"Creating the Charts Section\">Creating the Charts Section<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Include_Dependencies\"><\/span>Include Dependencies<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Include_React\"><\/span>Step 1: Include React<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nUsing Create React-App is one of the best ways to set up the development environment. This setting provides the latest JavaScript features, enhances the developer experience, and optimizes the app for production.\r\n\r\nOpen the terminal, go ahead and enter:\r\n<pre class=\"lang:js decode:true\">npx create-react-app my-sales\r\ncd my-sales<\/pre>\r\nmy-sales is the working directory where the React Boilerplate will be installed along with all the utilities and dependencies.\r\n<ul>\r\n \t<li><em>Note: The working directory should contain a package.json. If the package is not present, then you can create it with the command: npm init -y<\/em><\/li>\r\n<\/ul>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Include_Bootstrap\"><\/span>Step 2: Include Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nWe will use Bootstrap to create the layout and user interface for our app. So, in the terminal, go ahead and enter:\r\n<pre class=\"lang:js decode:true\">npm install bootstrap --save<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Including_the_FusionCharts_Core_Package_and_Its_React_Component\"><\/span>Step 3: Including the FusionCharts Core Package and Its React Component<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nWe will use <strong>FusionCharts<\/strong> to render the charts in our dashboard. To install FusionCharts, open the terminal and enter:\r\n<pre class=\"lang:js decode:true\">npm install fusioncharts --save<\/pre>\r\nThe React-component provided by FusionCharts can be used to add JS charts in our app without any difficulty. To check them out, <a href=\"https:\/\/github.com\/fusioncharts\/react-fusioncharts-component\" target=\"_blank\" rel=\"noopener noreferrer\">click here<\/a>.\r\n<pre class=\"lang:js decode:true\">npm install react-fusioncharts --save<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Including_FusionMaps_Package\"><\/span>Step 4: Including FusionMaps Package<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nTo render maps, install the fusionmaps package, which contains all the map definition files as shown below:\r\n<pre class=\"lang:js decode:true\">npm install fusionmaps<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Importing_the_Charts_Using_React_Component\"><\/span>Importing the Charts Using React Component<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe dashboard comprises three charts: Multi-Series Column 2D, Maps, and Multi-Series Line charts. Let\u2019s explore each of them below:\r\n<h3><span class=\"ez-toc-section\" id=\"Multi-Series_Column_2D\"><\/span>Multi-Series Column 2D<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<span data-preserver-spaces=\"true\">The multi-series column 2D chart plots data for multiple datasets. This chart also helps with the analysis and comparison of data points grouped in sub-categories. It has vertically aligned rectangular bars on one axis with discrete values shown on the other. There is a legend for each of the bars plotted. Hovering over the rectangular bar displays the coordinate value of the attribute.\u00a0<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">Furthermore, the length of a column is proportional to the values it represents. This chart visualizes revenue for a year\/quarter, sales transactions involving opportunities, pipelines, etc.\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/charts\/column-bar-charts\/grouped-column-chart-with-multiple-series\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">Click here<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0to read more about Multi-Series Column 2D.<\/span>\r\n<h3><span class=\"ez-toc-section\" id=\"Multi-Series_Line_Charts\"><\/span>Multi-Series Line Charts<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<span data-preserver-spaces=\"true\">The multi-series line chart visualizes trends and relationships in multiple datasets. It consists of various data points connected using line segments, where each point represents a single value. It is often used to show continuous data like opportunities in the pipeline, closed opportunities, etc. Take a detailed look at Multi-Series Line Charts\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/charts\/line-area-charts\/line-chart-with-multiple-series\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">here<\/span><\/a><span data-preserver-spaces=\"true\">.<\/span>\r\n<h3><span class=\"ez-toc-section\" id=\"Maps\"><\/span>Maps<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<span data-preserver-spaces=\"true\">FusionCharts offers more than 1400+ maps to plot geographical data like revenue by regions, population by state, and survey effectively. To render the maps, you need to download the map definition files from\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/download\/map-definition-files\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">here<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0and copy-paste the maps folder within your FusionCharts directory.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">There are multiple ways to install them; you can check out this\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/dev\/map-guide\/setup\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">developer documentation page<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0for more details.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">For any map visualization, it is essential to provide the correct value for the id keys. The table on the right displays the region with its corresponding entity name.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">Take, for example, to plot a world map; the type attribute is set to world.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">For a detailed explanation of maps,\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/react\/your-first-chart-using-react\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">visit this link<\/span><\/a><span data-preserver-spaces=\"true\">.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">To import the charts and react-component, follow the code below:<\/span>\r\n<pre class=\"lang:js decode:true\">import React from 'react';\r\n\r\nimport FusionCharts from 'fusioncharts';\r\n\r\nimport Charts from 'fusioncharts\/fusioncharts.charts';\r\n\r\nimport Maps from 'fusioncharts\/fusioncharts.maps';\r\n\r\nimport World from 'fusionmaps\/maps\/es\/fusioncharts.world';\r\n\r\nimport PowerCharts from 'fusioncharts\/fusioncharts.powercharts';\r\n\r\nimport ReactFC from 'react-fusioncharts';\r\n\r\nimport FusionTheme from 'fusioncharts\/themes\/fusioncharts.theme.fusion';\r\n\r\nReactFC.fcRoot(FusionCharts, Charts, PowerCharts, Maps, World, FusionTheme);<\/pre>\r\nWe have added all the dependencies for our dashboard app, so let\u2019s set up the Google Sheets API.\r\n<h2><span class=\"ez-toc-section\" id=\"Google_Sheets_API_Setup\"><\/span>Google Sheets API Setup<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span data-preserver-spaces=\"true\">We will be creating a new project for the dashboard app on\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/console.developers.google.com\/apis\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">Google Developer API Console<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0to procure the data from Google Sheets. Let\u2019s call it gsheets-salesdashboard. You can create a new project using the link \u2192\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/console.developers.google.com\/projectcreate?project=gsheets-sales&amp;folder=&amp;organizationId=248680219523\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">Create New Project<\/span><\/a><span data-preserver-spaces=\"true\">.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">Once you create the project, you\u2019ll be redirected to the Google Developer API dashboard. Now, we will enable Google Sheets API for our app. For this in the APIs box, click \u201c<\/span><strong><span data-preserver-spaces=\"true\">Go to APIs overview<\/span><\/strong><span data-preserver-spaces=\"true\">.\u201d Once you click \u201c<\/span><strong><span data-preserver-spaces=\"true\">Enable APIs and Services<\/span><\/strong><span data-preserver-spaces=\"true\">,\u201d you\u2019ll get the API Library, and we\u2019ll go ahead and search for \u201c<\/span><strong><span data-preserver-spaces=\"true\">Google Sheets API<\/span><\/strong><span data-preserver-spaces=\"true\">.\u201d<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">Once you find it, click \u201c<\/span><strong><span data-preserver-spaces=\"true\">Enable<\/span><\/strong><span data-preserver-spaces=\"true\">.\u201d The API is now enabled, and you will be able to read and write into Google Sheets.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">From the sidebar, navigate to \u201cCredentials,\u201d and click on the \u201cCreate credentials\u201d button, and select \u201cAPI Key.\u201d Also, click on the \u201cRestrict Key\u201d and set a name for the same. (We\u2019ve set it to SalesDashboardAPIKey).<\/span>\r\n\r\n<em><span data-preserver-spaces=\"true\">Note: Save the key generated (mine is AIzaSyCn_qxApnW1By0E3DZmIOJeXkT_RtYuYHo) since we will need this key to pull the data from our Google Sheets later.<\/span><\/em>\r\n\r\n<em><span data-preserver-spaces=\"true\">From the \u201cAPI Restrictions,\u201d select the \u201cGoogle Sheets API\u201d and save it. Now, let\u2019s connect Google Sheets API and fetch the data.<\/span><\/em>\r\n<h3><span class=\"ez-toc-section\" id=\"Connecting_Google_Sheets_API_and_Fetching_Data\"><\/span>Connecting Google Sheets API and Fetching Data<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nWe will now take a look at the Google Sheets that we will be using for our dashboard. Here\u2019s a snapshot of how it looks, basis some of the key performance indicators of sales \u2013 like opportunities created, deals in the pipeline, and value of closed deals. The data also focuses on revenue, leads, sales cycle, and other growth indicators.\r\n\r\nThe Google sheet for KPI data:\r\n\r\nThe Google sheet for the Map Data(Year \u2013 2016):\r\n\r\nThe <code>componentDidMount()<\/code> is invoked immediately after a component is mounted. This is exactly where AJAX requests and DOM or state updates should occur.\r\n\r\nBelow is the code to fetch the response from the JSON data:\r\n<pre class=\"lang:js decode:true\">const url = `https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/${config.spreadsheetId}\/\r\n             values:batchGet?ranges=SalesDataFinal&amp;majorDimension=ROWS&amp;key=${config.apiKey}`;\r\n\r\ncomponentDidMount() {\r\n\r\nfetch(url).then(response =&gt; response.json()).then(data =&gt; {\r\n\r\nlet batchRowValues = data.valueRanges[0].values;\r\n\r\nconst rows = [];\r\n\r\nfor (let i = 1; i &lt; batchRowValues.length; i++) {\r\n\r\nlet rowObject = {};\r\n\r\nfor (let j = 0; j &lt; batchRowValues[i].length; j++) { rowObject[batchRowValues[0][j]] = batchRowValues[i][j]; } rows.push(rowObject); } this.setState({ items: rows}, () =&gt; this.getData('All','2016'));\r\n\r\n});\r\n\r\n}<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Building_the_Sales_Dashboard\"><\/span>Building the Sales Dashboard<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nWe\u2019ll be using Bootstrap 4 to build the dashboard structure. With new components, responsive designs, and styles, it is a consistent framework that supports all browsers.\r\n\r\nNow let\u2019s divide our dashboard into three parts:\r\n<ol>\r\n \t<li>Navigation Section<\/li>\r\n \t<li>KPI Section<\/li>\r\n \t<li>Charts Section<\/li>\r\n<\/ol>\r\n<h3><span class=\"ez-toc-section\" id=\"Creating_the_Navigation_Section\"><\/span>Creating the Navigation Section<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nTo create the navigation bar, we will be using the navbar component of Bootstrap. Just below the navigation bar holds a component with a drop-down for Year and Quarter. Below is the HTML snippet for the same:\r\n<pre class=\"lang:html decode:true\">&lt;nav className =\"navbar navbar-expand-sm text-sm-center text-md-left fixed-top\"&gt;\r\n &lt;div className=\"navbar-brand\"&gt;&lt;span className=\"logo\"&gt;S&lt;\/span&gt;ales Dashboard&lt;\/div&gt;\r\n &lt;ul className=\"navbar-nav flex-row ml-sm-auto\"&gt;\r\n &lt;li className=\"nav-item\"&gt;\r\n &lt;div className=\"profile\"&gt;\r\n &lt;img alt=\"\" className=\"mr-3 rounded-circle border\" width=\"42\" src=\".\/Image-Tim.png\" \/&gt;\r\n &lt;span className=\"name d-none d-sm-inline-flex\"&gt;Hey, Tim &lt;\/span&gt;\r\n &lt;\/div&gt;\r\n &lt;\/li&gt;\r\n &lt;\/ul&gt; \r\n &lt;div className=\"row mb-5\"&gt;\r\n &lt;div className=\"col-2\"&gt;\r\n &lt;\/div&gt;\r\n &lt;div className=\"col text-right time-selector\"&gt;\r\n &lt;ul className=\"list-inline\"&gt;\r\n &lt;li className=\"list-inline-item\"&gt;\r\n &lt;div className=\"dropdown active-item\"&gt;\r\n &lt;button className=\"btn btn-secondary dropdown-toggl\r\n type=\"button\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"&gt;\r\n {this.state.value}\r\n &lt;\/button&gt;\r\n &lt;div className=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\"&gt;\r\n &lt;div className=\"dropdown-item\" value =\"2018\" id=\"btn-2018\" onClick ={this.updateDashboard} &gt;2018&lt;\/div&gt;\r\n &lt;div className=\"dropdown-item\" value =\"2017\" id=\"btn-2017\" onClick ={this.updateDashboard} &gt;2017&lt;\/div&gt;\r\n &lt;div className=\"dropdown-item\" value =\"2016\" id=\"btn-2016\"onClick ={this.updateDashboard} &gt;2016&lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;\/li&gt; \r\n &lt;li className=\"list-inline-item\"&gt;\r\n &lt;div className=\"dropdown\"&gt;\r\n &lt;button className=\"btn btn-secondary dropdown-toggl\r\n type=\"button\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"&gt;\r\n {this.state.quarterValue}\r\n &lt;\/button&gt;\r\n &lt;div className=\"dropdown-menu\" for=\"navbarDropdown\" aria-labelledby=\"navbarDropdown\"&gt;\r\n &lt;div className=\"dropdown-item\" disabled&gt;--Select Quarter--&lt;\/div&gt;\r\n &lt;div id =\"btn-q1\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 1&lt;\/div&gt;\r\n &lt;div id =\"btn-q2\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 2&lt;\/div&gt;\r\n &lt;div id =\"btn-q3\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 3&lt;\/div&gt;\r\n &lt;div id =\"btn-q4\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 4&lt;\/div&gt;\r\n &lt;div id =\"btn-q5\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 1&lt;\/div&gt;\r\n &lt;div id =\"btn-q6\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 2&lt;\/div&gt;\r\n &lt;div id =\"btn-q7\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 3&lt;\/div&gt;\r\n &lt;div id =\"btn-q8\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 4&lt;\/div&gt;\r\n &lt;div id =\"btn-q9\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 1&lt;\/div&gt;\r\n &lt;div id =\"btn-q10\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 2&lt;\/div&gt;\r\n &lt;div id =\"btn-q11\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 3&lt;\/div&gt;\r\n &lt;div id =\"btn-q12\" className=\"dropdown-item\" onClick ={this.updateDashboardQuarter}&gt;Quarter 4&lt;\/div&gt; \r\n &lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;\/li&gt;\r\n &lt;\/ul&gt;\r\n &lt;\/div&gt;\r\n &lt;\/div&gt;&lt;\/nav&gt;\r\n<\/pre>\r\nWe will now create a container to house both the KPI and Chart sections of the dashboard. Take a look at the HTML snippet below:\r\n<div>\/\/KPI section \/\/Charts Section<\/div>\r\n<pre class=\"lang:js decode:true\"><\/pre>\r\n<h4>Creating the KPI Section:<\/h4>\r\nTo create this, we will use the Card component of Bootstrap to create the layout for our KPI section. Below is the HTML snippet for the same:\r\n<pre class=\"lang:html decode:true\">&lt;div className=\"card c-portlet c-portlet--height-fluid-half d-flex align-items-start flex-column\"&gt;\r\n &lt;div className=\"d-flex\"&gt; \r\n &lt;span className=\"oval d-flex justify-content-center \"&gt;\r\n &lt;img src={'.\/revenuetarget.svg'} alt=\"fireSpot\" className= \"img-responsive rounded-circle\"\r\n            width=\"20\"\/&gt;\r\n &lt;\/span&gt;\r\n &lt;p className=\"c-portlet-title\"&gt;Revenue Target&lt;\/p&gt; \r\n &lt;\/div&gt;\r\n \r\n &lt;div className=\"kpi-block mt-3\"&gt;\r\n &lt;div className=\"c-portlet-value\"&gt;\r\n &lt;span className=\"h1\"&gt;$&lt;\/span&gt; {this.state.targetRevenue}\r\n &lt;\/div&gt;\r\n &lt;div id=\"added-meta-target\" className=\"targetRevenue\"&gt;\r\n \r\n &lt;span className=\"h5 poa meta-value-text1\"&gt;Target in \r\n &lt;span className=\"defaultQtr_value\"&gt;\r\n          {this.state.quarterValue}&lt;\/span&gt;, {this.state.value}&lt;\/span&gt; \r\n &lt;\/div&gt;\r\n &lt;\/div&gt; \r\n &lt;div className=\"d-flex align-items-center kpi-block mt-4 mb-2\"&gt;\r\n &lt;span className=\"rectangle d-flex justify-content-center \"&gt;\r\n &lt;\/span&gt;\r\n &lt;div id =\"kpi-target\" data-up=\"&amp;nbsp;more\" data-down=\"&amp;nbsp;less\"&gt;&lt;\/div&gt;\r\n &lt;span className =\"h5 mb-0\"&gt;&amp;nbsp; of target achieved&lt;\/span&gt;\r\n &lt;\/div&gt; \r\n &lt;\/div&gt;<\/pre>\r\nNow that our layout is ready, we will define functionality for elements and feed data to them from Google Sheets. For this, we will define a function called getData in our component which will take the year and quarter as arguments to de-structure google sheets data present in the app\u2019s state.\r\n<pre class=\"lang:js decode:true\">getData = (arg,arg2) =&gt; {\r\n \/\/ google sheet data\r\nconst arr = this.state.items;\r\n const arrLen = arr.length;\r\n let chartDataArr = [];\r\n let targetRevenueVal =0;\r\n let targetRevenueFlag =false;\r\n \r\n \/\/KPI 1 - Target achieved\r\n \r\n const targetElem = document.getElementById('kpi-target');\r\n targetElem.classList.remove('has-up-val');\r\n targetElem.classList.remove('has-down-val');\r\n \r\n \/\/Annual Data\r\n for (let i = 0; i &lt; arrLen; i++) {\r\n let monthStr = (arr[i])['year']; \r\n if (monthStr.includes(arg2)) { \r\n chartDataArr.push(arr[i]);\r\n if(targetRevenueFlag===false) {\r\n targetRevenueVal=parseInt(arr[i].revenueTarget_Annual); \r\n targetRevenueFlag = true;\r\n }\r\n \r\n }\r\n }\r\n \/\/Quarterly Data\r\n if(arg !== \"All\") { \r\n chartDataArr = [];\r\n targetRevenueFlag =false;\r\n \r\n for (let i = 0; i &lt; arrLen; i++) {\r\n let quarterStr = (arr[i])['quarter']; \r\n \r\n if (quarterStr.includes(arg)) {\r\n if(targetRevenueFlag===false) {\r\n targetRevenueVal=parseInt(arr[i].revenueTarget);\r\n targetRevenueFlag = true;\r\n }\r\n chartDataArr.push(arr[i]);\r\n }\r\n }\r\n }\r\n \r\n\/\/Percent of targets achieved\r\n let target = (oppClosedVal\/targetRevenueVal)*100;\r\n const targetPercent =(target).toFixed(2);\r\n if(target &lt; 100 ) { target = 100-target; targetElem.innerHTML = Math.abs(target) + '%'; targetElem.classList.add('has-down-val'); } else if(target &gt;= 100 ) {\r\n target = target -100;\r\n targetElem.innerHTML = Math.abs(target) +'%';\r\n targetElem.classList.add('has-up-val');\r\n \r\n }\r\n \r\n document.getElementById(\"kpi-target\").innerHTML = (target.toFixed(2))+'%';\r\n}<\/pre>\r\nThe above code snippet will create one KPI for Revenue Target. Likewise, we will make cards for all four KPIs for the Sales Dashboard.\r\n<h3><span class=\"ez-toc-section\" id=\"Creating_the_Charts_Section\"><\/span>Creating the Charts Section<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nWe will use col and card components of Bootstrap to create the Chart Layout. <code>containerBackgroundOpacity<\/code> is an attribute that is used to manipulate the background opacity of the charts.\r\n<pre class=\"lang:HTML decode:true\">\/*Multi-series line chart*\/ \u00a0\r\n\r\n&lt;div className=\"col-md-6 col-xl-9 order-2 order-md-1 order-xl-1 \"&gt;\u00a0 \u00a0 \u00a0 \u00a0 \r\n  &lt;div className=\"card c-portlet c-portlet--height-fluid pipeline-card full-height\"&gt;\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \r\n  &lt;\/div&gt;\u00a0 \u00a0\r\n&lt;\/div&gt;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \r\n\/*Multi-series column 2D Chart*\/\u00a0 \u00a0 \u00a0 \u00a0\r\n\r\n&lt;div className=\"col-md-6 col-xl-8 order-2 order-md-1 order-xl-1 \"&gt;\u00a0 \u00a0 \u00a0 \u00a0 \r\n  &lt;div className=\"card c-portlet c-portlet--height-fluid full-height pipelineClosing-card\"&gt;\u00a0 \u00a0 \u00a0 \r\n\u00a0 &lt;\/div&gt;\u00a0 \u00a0 \u00a0 \u00a0\r\n&lt;\/div&gt;\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n\r\n\/*Map Chart*\/\u00a0 \u00a0 \u00a0 \u00a0\r\n\r\n&lt;div className=\"col-md-12 col-xl-6 order-2 order-md-1 order-xl-1 \"&gt;\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \r\n  &lt;div className=\"card c-portlet c-portlet--height-fluid full-height map-card\"&gt;\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \r\n  &lt;\/div&gt;\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n&lt;\/div&gt;&lt;\/pre&gt;<\/pre>\r\nThe above code snippet will create one chart card each for Multi-series Charts, StackedLine, and Map. Follow the steps to build the chart cards and you will have the chart layout. And to make sure you are getting it right, take a look at the code files in my Github repository.\r\n\r\nNow, we will form the JSON data array for each chart and consume the cosmetic options defined and add it to the apps\u2019 state.\r\n<pre class=\"lang:js decode:true\">\/\/Multi-series column 2D chart\r\n type: 'mscolumn2d',\r\n width: '100%',\r\n height: '100%',\r\n dataFormat: 'json',\r\n dataSource: {datasource }\r\n}\r\n this.setState({stackData: chartConfigs1});\r\n \r\n\/\/World Map\r\nconst chartConfigs2 = { \r\n type : \"world\",\r\n width : '100%',\r\n height : '95%',\r\n dataFormat : \"JSON\",\r\n dataSource :{datasource}\r\n}\r\n this.setState({mapData: chartConfigs2});\r\n \r\n\/\/Multi-series line chart\r\nconst chartConfigs3 = {\r\n type: 'msline',\r\n width: '100%',\r\n height: '150%',\r\n dataFormat: 'json',\r\n dataSource: {datasource} \r\n }\r\n this.setState({mslineData: chartConfigs3});<\/pre>\r\nWe will now pass the JSON data to the FusionCharts\u2019 React component under the element which we have created for each chart.\r\n<div>\r\n<pre class=\"lang:html decode:true\">&lt;div className=\"card c-portlet c-portlet--height-fluid pipeline-card full-height\"&gt;\r\n\r\n&lt;div className=\"card c-portlet c-portlet--height-fluid pipeline-card full-height\"&gt;\u00a0 \u00a0 \u00a0 \u00a0 \r\n\r\n&lt;reactfc {...this.state.mslineData} containerBackgroundOpacity =\"0\"&gt;&lt;\/reactfc&gt; \r\n\r\n&lt;\/div&gt;\r\n\r\n &lt;div className=\"card c-portlet c-portlet--height-fluid pipeline-card full-height\"&gt; \r\n\r\n&lt;reactfc {...this.state.stackData} containerBackgroundOpacity =\"0\"&gt;&lt;\/reactfc&gt;\r\n\r\n&lt;\/div&gt;\u00a0 &lt;div className=\"card c-portlet c-portlet--height-fluid full-height map-card\"&gt;\r\n\r\n&lt;reactfc {...this.state.mapData} containerBackgroundOpacity =\"0\"&gt;&lt;\/reactfc&gt; \r\n\r\n&lt;\/div&gt;&lt;\/div&gt;<\/pre>\r\nIf you\u2019ve followed these steps till now, then you should have a functional dashboard as in the image below:\r\n\r\n<span data-preserver-spaces=\"true\">We hope the tutorial helped you create this Sales Dashboard using Google Sheets. Now, you can go ahead and add UI elements, styles, more charts, and a lot more features.<\/span>\r\n\r\n&nbsp;\r\n\r\n<strong>You can download FusionCharts Package for React stack from here: <a href=\"https:\/\/www.fusioncharts.com\/download\/fusioncharts-suite-xt?framework=react\" target=\"_blank\" rel=\"noopener noreferrer\">Sign up for FusionCharts<\/a>.<\/strong>\r\n\r\n<span data-preserver-spaces=\"true\">A sales dashboard plays a crucial role in giving the peeps at sales an up-to-date view of their organization\u2019s sales health to make desired revenue predictions, visualize successfully closed deals, and identify critical areas for optimization.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">You can look at the other dashboards on React built by our developers, such as\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/dashboards\/online-retail-dashboard\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">Retail Dashboard<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0and\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/dashboards\/saas-dashboard\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">SaaS Dashboard<\/span><\/a><span data-preserver-spaces=\"true\">.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">For any references, you can check out the source code from\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/github.com\/sowmyaraj92\/sales-dashboard-gsheetsapi-react\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">this Github Repository<\/span><\/a><span data-preserver-spaces=\"true\">.<\/span>\r\n\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Revenue is critical for growth in any organization, and the sales team is in charge of it. It is critical for the sales team to understand how many leads came from marketing efforts and organic sources and how many of these opportunities received pricing quotes. This results in a pipeline of these deals and their [&hellip;]<\/p>\n","protected":false},"author":43,"featured_media":17032,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[709,18],"tags":[97,711,710],"coauthors":[702],"class_list":["post-17015","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dashboard","category-tutorials","tag-dashboard","tag-revenue-dashboard","tag-sales-dashboard"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building a Sales Dashboard in React JS using FusionCharts<\/title>\n<meta name=\"description\" content=\"Build a Sales Dashboard with the Google Sheets API. Use React and 2026 FusionCharts to create professional, interactive visuals. Start your project today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Sales Dashboard in React JS using FusionCharts\" \/>\n<meta property=\"og:description\" content=\"Build a Sales Dashboard with the Google Sheets API. Use React and 2026 FusionCharts to create professional, interactive visuals. Start your project today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-27T10:33:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:06:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2019\/03\/blog_sales_dashboard.png\" \/>\n\t<meta property=\"og:image:width\" content=\"4032\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sowmya Rajan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sowmya Rajan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Sowmya Rajan\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/adc831bad31f25020d64325b9b50cc00\"\n\t            },\n\t            \"headline\": \"Building a Sales Dashboard in React JS using FusionCharts 2026\",\n\t            \"datePublished\": \"2019-03-27T10:33:28+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:30+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/\"\n\t            },\n\t            \"wordCount\": 1608,\n\t            \"commentCount\": 1,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2019\/03\/blog_sales_dashboard.png\",\n\t            \"keywords\": [\n\t                \"dashboard\",\n\t                \"Revenue Dashboard\",\n\t                \"Sales Dashboard\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Dashboard\",\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/\",\n\t            \"name\": \"Building a Sales Dashboard in React JS using FusionCharts\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2019\/03\/blog_sales_dashboard.png\",\n\t            \"datePublished\": \"2019-03-27T10:33:28+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:30+00:00\",\n\t            \"description\": \"Build a Sales Dashboard with the Google Sheets API. Use React and 2026 FusionCharts to create professional, interactive visuals. Start your project today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2019\/03\/blog_sales_dashboard.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2019\/03\/blog_sales_dashboard.png\",\n\t            \"width\": 4032,\n\t            \"height\": 1500,\n\t            \"caption\": \"Building a Sales Dashboard using FusionCharts\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Building a Sales Dashboard in React JS using FusionCharts 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/adc831bad31f25020d64325b9b50cc00\",\n\t            \"name\": \"Sowmya Rajan\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/a8c31dc331e02710476293f03a2edc86\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/301\/3016c8369883809edc539c5228a3d9e0x96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/301\/3016c8369883809edc539c5228a3d9e0x96.jpg\",\n\t                \"caption\": \"Sowmya Rajan\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/sowmya\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building a Sales Dashboard in React JS using FusionCharts","description":"Build a Sales Dashboard with the Google Sheets API. Use React and 2026 FusionCharts to create professional, interactive visuals. Start your project today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/","og_locale":"en_US","og_type":"article","og_title":"Building a Sales Dashboard in React JS using FusionCharts","og_description":"Build a Sales Dashboard with the Google Sheets API. Use React and 2026 FusionCharts to create professional, interactive visuals. Start your project today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2019-03-27T10:33:28+00:00","article_modified_time":"2026-01-20T09:06:30+00:00","og_image":[{"width":4032,"height":1500,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2019\/03\/blog_sales_dashboard.png","type":"image\/png"}],"author":"Sowmya Rajan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sowmya Rajan","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/"},"author":{"name":"Sowmya Rajan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/adc831bad31f25020d64325b9b50cc00"},"headline":"Building a Sales Dashboard in React JS using FusionCharts 2026","datePublished":"2019-03-27T10:33:28+00:00","dateModified":"2026-01-20T09:06:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/"},"wordCount":1608,"commentCount":1,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2019\/03\/blog_sales_dashboard.png","keywords":["dashboard","Revenue Dashboard","Sales Dashboard"],"articleSection":["Dashboard","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/","url":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/","name":"Building a Sales Dashboard in React JS using FusionCharts","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2019\/03\/blog_sales_dashboard.png","datePublished":"2019-03-27T10:33:28+00:00","dateModified":"2026-01-20T09:06:30+00:00","description":"Build a Sales Dashboard with the Google Sheets API. Use React and 2026 FusionCharts to create professional, interactive visuals. Start your project today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2019\/03\/blog_sales_dashboard.png","contentUrl":"\/blog\/wp-content\/uploads\/2019\/03\/blog_sales_dashboard.png","width":4032,"height":1500,"caption":"Building a Sales Dashboard using FusionCharts"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/sales-dashboard-using-react-framework-fusioncharts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Sales Dashboard in React JS using FusionCharts 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/adc831bad31f25020d64325b9b50cc00","name":"Sowmya Rajan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/a8c31dc331e02710476293f03a2edc86","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/301\/3016c8369883809edc539c5228a3d9e0x96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/301\/3016c8369883809edc539c5228a3d9e0x96.jpg","caption":"Sowmya Rajan"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/sowmya\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/17015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=17015"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/17015\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/17032"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=17015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=17015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=17015"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=17015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}