{"id":17952,"date":"2021-05-21T11:02:20","date_gmt":"2021-05-21T05:32:20","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=17952"},"modified":"2021-12-24T04:45:32","modified_gmt":"2021-12-23T23:15:32","slug":"create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/","title":{"rendered":"Create Stunning Manufacturing Performance and Quality Dashboards with\u00a0React.js"},"content":{"rendered":"<span data-preserver-spaces=\"true\">Digital transformations have impacted a wide range of industries, enabling them to think out-of-the-box and imaginatively integrate technology into their existing operational procedures. Data analytics and visualizations in the form of a performance and quality dashboard is a prime example of how digital transformations allow enterprises to use data in their decision-making and thought processes.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">One such example of a technology-driven transformation is using data visualization to keep track of your manufacturing performance and quality control. Simply put, it is advantageous to experience, manage, and interpret data associated with your product quality through the medium of beautiful charts and interactive visualizations. This is precisely where\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">FusionCharts<\/span><\/a><span data-preserver-spaces=\"true\"> helps you. FusionCharts provides a seamless set of libraries that make it simple to create <a href=\"https:\/\/www.fusioncharts.com\/dashboards\">business dashboards<\/a> that measure your enterprise&#8217;s manufacturing performance and quality.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">The best part about\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">FusionCharts<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0is that it makes its complete source code available to developers. This means that to start using it, you only need to download it and plug it into your projects.<\/span>\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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#How_Can_I_Build_a_Manufacturing_Performance_and_Quality_Dashboard_with_FusionCharts\" title=\"How Can I Build a Manufacturing Performance and Quality Dashboard with FusionCharts?\">How Can I Build a Manufacturing Performance and Quality Dashboard with FusionCharts?<\/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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#How_Can_I_View_the_Summary_of_Aggregated_Data_in_My_Manufacturing_Performance_and_Quality_Dashboard\" title=\"How Can I View the Summary of Aggregated Data in My Manufacturing Performance and Quality Dashboard?\">How Can I View the Summary of Aggregated Data in My Manufacturing Performance and Quality Dashboard?<\/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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#How_Can_I_Add_a_Process_Performance_Visual_in_React_Component\" title=\"How Can I Add a Process Performance Visual in React Component?\">How Can I Add a Process Performance Visual in React Component?<\/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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#What_is_an_Easy_Way_to_Add_a_Defect_Understanding_Component\" title=\"What is an Easy Way to Add a Defect Understanding Component?\">What is an Easy Way to Add a Defect Understanding Component?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"graf graf--h3\"><span class=\"ez-toc-section\" id=\"How_Can_I_Build_a_Manufacturing_Performance_and_Quality_Dashboard_with_FusionCharts\"><\/span>How Can I Build a Manufacturing Performance and Quality Dashboard with FusionCharts?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span data-preserver-spaces=\"true\">FusionCharts offers enterprises a more straightforward method for building manufacturing quality dashboards. These dashboards highlight the critical metrics related to your business&#8217;s performance and sales growth. Using our dashboards, enterprises can track specific metrics and KPIs enabling management teams to visualize and interpret these metrics and make informed enterprise-level decisions accordingly.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">With the ideal manufacturing quality dashboard, you can easily:<\/span>\r\n<ul>\r\n \t<li><span data-preserver-spaces=\"true\">Track KPIs for effective production.<\/span><\/li>\r\n \t<li><span data-preserver-spaces=\"true\">Monitor the performance and take necessary decisions to optimize production.<\/span><\/li>\r\n \t<li><span data-preserver-spaces=\"true\">Figure out the production performance of each site, especially with distributed production cycles.<\/span><\/li>\r\n \t<li><span data-preserver-spaces=\"true\">Identify and understand defective production scenarios.<\/span><\/li>\r\n<\/ul>\r\n<h3 class=\"graf graf--h4\"><span class=\"ez-toc-section\" id=\"How_Can_I_View_the_Summary_of_Aggregated_Data_in_My_Manufacturing_Performance_and_Quality_Dashboard\"><\/span>How Can I View the Summary of Aggregated Data in My Manufacturing Performance and Quality Dashboard?<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<p class=\"graf graf--p\">When it comes to manufacturing quality dashboards, having your essential metrics displayed meaningfully front and center with all aggregated information visible is instrumental. That is why FusionCharts has a full suite of Bootstrap-based libraries and supports React.js to showcase aggregated data in your existing React applications and dashboards.<\/p>\r\n<p class=\"graf graf--p\">Here is an example of the dashboard code required to display a summary of your aggregated data:<\/p>\r\n\r\n<pre class=\"graf graf--pre\">&lt;div className=\"row kpi-container\"&gt;\r\n    &lt;div className=\"col-6 col-lg-3\"&gt;\r\n        &lt;div className=\"kpi\" id=\"kpi1\"&gt;\r\n            &lt;p className=\"kpi-header\"&gt;Total Production&lt;\/p&gt;\r\n            &lt;p className=\"sub-header\"&gt;(units)&lt;\/p&gt;\r\n            {len ? (&lt;p className=\"kpi-value\"&gt;.{NumberFormatter.format(kpiGenerator('kpi1', serverData, ''))}&lt;\/p&gt;) : Loader()}\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div className=\"col-6 col-lg-3\"&gt;\r\n        &lt;div className=\"kpi\" id=\"kpi2\"&gt;\r\n            &lt;p className=\"kpi-header\"&gt;Defective Production&lt;\/p&gt;\r\n            &lt;p className=\"sub-header\"&gt;(%)&lt;\/p&gt;\r\n            {len ? (&lt;p className=\"kpi-value\"&gt;{kpiGenerator('kpi2', serverData, '')}&lt;\/p&gt;) : Loader()}\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div className=\"col-6 col-lg-3\"&gt;\r\n        &lt;div className=\"kpi\" id=\"kpi3\"&gt;\r\n            &lt;p className=\"kpi-header\"&gt;Production Rate&lt;\/p&gt;\r\n            &lt;p className=\"sub-header\"&gt;(units\/hour)&lt;\/p&gt;\r\n            {len ? (&lt;p className=\"kpi-value\"&gt;{NumberFormatter.format(kpiGenerator('kpi3', serverData, ''), '0,0.00')}&lt;\/p&gt;) : Loader()}\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div className=\"col-6 col-lg-3\"&gt;\r\n        &lt;div className=\"kpi\" id=\"kpi4\"&gt;\r\n            &lt;p className=\"kpi-header\"&gt;Average Cycle Duration&lt;\/p&gt;\r\n            &lt;p className=\"sub-header\"&gt;(hours)&lt;\/p&gt;\r\n            {len ? (&lt;p className=\"kpi-value\"&gt;{NumberFormatter.format(kpiGenerator('kpi4', serverData, ''), '0,0.00')}&lt;\/p&gt;) : Loader()}\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<p class=\"graf graf--p\">Using <code class=\"markup--code markup--p-code\">col-6<\/code> and <code class=\"markup--code markup--p-code\">col-lg-3<\/code>, you can place FusionCharts visuals into the Bootstrap grid system for a pleasant user experience.<\/p>\r\n\r\n<h3 class=\"graf graf--h4\"><span class=\"ez-toc-section\" id=\"How_Can_I_Add_a_Process_Performance_Visual_in_React_Component\"><\/span>How Can I Add a Process Performance Visual in React Component?<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<p class=\"graf graf--p\">When using conventional platforms, adding a performance tracker is not as simple as it seems. It involves lots of data, responsive and interactive visualizations, and designing and coding an effective display. To clarify, if handled from scratch, then all these things can cause a wide range of problems. Also, they may require an enormous amount of developer effort.<\/p>\r\n<p class=\"graf graf--p\">To address this, FusionCharts provides a simple mechanism that involves just a few lines of code.<\/p>\r\n<p class=\"graf graf--p\">Everything is internally handled by the FusionCharts library itself. Take a look!<\/p>\r\n\r\n<pre class=\"graf graf--pre\">export default class ProcessPerformance extends Component {\r\n    render() {\r\n        let serverData = this.props.serverData,<\/pre>\r\n<pre class=\"graf graf--pre\">        \/\/ sort the doughnut chart that needs to be rendered by the name of process step\r\n        doughnutNames = getUniqueElementsArray(serverData, 'processStep').sort((a,b)=&gt; a &gt; b),\r\n        len = serverData.length;<\/pre>\r\n<pre class=\"graf graf--pre\">        return (\r\n            &lt;div className=\"row\"&gt;\r\n                &lt;div className=\"col-12\"&gt;\r\n                    &lt;div className=\"chart\"&gt;\r\n                        {len ? (&lt;ReactFC {...chartGenerator({type: 'line', dataSource: processCountByTimeBucket}, serverData)}\/&gt;) : Loader()}\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n                {\r\n                    \/\/ Display the number of doughnut charts according to the server data\r\n                    doughnutNames.map(stepName =&gt; (\r\n                        &lt;div className=\"col-xl-3 col-sm-6 col-12\" key={stepName}&gt;\r\n                            &lt;div className=\"chart chart-doughnut\"&gt;\r\n                                {len ? (&lt;ReactFC {...chartGenerator({type: 'doughnut2d', dataSource: countOfEachProcessStep}, serverData, stepName)}\/&gt;) : Loader()}\r\n                            &lt;\/div&gt;\r\n                        &lt;\/div&gt;\r\n                    ))\r\n                }\r\n            &lt;\/div&gt;\r\n        )\r\n    }\r\n}<\/pre>\r\n<h3 class=\"graf graf--h4\"><span class=\"ez-toc-section\" id=\"What_is_an_Easy_Way_to_Add_a_Defect_Understanding_Component\"><\/span>What is an Easy Way to Add a Defect Understanding Component?<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<p class=\"graf graf--p\">The ability to Track enterprise or product performance is excellent in itself, but with FusionCharts, it doesn&#8217;t stop there. Detecting flaws and potential defects in your process or products is also essential.<\/p>\r\n<p class=\"graf graf--p\">That is why your FusionCharts dashboard provides a complete overview, allowing you to integrate defect metrics into your console.<\/p>\r\n<p class=\"graf graf--p\">FusionCharts offers a ready-to-use codebase that you can basically plug into your manufacturing quality dashboard and start getting meaningful insights out of them.<\/p>\r\n\r\n<pre class=\"graf graf--pre\">export default class DefectUnderstanding extends Component {\r\n    render() {\r\n        let serverData = this.props.serverData,\r\n        len = serverData.length;<\/pre>\r\n<pre class=\"graf graf--pre\">        return (\r\n            &lt;div className=\"row\"&gt;\r\n                &lt;div className=\"col-md-6 col-12\"&gt;\r\n                    &lt;div className=\"chart\"&gt;\r\n                        {len ? (&lt;ReactFC {...chartGenerator({type: 'radar', dataSource: defectCountByDefectType}, serverData)}\/&gt;) : Loader()}\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n                &lt;div className=\"col-md-6 col-12\"&gt;\r\n                    &lt;div className=\"chart\"&gt;\r\n                        {len ? (&lt;ReactFC {...chartGenerator({type: 'bar2d', dataSource: defectCountByTester}, serverData)}\/&gt;) : Loader()}\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n                &lt;div className=\"col-xl-12 col-12\"&gt;\r\n                    &lt;div className=\"chart\"&gt;\r\n                        {len ? (&lt;ReactFC {...chartGenerator({type: 'treemap', dataSource: defectCountByProductFamily}, serverData)}\/&gt;): Loader()}\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n        )\r\n    }\r\n}\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18032 size-full\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/05\/Manufacturing-Quality-Dashboard.png\" alt=\"Manufacturing Quality Dashboard\" width=\"1308\" height=\"758\" srcset=\"\/blog\/wp-content\/uploads\/2021\/05\/Manufacturing-Quality-Dashboard.png 1308w, \/blog\/wp-content\/uploads\/2021\/05\/Manufacturing-Quality-Dashboard-300x174.png 300w, \/blog\/wp-content\/uploads\/2021\/05\/Manufacturing-Quality-Dashboard-768x445.png 768w, \/blog\/wp-content\/uploads\/2021\/05\/Manufacturing-Quality-Dashboard-1024x593.png 1024w\" sizes=\"auto, (max-width: 1308px) 100vw, 1308px\" \/><\/pre>\r\n<p class=\"graf graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.fusioncharts.com\/dashboards\/manufacturing-quality-dashboard\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/www.fusioncharts.com\/dashboards\/manufacturing-quality-dashboard\">Source Code for Manufacturing Quality Dashboard<\/a><\/p>\r\n<p class=\"graf graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.fusioncharts.com\/demos\/dashboards\/manufacturing-quality-dashboard\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/www.fusioncharts.com\/demos\/dashboards\/manufacturing-quality-dashboard\/\">Manufacturing Quality Dashboard Demo<\/a><\/p>\r\n<p class=\"graf graf--p\">So, here we are! FusionCharts has made it to design and develop a manufacturing quality dashboard for your use case. Another critical point is how FusionCharts supports a wide variety of bindings out of the box. Bindings supported, for instance, including Javascript, Angular, React, jQuery, Vue.js, Ember, React Native, AngularJS, Svelte, ASP.NET, PHP, Java, Ruby on Rails, and Django.<\/p>\r\n<p class=\"graf graf--p\">Let us know in the comment section below how you use FusionCharts to create your manufacturing quality dashboard.<\/p>\r\n<p class=\"graf graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/www.fusioncharts.com\/download\/\">Download FusionCharts and get started today!<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Digital transformations have impacted a wide range of industries, enabling them to think out-of-the-box and imaginatively integrate technology into their existing operational procedures. Data analytics and visualizations in the form of a performance and quality dashboard is a prime example of how digital transformations allow enterprises to use data in their decision-making and thought processes. [&hellip;]<\/p>\n","protected":false},"author":55,"featured_media":17961,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[709,722],"tags":[29,683,97,98,105,152,211,758,759,757],"coauthors":[737],"class_list":["post-17952","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dashboard","category-fusioncharts","tag-analytics","tag-charts","tag-dashboard","tag-dashboard-design","tag-data-visualization","tag-fusioncharts","tag-javascript","tag-manufacturing-performance","tag-quality-control","tag-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create Stunning Manufacturing Performance and Quality Dashboards with\u00a0React.js<\/title>\n<meta name=\"description\" content=\"It is easy to create a strong visulal performance and quality dashboard for your manufacturing enterprise with React.js and FusionCharts\" \/>\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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Stunning Manufacturing Performance and Quality Dashboards with\u00a0React.js\" \/>\n<meta property=\"og:description\" content=\"It is easy to create a strong visulal performance and quality dashboard for your manufacturing enterprise with React.js and FusionCharts\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-21T05:32:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-23T23:15:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/05\/manudashboard.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1281\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Emad Bin Abid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emad Bin Abid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Emad Bin Abid\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/1eddd6ac5f4437245b996d06590e1fce\"\n\t            },\n\t            \"headline\": \"Create Stunning Manufacturing Performance and Quality Dashboards with\u00a0React.js\",\n\t            \"datePublished\": \"2021-05-21T05:32:20+00:00\",\n\t            \"dateModified\": \"2021-12-23T23:15:32+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/\"\n\t            },\n\t            \"wordCount\": 661,\n\t            \"commentCount\": 0,\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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/05\/manudashboard.jpg\",\n\t            \"keywords\": [\n\t                \"analytics\",\n\t                \"charts\",\n\t                \"dashboard\",\n\t                \"dashboard design\",\n\t                \"data visualization\",\n\t                \"FusionCharts\",\n\t                \"javascript\",\n\t                \"manufacturing-performance\",\n\t                \"quality-control\",\n\t                \"react\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Dashboard\",\n\t                \"FusionCharts\"\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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/\",\n\t            \"name\": \"Create Stunning Manufacturing Performance and Quality Dashboards with\u00a0React.js\",\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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/05\/manudashboard.jpg\",\n\t            \"datePublished\": \"2021-05-21T05:32:20+00:00\",\n\t            \"dateModified\": \"2021-12-23T23:15:32+00:00\",\n\t            \"description\": \"It is easy to create a strong visulal performance and quality dashboard for your manufacturing enterprise with React.js and FusionCharts\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/\"\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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2021\/05\/manudashboard.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2021\/05\/manudashboard.jpg\",\n\t            \"width\": 1920,\n\t            \"height\": 1281\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#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\": \"Create Stunning Manufacturing Performance and Quality Dashboards with\u00a0React.js\"\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\/1eddd6ac5f4437245b996d06590e1fce\",\n\t            \"name\": \"Emad Bin Abid\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/d0bac2c2fe471b4c6f7b4d3bcd39364d\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/88f\/88f17af503508a48a3ccc99ad09d3fb2x96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/88f\/88f17af503508a48a3ccc99ad09d3fb2x96.jpg\",\n\t                \"caption\": \"Emad Bin Abid\"\n\t            },\n\t            \"description\": \"I'm a software engineer who has a bright vision and a strong interest in designing and engineering software solutions. I readily understand that in today's agile world the development process has to be rapid, reusable, and scalable; hence it is extremely important to develop solutions that are well-designed and embody a well-thought-of architecture as the baseline. Apart from designing and developing business solutions, I'm a content writer who loves to document technical learnings and experiences so that peers in the same industry can also benefit from them.\",\n\t            \"sameAs\": [\n\t                \"https:\/\/www.linkedin.com\/in\/emadbinabid\/\"\n\t            ],\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/emadbinabid\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Stunning Manufacturing Performance and Quality Dashboards with\u00a0React.js","description":"It is easy to create a strong visulal performance and quality dashboard for your manufacturing enterprise with React.js and FusionCharts","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\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/","og_locale":"en_US","og_type":"article","og_title":"Create Stunning Manufacturing Performance and Quality Dashboards with\u00a0React.js","og_description":"It is easy to create a strong visulal performance and quality dashboard for your manufacturing enterprise with React.js and FusionCharts","og_url":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2021-05-21T05:32:20+00:00","article_modified_time":"2021-12-23T23:15:32+00:00","og_image":[{"width":1920,"height":1281,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/05\/manudashboard.jpg","type":"image\/jpeg"}],"author":"Emad Bin Abid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Emad Bin Abid","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/"},"author":{"name":"Emad Bin Abid","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/1eddd6ac5f4437245b996d06590e1fce"},"headline":"Create Stunning Manufacturing Performance and Quality Dashboards with\u00a0React.js","datePublished":"2021-05-21T05:32:20+00:00","dateModified":"2021-12-23T23:15:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/"},"wordCount":661,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/05\/manudashboard.jpg","keywords":["analytics","charts","dashboard","dashboard design","data visualization","FusionCharts","javascript","manufacturing-performance","quality-control","react"],"articleSection":["Dashboard","FusionCharts"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/","url":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/","name":"Create Stunning Manufacturing Performance and Quality Dashboards with\u00a0React.js","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/05\/manudashboard.jpg","datePublished":"2021-05-21T05:32:20+00:00","dateModified":"2021-12-23T23:15:32+00:00","description":"It is easy to create a strong visulal performance and quality dashboard for your manufacturing enterprise with React.js and FusionCharts","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2021\/05\/manudashboard.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2021\/05\/manudashboard.jpg","width":1920,"height":1281},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/create-stunning-manufacturing-performance-and-quality-dashboards-with-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Stunning Manufacturing Performance and Quality Dashboards with\u00a0React.js"}]},{"@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\/1eddd6ac5f4437245b996d06590e1fce","name":"Emad Bin Abid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/d0bac2c2fe471b4c6f7b4d3bcd39364d","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/88f\/88f17af503508a48a3ccc99ad09d3fb2x96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/88f\/88f17af503508a48a3ccc99ad09d3fb2x96.jpg","caption":"Emad Bin Abid"},"description":"I'm a software engineer who has a bright vision and a strong interest in designing and engineering software solutions. I readily understand that in today's agile world the development process has to be rapid, reusable, and scalable; hence it is extremely important to develop solutions that are well-designed and embody a well-thought-of architecture as the baseline. Apart from designing and developing business solutions, I'm a content writer who loves to document technical learnings and experiences so that peers in the same industry can also benefit from them.","sameAs":["https:\/\/www.linkedin.com\/in\/emadbinabid\/"],"url":"https:\/\/www.fusioncharts.com\/blog\/author\/emadbinabid\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/17952","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\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=17952"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/17952\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/17961"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=17952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=17952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=17952"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=17952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}