{"id":16114,"date":"2017-08-24T19:22:43","date_gmt":"2017-08-24T13:52:43","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16114"},"modified":"2026-01-20T14:37:04","modified_gmt":"2026-01-20T09:07:04","slug":"react-js-chart-example","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/","title":{"rendered":"How to Create Amazing Charts Using ReactJS with FusionCharts 2026"},"content":{"rendered":"ReactJS is a popular JavaScript library used for front-end development. According to a <a class=\"editor-rtfLink\" href=\"https:\/\/insights.stackoverflow.com\/survey\/2017\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">StackOverflow survey<\/span><\/a> conducted in 2017, the popularity of ReactJS among developers has increased by 311 percent.\r\n\r\nWhile it can be used for a variety of applications, this tutorial will walk you through the process of creating charts with ReactJS. We will use the FusionCharts JavaScript library and its React-FusionCharts Component to accomplish this. This component enables developers to easily integrate the charting library with ReactJS.\r\n\r\n<span data-preserver-spaces=\"true\">In this post, you&#8217;ll learn how to create the chart with the use of a simple and easy-to-follow four-step process:<\/span>\r\n<ul>\r\n \t<li><span style=\"font-weight: 400\">Step 1: <em>Prepare the data<\/em><\/span><\/li>\r\n \t<li><span style=\"font-weight: 400\">Step 2: <em>Include the React and FusionCharts libraries<\/em><\/span><\/li>\r\n \t<li><span style=\"font-weight: 400\">Step 3: <em>Create chart instance<\/em><\/span><\/li>\r\n \t<li><span style=\"font-weight: 400\">Step 4: <em>Render the chart instance<\/em><\/span><\/li>\r\n<\/ul>\r\nRead on to find out how a <a href=\"https:\/\/www.fusioncharts.com\/react-charts\">React Chart<\/a> can be created using ReactJS with Fusioncharts.\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\/react-js-chart-example\/#Step_1_Prepare_the_Data\" title=\"Step 1: Prepare the Data\">Step 1: Prepare the Data<\/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\/react-js-chart-example\/#_Step_2_Include_the_React_and_FusionCharts_Libraries\" title=\"\u00a0Step 2: Include the React and FusionCharts Libraries\">\u00a0Step 2: Include the React and FusionCharts Libraries<\/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\/react-js-chart-example\/#Step_3_Create_a_Chart_Instance\" title=\"Step 3: Create a Chart Instance\">Step 3: Create a Chart Instance<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#Configuring_Chart_Cosmetics_Using_Chart_Attributes\" title=\"Configuring Chart Cosmetics Using Chart Attributes\">Configuring Chart Cosmetics Using Chart Attributes<\/a><\/li><\/ul><\/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\/react-js-chart-example\/#Step_4_Render_the_Chart_Instance\" title=\"Step 4: Render the Chart Instance\">Step 4: Render the Chart Instance<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Step_1_Prepare_the_Data\"><\/span><b>Step 1: Prepare the Data<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span style=\"font-weight: 400\">The first thing that you need to do is construct data in a format accepted by the libraries. Currently, FusionCharts accepts data in `<\/span><i><span style=\"font-weight: 400\">JSON`<\/span><\/i><span style=\"font-weight: 400\"> and `<\/span><i><span style=\"font-weight: 400\">XML`\u00a0<\/span><\/i><span style=\"font-weight: 400\">only. Hence we need to convert the raw data to one of these formats. For this example, we will use `<i>JSON`.<\/i>\u00a0We now have to convert each data value\u00a0into a JSON key-value pair.\r\nWe&#8217;ll be using the following data:<\/span>\r\n<table class=\"tg\">\r\n<tbody>\r\n<tr>\r\n<th class=\"tg-y2tu\">Apps<\/th>\r\n<th class=\"tg-y2tu\">Downloads<\/th>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-yw4l\">Sarahah<\/td>\r\n<td class=\"tg-yw4l\">3880000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-yw4l\">Messenger<\/td>\r\n<td class=\"tg-yw4l\">2570000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-yw4l\">Snake vs. Block<\/td>\r\n<td class=\"tg-yw4l\">2420000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-yw4l\">Facebook<\/td>\r\n<td class=\"tg-yw4l\">2140000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-yw4l\">Amazon<\/td>\r\n<td class=\"tg-yw4l\">1830000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-yw4l\">Spotify Music<\/td>\r\n<td class=\"tg-yw4l\">1540000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-yw4l\">Netflix<\/td>\r\n<td class=\"tg-yw4l\">1530000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-yw4l\">Word Connect<\/td>\r\n<td class=\"tg-yw4l\">1440000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-yw4l\">Pandora<\/td>\r\n<td class=\"tg-yw4l\">1300000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-yw4l\">WhatsApp Messenger<\/td>\r\n<td class=\"tg-yw4l\">1210000<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<span style=\"font-weight: 400\">Since the data is comparative, we can effectively visualize it using a bar chart. Based on the requirement of the bar chart, we will\u00a0convert our\u00a0source data into `<em>label`<\/em>\u00a0and `<em>value`\u00a0<\/em>key-value pairs in the JSON format. <\/span>\r\n\r\nAfter formatting all the data, the JSON representation will\u00a0look like this:\r\n<pre class=\"lang:js decode:true\" title=\"JSON data\">    {\r\n      \"label\": \"Sarahah\",\r\n      \"value\": \"3880000\"\r\n    }, {\r\n      \"label\": \"Messenger\",\r\n      \"value\": \"2570000\"\r\n    }, {\r\n      \"label\": \"Snake vs Block\",\r\n      \"value\": \"2420000\"\r\n    }, {\r\n      \"label\": \"Facebook\",\r\n      \"value\": \"2140000\"\r\n    }, {\r\n      \"label\": \"Amazon\",\r\n      \"value\": \"1830000\"\r\n    }, {\r\n      \"label\": \"Spotify Music\",\r\n      \"value\": \"1540000\"\r\n    }, {\r\n      \"label\": \"Netflix\",\r\n      \"value\": \"1530000\"\r\n    }, {\r\n      \"label\": \"Word Connect\",\r\n      \"value\": \"1440000\"\r\n    }, {\r\n      \"label\": \"Pandora\",\r\n      \"value\": \"1300000\"\r\n    }, {\r\n      \"label\": \"WhatsApp Messenger\",\r\n      \"value\": \"1210000\"\r\n    }<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"_Step_2_Include_the_React_and_FusionCharts_Libraries\"><\/span>\u00a0<b>Step 2: Include the React and FusionCharts Libraries<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span style=\"font-weight: 400\">To get started, you need to download the <\/span><span style=\"font-weight: 400\"><a href=\"https:\/\/www.fusioncharts.com\/react-charts\/#\/demos\/ex1\" target=\"_blank\" rel=\"noopener noreferrer\">React-FusionCharts Component<\/a><\/span>\r\n\r\n<span style=\"font-weight: 400\">The installation of the libraries is pretty simple. <\/span><span style=\"font-weight: 400\">You need to include the <code>fusioncharts.js<\/code> and the <code>react-fusioncharts.js<\/code> script source links in the `<\/span><i><span style=\"font-weight: 400\">head`<\/span><\/i><span style=\"font-weight: 400\">\u00a0of your HTML page, as shown in the code snippet below:<\/span>\r\n<pre class=\"lang:js decode:true\" title=\"&quot;&lt;Head\">&lt;html&gt;\r\n&lt;head&gt;\r\n &lt;title&gt;Top 10 iOS Apps in July 2017&lt;\/title&gt;\r\n\r\n &lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/react@latest\/dist\/react.js\"&gt;&lt;\/script&gt;\r\n &lt;script type=\"text\/javascript\" src=\"https:\/\/fb.me\/JSXTransformer-0.13.3.js\"&gt;&lt;\/script&gt;\r\n &lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/react@15.6.0\/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\/fusioncharts\/fusioncharts.charts.js\"&gt;&lt;\/script&gt;\r\n &lt;script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/fusioncharts@3.12.1\/themes\/fusioncharts.theme.ocean.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\r\n&lt;\/head&gt;\r\n&lt;\/html&gt;<\/pre>\r\n<span style=\"font-weight: 400\">To avoid misrepresentation, you must add the <code>react-fusioncharts.js<\/code> file after adding all other scripts<\/span><span style=\"font-weight: 400\">.<\/span>\r\n\r\n<span style=\"font-weight: 400\">Or, you can install the React-FusionCharts Component using NPM. <\/span><span style=\"font-weight: 400\">However<\/span><span style=\"font-weight: 400\">, the installation and rendering process would differ for this method.<\/span>\r\n\r\n<span style=\"font-weight: 400\">For NPM, you will have to first render install the ReactJS and FusionCharts packages. Next, you&#8217;ll have to\u00a0load the FusionCharts and Charts modules using the `<\/span><span style=\"font-weight: 400\">require`<\/span><span style=\"font-weight: 400\">\u00a0command. <a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/plain-javascript\/your-first-chart-using-plain-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">You can read more on installing via npm<\/a>.<\/span><span style=\"font-weight: 400\">\r\n<\/span>\r\n\r\n<b><i>Power up:<\/i><\/b><span style=\"font-weight: 400\"> You can do the entire setup by running <\/span><span style=\"font-weight: 400\">just<\/span><span style=\"font-weight: 400\"> one command: <\/span>\r\n\r\n<span style=\"font-weight: 400\">`npm install react react-dom fusioncharts react-fusioncharts \u2013save`.<\/span>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_3_Create_a_Chart_Instance\"><\/span><b>Step 3: Create a Chart Instance<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span style=\"font-weight: 400\">With the dependencies in place, we will create an instance for our chart. The chart instance will<\/span><span style=\"font-weight: 400\"> consist of two essential parts \u2013 the &#8216;<em>chart configuration&#8217;<\/em>\u00a0and the `<\/span><em><span style=\"font-weight: 400\">render()`<\/span><\/em><span style=\"font-weight: 400\">\u00a0method<\/span><span style=\"font-weight: 400\">.<\/span>\r\n\r\nJavaScript\/JSX:\r\n<pre class=\"lang:js decode:true \" title=\"Chart Instance\">  var myDataSource = {\r\n    chart: {\r\n      caption: \"Top 10 iOS Apps - July 2017\",\r\n      subCaption: \"Downloads (In Millions)\",\r\n      \"canvasBgAlpha\": \"0\",\r\n      \"bgColor\": \"#ffffff\",\r\n      \"bgAlpha\": \"70\",\r\n      \"baseFont\": \"Roboto\",\r\n      \"baseFontSize\": \"14\",\r\n      \"showAlternateVGridColor\": \"1\",\r\n      \"alternateVGridAlpha\": \"5\",\r\n      \"labelFontSize\": \"15\",\r\n      \"captionFontSize\": \"20\",\r\n      \"subCaptionFontSize\": \"16\",\r\n      \"toolTipColor\": \"#000000\",\r\n      \"toolTipBgColor\": \"#ffffff\",\r\n      \"toolTipAlpha\": \"90\",\r\n      \"captionFontBold\": \"0\",\r\n      \"subCaptionFontBold\": \"0\",\r\n      \"paletteColors\": \"#8E24AA\",\r\n      \"valueFontSize\": \"13\",\r\n      \"valueFontBold\": \"0\",\r\n      \"animation\": \"0\",\r\n      \"divLineAlpha\": \"15\",\r\n      \"divLineDashed\": \"0\",\r\n      \"plotFillAlpha\": \"90\",\r\n      theme: \"ocean\"\r\n    },\r\n    \"data\": [{\r\n      \"label\": \"Sarahah\",\r\n      \"value\": \"3880000\"\r\n    }, {\r\n      \"label\": \"Messenger\",\r\n      \"value\": \"2570000\"\r\n    }, {\r\n      \"label\": \"Snake vs Block\",\r\n      \"value\": \"2420000\"\r\n    }, {\r\n      \"label\": \"Facebook\",\r\n      \"value\": \"2140000\"\r\n    }, {\r\n      \"label\": \"Amazon\",\r\n      \"value\": \"1830000\"\r\n    }, {\r\n      \"label\": \"Spotify Music\",\r\n      \"value\": \"1540000\"\r\n    }, {\r\n      \"label\": \"Netflix\",\r\n      \"value\": \"1530000\"\r\n    }, {\r\n      \"label\": \"Word Connect\",\r\n      \"value\": \"1440000\"\r\n    }, {\r\n      \"label\": \"Pandora\",\r\n      \"value\": \"1300000\"\r\n    }, {\r\n      \"label\": \"WhatsApp Messenger\",\r\n      \"value\": \"1210000\"\r\n    }]\r\n  };\r\n\r\n  var barChartConfigs = {\r\n    id: \"bar-chart\",\r\n    renderAt: \"chart-container\",\r\n    type: \"bar2d\",\r\n    width: \"100%\",\r\n    height: 400,\r\n    dataFormat: \"json\",\r\n    dataSource: myDataSource\r\n  };\r\n  \r\n  var MyApp = React.createClass({\r\n    render: function() {\r\n      return ( \r\n      &lt;div id=\"chart-container\"&gt;&lt;\/div&gt;\r\n      );\r\n    }\r\n  });<\/pre>\r\n<span style=\"font-weight: 400\">The chart `<\/span><i><span style=\"font-weight: 400\">id`<\/span><\/i><span style=\"font-weight: 400\">\u00a0and the `<\/span><i><span style=\"font-weight: 400\">renderAt`<\/span><\/i><span style=\"font-weight: 400\">\u00a0objects in the Chart Configuration define the chart and the rendering element, <\/span><span style=\"font-weight: 400\">respectively<\/span><span style=\"font-weight: 400\">.<\/span>\r\n\r\n<span style=\"font-weight: 400\">`<i>type`<\/i><\/span><span style=\"font-weight: 400\">: attribute defines the JS chart alias to render. The bar chart is just one of the many chart types supported by the FusionCharts Suite. For the complete list of chart types supported by FusionCharts, you can refer to the <a href=\"https:\/\/www.fusioncharts.com\/dev\/chart-guide\/list-of-charts\" target=\"_blank\" rel=\"noopener noreferrer\">list of charts<\/a>.<\/span>\r\n\r\n<span style=\"font-weight: 400\">The `<\/span><i><span style=\"font-weight: 400\">width`<\/span><\/i><span style=\"font-weight: 400\">\u00a0and `<\/span><i><span style=\"font-weight: 400\">height`<\/span><\/i><span style=\"font-weight: 400\">\u00a0define the size of the chart canvas.<\/span>\r\n\r\n<span style=\"font-weight: 400\">Since we are using the JSON data, the `<\/span><i><span style=\"font-weight: 400\">dataFormat`<\/span><\/i><span style=\"font-weight: 400\">\u00a0is set to <code>JSON<\/code>.<\/span>\r\n<h3><span class=\"ez-toc-section\" id=\"Configuring_Chart_Cosmetics_Using_Chart_Attributes\"><\/span><b>Configuring Chart Cosmetics Using Chart Attributes<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nTo add to the visual appeal of the chart, we can configure chart attributes, some of which can are below:\r\n<h4><b>Canvas:<\/b><\/h4>\r\n<span style=\"font-weight: 400\"><em><code>bgColor<\/code><\/em> &#8211; Select the background color of the chart.<\/span>\r\n\r\n<span style=\"font-weight: 400\"><em><code>showAlternateVGridColor<\/code><\/em> &#8211; Creates alternating vertical grid bands by setting it to `1`.<\/span>\r\n\r\n<span style=\"font-weight: 400\"><em><code>paletteColors<\/code><\/em> &#8211; Assigns colors to be used in the chart elements.<\/span>\r\n\r\n<span style=\"font-weight: 400\"><em><code>Animation<\/code><\/em> &#8211; Selects chart animations on loading the chart.<\/span>\r\n\r\n<span style=\"font-weight: 400\"><em><code>divLineDashed<\/code><\/em> &#8211; Makes the divisional lines dashed by setting it to `1`.<\/span>\r\n\r\n<span style=\"font-weight: 400\"><em><code>plotFillAlpha<\/code><\/em> &#8211; Sets the transparency of the data objects in the chart.<\/span>\r\n<h4><b>Fonts:<\/b><\/h4>\r\n<span style=\"font-weight: 400\"><em><code>baseFont<\/code><\/em> &#8211; Selects any standard\/non-standard font family for the text used in the chart<\/span>\r\n\r\n<span style=\"font-weight: 400\"><em><code>baseFontSize<\/code><\/em> &#8211; Sets the font size of the values and text in the chart<\/span>\r\n\r\n<em><code>valueFontSize<\/code><\/em> &#8211; Sets the font size of the values\r\n<h4><b>Tooltips:<\/b><\/h4>\r\n<span style=\"font-weight: 400\"><em><code>toolTipColor<\/code><\/em> &#8211; Changes the color of the text in the tooltip<\/span>\r\n\r\n<span style=\"font-weight: 400\"><em><code>toolTipBgColor<\/code><\/em> &#8211; Changes the color of the tooltip background<\/span>\r\n\r\n<span style=\"font-weight: 400\"><em><code>toolTipAlpha<\/code><\/em> &#8211; Sets the transparency of the tooltip background<\/span>\r\n\r\nThese are only some of the attributes that help you customize the appearance of your chart. <span data-preserver-spaces=\"true\">You can read the\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/dev\/chart-attributes?chart=area2d\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">documentation on chart attributes<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0for the complete list of cosmetic and functional attributes supported.<\/span>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_4_Render_the_Chart_Instance\"><\/span><b>Step 4: Render the Chart Instance<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span style=\"font-weight: 400\">To render the chart, add an HTML container element in the body of your HTML page, as shown in the code snippet below:<\/span>\r\n\r\nHTML:\r\n<pre class=\"lang:markup decode:true \" title=\"HTML Parent Div\">&lt;div id=\"top\"&gt;&lt;div&gt;<\/pre>\r\nJavaScript\/JSX:\r\n<pre class=\"lang:js decode:true\" title=\"Body Code\"> React.render( &lt; MyApp \/ &gt; ,\r\n document.getElementById(\"top\")\r\n );<\/pre>\r\nTo summarize, in this example, we have created a React class that will\u00a0render the chart element when returned.\r\n\r\n<span style=\"font-weight: 400\">T<\/span><span style=\"font-weight: 400\">o render the chart, we have called the `<\/span><i><span style=\"font-weight: 400\">render()`<\/span><\/i><span style=\"font-weight: 400\"> method that will call the class we have created.<\/span>\r\n\r\nIf you have been following along, your output should look similar to the image shown below:\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16142\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png\" alt=\"React Charts FusionCharts\" width=\"738\" height=\"494\" srcset=\"\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png 738w, \/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts-150x100.png 150w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><\/a>\r\n\r\n\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/jsfiddle.net\/vhh81wzy\/6\/embedded\/result\/\" frameborder=\"0\" width=\"100%\" height=\"494\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\r\n\r\nHowever, if you&#8217;re unable to see any output, you can refer to this JSFiddle sample.\r\n<em><span style=\"font-weight: 400\">If you are still unable to get your chart running, we are <\/span><span style=\"font-weight: 400\">just a\u00a0<\/span><a href=\"https:\/\/www.fusioncharts.com\/support\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400\">ping<\/span><\/a><span style=\"font-weight: 400\"> away!<\/span><\/em>","protected":false},"excerpt":{"rendered":"<p>ReactJS is a popular JavaScript library used for front-end development. According to a StackOverflow survey conducted in 2017, the popularity of ReactJS among developers has increased by 311 percent. While it can be used for a variety of applications, this tutorial will walk you through the process of creating charts with ReactJS. We will use [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675],"class_list":["post-16114","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Amazing Charts Using ReactJS with FusionCharts 2026<\/title>\n<meta name=\"description\" content=\"Custom pattern fills and responsive typography: explore the exciting new features in our latest 2026 FusionCharts release. Build beautiful visuals 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\/react-js-chart-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Amazing Charts Using ReactJS with FusionCharts 2026\" \/>\n<meta property=\"og:description\" content=\"Custom pattern fills and responsive typography: explore the exciting new features in our latest 2026 FusionCharts release. Build beautiful visuals today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-24T13:52:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:07:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png\" \/>\n\t<meta property=\"og:image:width\" content=\"738\" \/>\n\t<meta property=\"og:image:height\" content=\"494\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jonathan\" \/>\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\" \/>\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\/react-js-chart-example\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/\"\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\": \"How to Create Amazing Charts Using ReactJS with FusionCharts 2026\",\n\t            \"datePublished\": \"2017-08-24T13:52:43+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:07:04+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/\"\n\t            },\n\t            \"wordCount\": 850,\n\t            \"commentCount\": 5,\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\/react-js-chart-example\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png\",\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\/react-js-chart-example\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/\",\n\t            \"name\": \"How to Create Amazing Charts Using ReactJS with FusionCharts 2026\",\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\/react-js-chart-example\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png\",\n\t            \"datePublished\": \"2017-08-24T13:52:43+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:07:04+00:00\",\n\t            \"description\": \"Custom pattern fills and responsive typography: explore the exciting new features in our latest 2026 FusionCharts release. Build beautiful visuals today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#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\/react-js-chart-example\/\"\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\/react-js-chart-example\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png\",\n\t            \"width\": 738,\n\t            \"height\": 494,\n\t            \"caption\": \"How to create amazing Charts using React JS with FusionCharts\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#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\": \"How to Create Amazing Charts Using ReactJS with 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\/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":"How to Create Amazing Charts Using ReactJS with FusionCharts 2026","description":"Custom pattern fills and responsive typography: explore the exciting new features in our latest 2026 FusionCharts release. Build beautiful visuals 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\/react-js-chart-example\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Amazing Charts Using ReactJS with FusionCharts 2026","og_description":"Custom pattern fills and responsive typography: explore the exciting new features in our latest 2026 FusionCharts release. Build beautiful visuals today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-08-24T13:52:43+00:00","article_modified_time":"2026-01-20T09:07:04+00:00","og_image":[{"width":738,"height":494,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png","type":"image\/png"}],"author":"Jonathan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"How to Create Amazing Charts Using ReactJS with FusionCharts 2026","datePublished":"2017-08-24T13:52:43+00:00","dateModified":"2026-01-20T09:07:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/"},"wordCount":850,"commentCount":5,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/","url":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/","name":"How to Create Amazing Charts Using ReactJS with FusionCharts 2026","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png","datePublished":"2017-08-24T13:52:43+00:00","dateModified":"2026-01-20T09:07:04+00:00","description":"Custom pattern fills and responsive typography: explore the exciting new features in our latest 2026 FusionCharts release. Build beautiful visuals today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png","contentUrl":"\/blog\/wp-content\/uploads\/2017\/08\/react-charts-fusioncharts.png","width":738,"height":494,"caption":"How to create amazing Charts using React JS with FusionCharts"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/react-js-chart-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Amazing Charts Using ReactJS with 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\/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\/16114","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=16114"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16114\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16114"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}