{"id":16587,"date":"2017-12-05T17:48:57","date_gmt":"2017-12-05T12:18:57","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16587"},"modified":"2026-01-20T14:41:31","modified_gmt":"2026-01-20T09:11:31","slug":"reusable-react-components-multiple-charts","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/","title":{"rendered":"Creating Reusable React Components to Deploy Multiple Charts 2026"},"content":{"rendered":"ReactJS is a front-end library written in JavaScript that allows developers to create dynamic and responsive user interfaces. It allows you to divide your UI into reusable pieces that are functionally independent of one another. These are referred to as reusable components. Reusable components allow for faster development because the next time a developer needs to create a similar UI, they can reuse one of the previously created components, resulting in less code being written. Reusable components also aid in the maintenance of design consistency.\r\n\r\nIn this post, you&#8217;ll learn how to create reusable react components to deploy multiple charts and \u00a0If you\u2019re looking for a <a href=\"https:\/\/www.fusioncharts.com\/react-charts\">React Chart\u00a0Tool<\/a>, we suggest using fusioncharts for creating multiple charts with ReactJs.\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\/reusable-react-components-multiple-charts\/#Popularity_with_Developers\" title=\"Popularity with Developers\">Popularity with Developers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#Benefits_of_ReactJS\" title=\"Benefits of ReactJS\">Benefits of ReactJS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#Integrating_FusionCharts_with_ReactJS\" title=\"Integrating FusionCharts with ReactJS\">Integrating FusionCharts with ReactJS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#About_the_React-FusionCharts_Component\" title=\"About the React-FusionCharts Component\">About the React-FusionCharts Component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#Downloading_the_Required_Components\" title=\"Downloading the Required Components\">Downloading the Required Components<\/a><\/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\/reusable-react-components-multiple-charts\/#Integrating_the_FusionCharts_Extension_with_ReactJS\" title=\"Integrating the FusionCharts Extension with ReactJS\">Integrating the FusionCharts Extension with ReactJS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#Creating_the_Chart_Instance\" title=\"Creating the Chart Instance\">Creating the Chart Instance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#Configuring_the_Chart_and_Creating_the_Data_Source\" title=\"Configuring the Chart and Creating the Data Source\">Configuring the Chart and Creating the Data Source<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#Creating_the_Reusable_React_Component\" title=\"Creating the Reusable React Component\">Creating the Reusable React Component<\/a><\/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\/reusable-react-components-multiple-charts\/#Changing_the_Chart_Type\" title=\"Changing the Chart Type\">Changing the Chart Type<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#Changing_the_Chart_Attributes\" title=\"Changing the Chart Attributes\">Changing the Chart Attributes<\/a><\/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\/reusable-react-components-multiple-charts\/#Changing_the_Chart_Data\" title=\"Changing the Chart Data\">Changing the Chart Data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#Rendering_the_Chart\" title=\"Rendering the Chart\">Rendering the Chart<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#Output\" title=\"Output\">Output<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Popularity_with_Developers\"><\/span>Popularity with Developers<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nReactJS topped the charts in a <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2017#technology-most-loved-dreaded-and-wanted-frameworks-libraries-and-other-technologies\" target=\"_blank\" rel=\"noopener noreferrer\">developer poll conducted by StackOverflow<\/a> in 2017 to study library popularity among developers. Some of the reasons why ReactJS is so popular among developers include:\r\n<ul>\r\n \t<li>ReactJS is based on JavaScript and, on its own, ReactJS has a limited API and few functions. This is why a developer\u2019s familiarity with JavaScript will help them ace ReactJS in not more than a few hours.<\/li>\r\n \t<li>ReactJS gained immense popularity after Angular 2 deprecated backward compatibility. React\u2019s performance benefits made it the best replacement for Angular 2.<\/li>\r\n \t<li>With the speed of JavaScript and no dependence on a domain-specific language, React revolutionizes the programming of user interfaces.<\/li>\r\n<\/ul>\r\n<h2><span class=\"ez-toc-section\" id=\"Benefits_of_ReactJS\"><\/span>Benefits of ReactJS<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIn addition to the reasons for its popularity among developers, ReactJS also offers the following advantages:\r\n<ul>\r\n \t<li>ReactJS gives developers the ability to build reusable components. This reusability is perhaps one of the most significant advantages that ReactJS has to offer since it also translates to saving time along with maintaining design consistency.<\/li>\r\n \t<li>The components are isolated from each other. Change in one, therefore, does not affect the others unless it is allowed. This makes managing updates easy.<\/li>\r\n \t<li>Downward data binding also ensures that changes in the structure of child components don\u2019t affect the parents. This, in turn, provides code stability.<\/li>\r\n \t<li>It is easier for search engines to index web pages built using React.<\/li>\r\n<\/ul>\r\n<h2><span class=\"ez-toc-section\" id=\"Integrating_FusionCharts_with_ReactJS\"><\/span>Integrating FusionCharts with ReactJS<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<h2><span class=\"ez-toc-section\" id=\"About_the_React-FusionCharts_Component\"><\/span>About the React-FusionCharts Component<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFusionCharts Suite XT comes with an extensive range of charts, widgets, and gauges to plot static and real-time data. The JavaScript-based charting library also has several basic and advanced configuration options helpful in creating the charts.\r\n\r\nThe React-FusionCharts component lets you add interactive JavaScript charts to your web and mobile applications using a single reusable React component.\r\n<h2><span class=\"ez-toc-section\" id=\"Downloading_the_Required_Components\"><\/span>Downloading the Required Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nBefore we start with how you can create charts using the React-FusionCharts component, you need to:\r\n<strong>Download <a href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">FusionCharts Suite XT<\/a>.<\/strong>\r\nThe library is downloaded as a zip package. To install it, unzip and copy the downloaded files in your project folder.\r\n\r\n<strong>Download <a href=\"https:\/\/www.fusioncharts.com\/reactjs-charts\/\" target=\"_blank\" rel=\"noopener noreferrer\">React-FusionCharts component<\/a>.<\/strong>\r\nThis is also downloaded as a zip package. Unzip this and copy the downloaded files into your project folder.\r\n<h2><span class=\"ez-toc-section\" id=\"Integrating_the_FusionCharts_Extension_with_ReactJS\"><\/span>Integrating the FusionCharts Extension with ReactJS<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo include the FusionCharts library and the React-FusionCharts component in your project, copy the following code and paste it in your JS file:\r\n<pre class=\"lang:markup decode:true\">&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/react@0.13.3\/dist\/JSXTransformer.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/react@15\/dist\/react.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/react-dom@15\/dist\/react-dom.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/fusioncharts\/fusioncharts.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/react-fusioncharts\/dist\/react-fusioncharts.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_Chart_Instance\"><\/span>Creating the Chart Instance<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFor this tutorial\u2019s sample, we will create a column 2D chart. This chart will plot the top global oil reserves for the previous year.\r\n<h2><span class=\"ez-toc-section\" id=\"Configuring_the_Chart_and_Creating_the_Data_Source\"><\/span>Configuring the Chart and Creating the Data Source<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo set the chart configuration and create the data source for the sample chart, copy the following code and paste it into your JS file:\r\n<pre class=\"lang:json decode:true \">{\r\n        \"chart\": {\r\n          \"caption\": \"Top Global Oil Reserves\",\r\n          \"subCaption\": \"[2015-16]\",\r\n          \"xAxisName\": \"MMbbl= One Million barrels\",\r\n          \"yAxisName\": \"Reserves (MMbbl)\",\r\n      \t\/\/ extra attributes \r\n          \"numberSuffix\": \"K\",\r\n          \"showValues\": \"0\",\r\n          \"showLabels\": \"0\",\r\n          \"showHoverEffect\": \"1\",\r\n          \"use3DLighting\": \"0\",\r\n          \"showaxislines\": \"1\",\r\n          \"theme\": \"hulk-light\"\r\n \r\n    \t},\r\n        \"data\": [{\r\n          \"label\": \"Venezuela\",\r\n          \"value\": \"290\"\r\n    \t}, {\r\n          \"label\": \"Saudi\",\r\n          \"value\": \"260\"\r\n    \t}, {\r\n          \"label\": \"Canada\",\r\n          \"value\": \"180\"\r\n    \t}, {\r\n          \"label\": \"Iran\",\r\n          \"value\": \"140\"\r\n    \t}, {\r\n          \"label\": \"Russia\",\r\n          \"value\": \"115\"\r\n    \t}, {\r\n          \"label\": \"UAE\",\r\n          \"value\": \"100\"\r\n    \t}, {\r\n          \"label\": \"US\",\r\n    \t  \"value\": \"30\"\r\n    \t}, {\r\n          \"label\": \"China\",\r\n          \"value\": \"30\"\r\n    \t}]\r\n  \t}<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_the_Reusable_React_Component\"><\/span>Creating the Reusable React Component<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nWe\u2019ll now create a component that will contain the basic chart configuration like the chart width and height, the data format, and the data source. In the subsequent sections, where we change a part of the chart\u2019s configuration, we\u2019ll reuse this component to retain the basic configuration of the chart.\r\n\r\nTo create the chart component, copy the following code and paste it in your JS file:\r\n<pre class=\"lang:javascript decode:true\">var chartConfigs = {\r\n    \ttype: 'column2d',\r\n        renderAt: 'chart-container',\r\n    \twidth: '550',\r\n        height: '350',\r\n        dataFormat: 'json',\r\n        dataSource: myDataSource\r\n  \t}<\/pre>\r\nThe <code>chartConfigs<\/code> component contains the chart\u2019s basic configuration.\r\n<h2><span class=\"ez-toc-section\" id=\"Changing_the_Chart_Type\"><\/span>Changing the Chart Type<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo change the chart type at runtime, copy the following code and paste it in your JS file:\r\n<pre class=\"lang:javascript decode:true \">const element = ( &lt;div&gt;\r\n    \tChange Chart Type:\r\n    \t&lt;br \/&gt;&lt;label&gt;\r\n        &lt;input name = 'chart-type'\r\n    \tid = 'columntype'\r\n    \ttype = 'radio'\r\n    \tvalue = 'column2d'\/&gt; Column &lt;\/label&gt; &lt;label &gt;\r\n        &lt;input name = 'chart-type'\r\n    \tid = 'linetype'\r\n    \ttype = 'radio'\r\n    \tvalue = 'line'\/&gt; Line &lt;\/label&gt;\r\n \r\n        &lt;label&gt;\r\n        &lt;input name = 'chart-type'\r\n    \tid = 'bartype'\r\n    \ttype = 'radio'\r\n    \tvalue = 'bar2d'\/&gt; Bar &lt;\/label&gt; &lt;label&gt;\r\n        &lt;input name = 'chart-type'\r\n    \tid = 'ptype'\r\n    \ttype = 'radio'\r\n    \tvalue = 'pie2d'\/&gt; Pie &lt;\/label&gt; &lt;\/div&gt; );\r\n \r\n        ReactDOM.render( &lt; ReactFC {...chartConfigs\r\n      \t}\r\n          \/&gt;,\r\n          document.getElementById(\"top\")\r\n    \t);\r\n    \tvar refreshChart = function(){\r\n        chartConfigs.type = \"column2d\";\r\n        chartConfigs.dataSource.chart.caption = \"Top Global Oil Reserves\";\r\n        chartConfigs.dataSource.chart.subCaption = \"[2015-16]\";\r\n    \tdelete chartConfigs.dataSource.chart.paletteColors;\r\n        chartConfigs.dataSource.chart.showLabels = \"0\";\r\n       chartConfigs.dataSource=myDataSource; ReactDOM.unmountComponentAtNode(document.getElementById('top'));\r\n            ReactDOM.render( &lt; ReactFC {...chartConfigs\r\n              }\r\n              \/&gt;,\r\n              document.getElementById(\"top\")\r\n        \t);\r\n    \t};\r\n        document.getElementById(\"nn\").addEventListener(\"click\", function() {\r\n          refreshChart();\r\n          console.log(this.getAttribute('id'));\r\n          ReactDOM.render(element, document.getElementById(\"controllers\"));\r\n      \tvar radio = document.getElementsByTagName('input');\r\n          console.log(radio);\r\n      \tfor (i = 0; i &lt; radio.length; i++) {\r\n            radElem = radio[i];\r\n        \tif (radElem.type === 'radio') {\r\n              radElem.addEventListener(\"click\", function() {\r\n                console.log(\"fdf\");\r\n                var id = this.getAttribute('id');\r\n                console.log(id);\r\n                console.log(chartConfigs.type);\r\n                switch (id) {\r\n                  case \"linetype\":\r\n                    val = this.getAttribute('value');\r\n \r\n                    chartConfigs.type = val;\r\n \r\n                    ReactDOM.unmountComponentAtNode(document.getElementById('top'));\r\n                    ReactDOM.render( &lt; ReactFC {...chartConfigs\r\n                      }\r\n                      \/&gt;,\r\n                      document.getElementById(\"top\")\r\n                    );\r\n                    break;\r\n                  case \"columntype\":\r\n                    val = this.getAttribute('value');\r\n                    chartConfigs.type = val;\r\n \r\n                    ReactDOM.unmountComponentAtNode(document.getElementById('top'));\r\n                    ReactDOM.render( &lt; ReactFC {...chartConfigs\r\n                      }\r\n                      \/&gt;,\r\n                      document.getElementById(\"top\")\r\n                    );\r\n                    break;\r\n                  case \"ptype\":\r\n                    val = this.getAttribute('value');\r\n                    console.log(chartConfigs.type);\r\n  \t              chartConfigs.type = val;\r\n                    var t = Object.assign({}, chartConfigs);\r\n                    ReactDOM.unmountComponentAtNode(document.getElementById('top'));\r\n                    ReactDOM.render( &lt; ReactFC {...t\r\n                      }\r\n                      \/&gt;,\r\n                      document.getElementById(\"top\")\r\n                    );\r\n                    break;\r\n \r\n                  case \"bartype\":\r\n                    val = this.getAttribute('value');\r\n                    chartConfigs.type = val;\r\n                    ReactDOM.unmountComponentAtNode(document.getElementById('top'));\r\n                    ReactDOM.render( &lt; ReactFC {...chartConfigs\r\n                      }\r\n                      \/&gt;,\r\n                      document.getElementById(\"top\")\r\n                    );\r\n                    break;\r\n                }\r\n              });\r\n        \t}\r\n      \t}\r\n    \t});<\/pre>\r\nThis will render four radio buttons below the chart, allowing you to choose from the column, line, bar, and pie chart types. In the above code, the <code>ReactDOM.render()<\/code> method calls the <code>chartConfigs<\/code> \u00a0reusable react component to re-render the chart. This saves the developer from rewriting the chart&#8217;s basic configuration and focusing only on the updates in the configuration.\r\n<h2><span class=\"ez-toc-section\" id=\"Changing_the_Chart_Attributes\"><\/span>Changing the Chart Attributes<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo update chart attributes at runtime, copy the following code and paste it in your JS file:\r\n<pre class=\"lang:javascript decode:true\">const secondElement = ( &lt;div&gt;\r\n          Change Attribute: &lt;br \/&gt;\r\n          &lt;label&gt;\r\n          &lt;input name = 'attr-type'\r\n     \t id = 'Captiontype'\r\n      \ttype = 'radio'\r\n          value = 'caption'\/&gt; Caption &lt;\/label&gt; &lt;label&gt;\r\n          &lt;input name = 'attr-type'\r\n      \tid = 'sCaptiontype'\r\n      \ttype = 'radio'\r\n          value = 'subCaption'\/&gt; Sub - Caption &lt;\/label&gt;\r\n \r\n    \t  &lt;label&gt;\r\n          &lt;input name = 'attr-type'\r\n      \tid = 'pltype'\r\n      \ttype = 'radio'\r\n          value = 'paletteColors'\/&gt; Palette Colors &lt;\/label&gt; &lt;label&gt;\r\n          &lt;input name = 'attr-type'\r\n      \tid = 'labeltype'\r\n      \ttype = 'radio'\r\n \t     value = 'showLabels'\/&gt; Show Labels &lt;\/label&gt; &lt;\/div&gt; );\r\n \r\n          document.getElementById(\"kk\").addEventListener(\"click\", function() {\r\n            refreshChart();\r\n            console.log(this.getAttribute('id'));\r\n            ReactDOM.render(secondElement, document.getElementById(\"controllers\"));\r\n            var radio = document.getElementsByTagName('input');\r\n            console.log(radio);\r\n            for (i = 0; i &lt; radio.length; i++) {\r\n              radElem = radio[i];\r\n              if (radElem.type === 'radio') {\r\n                radElem.addEventListener(\"click\", function() {\r\n                  console.log(\"fdf\");\r\n                  var id = this.getAttribute('id');\r\n                  console.log(id);\r\n                  console.log(chartConfigs.type);\r\n\t              switch (id) {\r\n                    case \"Captiontype\":\r\n                      chartConfigs.dataSource.chart.caption = \"Country-wise Oil Reserves\";\r\n                      chartConfigs.dataSource.chart.subCaption = \"[2015-16]\";\r\n                      delete chartConfigs.dataSource.chart.paletteColors;\r\n                      chartConfigs.dataSource.chart.showLabels = \"0\";\r\n                      ReactDOM.unmountComponentAtNode(document.getElementById('top'));\r\n                      ReactDOM.render( &lt; ReactFC {...chartConfigs\r\n                    \t}\r\n                    \t\/&gt;,\r\n                        document.getElementById(\"top\")\r\n                      );\r\n                      break;\r\n                    case \"sCaptiontype\":\r\n                      chartConfigs.dataSource.chart.caption = \"Top Global Oil Reserves\";\r\n                      chartConfigs.dataSource.chart.subCaption = \"From Year 2015 to 2016\";\r\n                      delete chartConfigs.dataSource.chart.paletteColors;\r\n                      chartConfigs.dataSource.chart.showLabels = \"0\";\r\n \r\n                      ReactDOM.unmountComponentAtNode(document.getElementById('top'));\r\n                      ReactDOM.render( &lt; ReactFC {...chartConfigs\r\n                    \t}\r\n                    \t\/&gt;,\r\n      \t              document.getElementById(\"top\")\r\n                      );\r\n                      break;\r\n                    case \"pltype\":\r\n                      chartConfigs.dataSource.chart.caption = \"Top Global Oil Reserves\";\r\n                      chartConfigs.dataSource.chart.subCaption = \"[2015-16]\";\r\n                      chartConfigs.dataSource.chart.paletteColors = \"#21EFE6,#E9EF21,#FAA609,#D3A7F5,#DB0ADB,#635A63,#FF5733,#DAF7A6,#900C3F,#5F5CD3\";\r\n                      chartConfigs.dataSource.chart.showLabels = \"0\";\r\n                      ReactDOM.unmountComponentAtNode(document.getElementById('top'));\r\n \r\n                      ReactDOM.render( &lt; ReactFC {...chartConfigs\r\n                    \t}\r\n                    \t\/&gt;,\r\n                    \tdocument.getElementById(\"top\")\r\n                      );\r\n \r\n                      break;\r\n \r\n                    case \"labeltype\":\r\n                      chartConfigs.dataSource.chart.caption = \"Top Global Oil Reserves\";\r\n                      chartConfigs.dataSource.chart.subCaption = \"[2015-16]\";\r\n \r\n                      delete chartConfigs.dataSource.chart.paletteColors;\r\n                      chartConfigs.dataSource.chart.showLabels = \"1\";\r\n \r\n                      ReactDOM.unmountComponentAtNode(document.getElementById('top'));\r\n                  \tReactDOM.render( &lt; ReactFC {...chartConfigs\r\n                    \t}\r\n                    \t\/&gt;,\r\n                        document.getElementById(\"top\")\r\n                      );\r\n                      break;\r\n                  }\r\n    \t        });\r\n              }\r\n        \t}\r\n      \t});<\/pre>\r\nThis will render four radio buttons below the chart, allowing you to choose from the caption, sub-caption, palette colors, and show labels attributes to update at runtime. Again, the <code>ReactDOM.render()<\/code> method calls the reusable react component.\r\n<h2><span class=\"ez-toc-section\" id=\"Changing_the_Chart_Data\"><\/span>Changing the Chart Data<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo update the chart data at runtime, copy the following code and paste it in your JS file:\r\n<pre class=\"lang:javascript decode:true \">const thirdElement = (\r\n  \t&lt;div id='dataedit'&gt;\r\n          &lt;textarea id='data' rows=\"9\" editable cols=\"40\"&gt;&lt;\/textarea&gt;&lt;br \/&gt;\r\n          &lt;button type=\"button\" id='dataChange' class='btn-primary btn-sm'&gt;Change Data&lt;\/button&gt;\r\n      &lt;\/div&gt;\r\n  );\r\n  document.getElementById(\"ss\").addEventListener(\"click\", function() {\r\n      refreshChart();\r\n      console.log(this.getAttribute('id'));\r\n      \/\/console.log(thirdElement.props.children[0].props);\r\n  \r\n      ReactDOM.unmountComponentAtNode(document.getElementById('controllers'))\r\n      ReactDOM.render(thirdElement, document.getElementById(\"controllers\"));\r\n \r\n      document.getElementById(\"data\").value = JSON.stringify(myDataSource.data);\r\n  \r\n      console.log(document.getElementById(\"dataChange\"));\r\n      document.getElementById(\"dataChange\").addEventListener(\"click\", function() {\r\n      \tvar d = document.getElementById(\"data\").value;\r\n          chartConfigs.dataSource.data = JSON.parse(d);\r\n          ReactDOM.unmountComponentAtNode(document.getElementById('top'))\r\n          ReactDOM.render( &lt; ReactFC {...chartConfigs}\/&gt;,\r\n          document.getElementById(\"top\") );\r\n          console.log(d);\r\n  \t});\r\n\t});\r\n<\/pre>\r\nThis will render the chart data in a text box below the chart. Edit the chart data and click Change Data to update the chart data at runtime. Similar to the previous two examples, calling the reusable component will re-render the chart\u2019s basic configuration.\r\n<h2><span class=\"ez-toc-section\" id=\"Rendering_the_Chart\"><\/span>Rendering the Chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<strong>Rendering the chart by calling the function<\/strong>\r\nFinally, to render the chart, copy the following code and paste it in your JS file:\r\n<pre class=\"lang:javascript decode:true\">var MyApp = React.createClass({\r\n        render: function() {\r\n          return ( &lt;div id = \"chart-container\" &gt; &lt;\/div&gt;\r\n      \t);\r\n    \t}\r\n  \t});<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Output\"><\/span>Output<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nHere\u2019s how the chart will finally look.\r\n\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/jsfiddle.net\/fusioncharts\/19e47do4\/38\/embedded\/result,js,html,css\/\" frameborder=\"0\" width=\"100%\" height=\"494\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\r\n\r\nIn the result section, click any options listed in the pane on the left to see how the sample works.\r\n\r\nIf you see any errors in your code or have trouble executing the above sample, click here for the complete source code of the sample we have created for this tutorial.\r\nRead more on <a href=\"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/\" target=\"_blank\" rel=\"noopener noreferrer\">creating charts in ReactJS<\/a>.","protected":false},"excerpt":{"rendered":"<p>ReactJS is a front-end library written in JavaScript that allows developers to create dynamic and responsive user interfaces. It allows you to divide your UI into reusable pieces that are functionally independent of one another. These are referred to as reusable components. Reusable components allow for faster development because the next time a developer needs [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16603,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[693,695],"coauthors":[675,650],"class_list":["post-16587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-react-multiple-charts","tag-reusable-react-components"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating Reusable React Components To Deploy Multiple Charts<\/title>\n<meta name=\"description\" content=\"Part 1 of our JS Developer series! Explore the stories and inspirations of the developers shaping the 2026 JavaScript world. Read about the leaders 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\/reusable-react-components-multiple-charts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Reusable React Components To Deploy Multiple Charts\" \/>\n<meta property=\"og:description\" content=\"Part 1 of our JS Developer series! Explore the stories and inspirations of the developers shaping the 2026 JavaScript world. Read about the leaders today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-05T12:18:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/12\/Blog-Post-ReactFC.png\" \/>\n\t<meta property=\"og:image:width\" content=\"4200\" \/>\n\t<meta property=\"og:image:height\" content=\"1563\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jonathan, Soumya Dutta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan, Soumya Dutta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 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\/reusable-react-components-multiple-charts\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Jonathan\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb\"\n\t            },\n\t            \"headline\": \"Creating Reusable React Components to Deploy Multiple Charts 2026\",\n\t            \"datePublished\": \"2017-12-05T12:18:57+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:31+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/\"\n\t            },\n\t            \"wordCount\": 972,\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\/reusable-react-components-multiple-charts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/12\/Blog-Post-ReactFC.png\",\n\t            \"keywords\": [\n\t                \"React Multiple Charts\",\n\t                \"Reusable React Components\"\n\t            ],\n\t            \"articleSection\": [\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\/reusable-react-components-multiple-charts\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/\",\n\t            \"name\": \"Creating Reusable React Components To Deploy Multiple Charts\",\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\/reusable-react-components-multiple-charts\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/12\/Blog-Post-ReactFC.png\",\n\t            \"datePublished\": \"2017-12-05T12:18:57+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:31+00:00\",\n\t            \"description\": \"Part 1 of our JS Developer series! Explore the stories and inspirations of the developers shaping the 2026 JavaScript world. Read about the leaders today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#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\/reusable-react-components-multiple-charts\/\"\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\/reusable-react-components-multiple-charts\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/12\/Blog-Post-ReactFC.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/12\/Blog-Post-ReactFC.png\",\n\t            \"width\": 4200,\n\t            \"height\": 1563,\n\t            \"caption\": \"reusable react components to render multiple charts\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#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\": \"Creating Reusable React Components to Deploy Multiple Charts 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\/14fbfb07e81bfbcd524a4202f34bdcbb\",\n\t            \"name\": \"Jonathan\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"caption\": \"Jonathan\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Reusable React Components To Deploy Multiple Charts","description":"Part 1 of our JS Developer series! Explore the stories and inspirations of the developers shaping the 2026 JavaScript world. Read about the leaders 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\/reusable-react-components-multiple-charts\/","og_locale":"en_US","og_type":"article","og_title":"Creating Reusable React Components To Deploy Multiple Charts","og_description":"Part 1 of our JS Developer series! Explore the stories and inspirations of the developers shaping the 2026 JavaScript world. Read about the leaders today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-12-05T12:18:57+00:00","article_modified_time":"2026-01-20T09:11:31+00:00","og_image":[{"width":4200,"height":1563,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/12\/Blog-Post-ReactFC.png","type":"image\/png"}],"author":"Jonathan, Soumya Dutta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan, Soumya Dutta","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"Creating Reusable React Components to Deploy Multiple Charts 2026","datePublished":"2017-12-05T12:18:57+00:00","dateModified":"2026-01-20T09:11:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/"},"wordCount":972,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/12\/Blog-Post-ReactFC.png","keywords":["React Multiple Charts","Reusable React Components"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/","url":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/","name":"Creating Reusable React Components To Deploy Multiple Charts","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/12\/Blog-Post-ReactFC.png","datePublished":"2017-12-05T12:18:57+00:00","dateModified":"2026-01-20T09:11:31+00:00","description":"Part 1 of our JS Developer series! Explore the stories and inspirations of the developers shaping the 2026 JavaScript world. Read about the leaders today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/12\/Blog-Post-ReactFC.png","contentUrl":"\/blog\/wp-content\/uploads\/2017\/12\/Blog-Post-ReactFC.png","width":4200,"height":1563,"caption":"reusable react components to render multiple charts"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/reusable-react-components-multiple-charts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Reusable React Components to Deploy Multiple Charts 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\/14fbfb07e81bfbcd524a4202f34bdcbb","name":"Jonathan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","caption":"Jonathan"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16587","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\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16587"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16587\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16603"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16587"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}