{"id":18275,"date":"2021-07-14T01:45:31","date_gmt":"2021-07-13T20:15:31","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=18275"},"modified":"2026-01-20T14:41:42","modified_gmt":"2026-01-20T09:11:42","slug":"quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/","title":{"rendered":"Create Amazing Blockchain Data Graphs &amp; Charts in JavaScript 2026"},"content":{"rendered":"As the crypto boom gathers ever more momentum, many businesses around the world are jumping on the bandwagon and starting to trade and track cryptocurrencies. Even companies that want to avoid trading in this volatile market have realized that to remain competitive, they need to be open to the idea of using digital currencies to make and receive payments.\r\n\r\nFor these reasons, with the growing popularity of digital currencies internationally, more and more are finding it necessary to monitor and graph data related to blockchain and cryptocurrencies.\r\n\r\nIf you are a bitcoin enthusiast and interested in plotting blockchain data, <a href=\"https:\/\/www.fusioncharts.com\/\">FusionCharts<\/a> is the right answer for you. FusionCharts is a comprehensive platform for creating stunning and beautiful <a href=\"https:\/\/www.fusioncharts.com\/\">data charts<\/a>, graphs, and maps, that can be easily integrated into your app.\r\n\r\nRead on to find out how you can graph blockchain data (https:\/\/www.blockchain.com\/charts) using FusionCharts in a Javascript client. Yo start, we&#8217;ll plot the number of bitcoin transactions added to the mempool per second.\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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#What_is_the_BlockChaincom_API\" title=\"What is the BlockChain.com API?\">What is the BlockChain.com API?<\/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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#How_Does_the_FusionCharts_BlockChain_Data_Graph_Look\" title=\"How Does the FusionCharts BlockChain Data Graph Look?\">How Does the FusionCharts BlockChain Data Graph Look?<\/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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#Steps_to_Create_a_FusionCharts_BlockChain_Data_Graph\" title=\"Steps to Create a FusionCharts BlockChain Data Graph\">Steps to Create a FusionCharts BlockChain Data Graph<\/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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#Step_1_Setup_the_Project\" title=\"Step 1: Setup the Project\">Step 1: Setup the Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#Step_2_Configure_the_Project\" title=\"Step 2: Configure the Project\">Step 2: Configure the Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#Step_3_Import_FusionCharts_Libraries\" title=\"Step 3: Import FusionCharts Libraries\">Step 3: Import FusionCharts Libraries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#Step_4_Import_the_Data_and_Create_the_Graph\" title=\"Step 4: Import the Data and Create the Graph\">Step 4: Import the Data and Create the Graph<\/a><\/li><\/ul><\/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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#Are_There_Other_Ways_to_Create_Effective_BlockChain_Data_Visualizations\" title=\"Are There Other Ways to Create Effective BlockChain Data Visualizations?\">Are There Other Ways to Create Effective BlockChain Data Visualizations?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_the_BlockChaincom_API\"><\/span>What is the BlockChain.com API?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIf you are looking for a crypto API, BlockChain.com provides a JSON feed for their charts and statistics data (https:\/\/www.blockchain.com\/charts). For example, a basic blockchain query looks like this:\r\n<pre class=\"lang:markup\">https:\/\/api.blockchain.info\/charts\/transactions-per-second?timespan=1weeks&amp;format=json<\/pre>\r\nThis query returns a result that is a JSON object, with the following structure. Please note that only the first two data points are shown below for readability.\r\n<pre class=\"lang:markup\">{\"status\":\"ok\",\r\n \"name\":\"Transaction Rate\",\r\n \"unit\":\"Transactions Per Second\",\r\n \"period\":\"minute\",\r\n \"description\":\"The number of Bitcoin transactions added to the mempool per second.\",\r\n \"values\":[{\"x\":1625444100,\"y\":1.4166666666666667},\r\n           {\"x\":1625445000,\"y\":1.6166666666666667},\r\n           ...\r\n          ]\r\n}<\/pre>\r\nThe data comes as (x,y) pairs in the &#8220;values&#8221; key.\r\n<h2><span class=\"ez-toc-section\" id=\"How_Does_the_FusionCharts_BlockChain_Data_Graph_Look\"><\/span>How Does the FusionCharts BlockChain Data Graph Look?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIf you are wondering what to expect when you choose a FusionCharts graph here is an example. In this instance, we have created a scatter graph of the number of bitcoin transactions added to the mempool per second. It looks like this:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18276\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/07\/blockchain1-300x171.png\" alt=\"\" width=\"626\" height=\"357\" srcset=\"\/blog\/wp-content\/uploads\/2021\/07\/blockchain1-300x171.png 300w, \/blog\/wp-content\/uploads\/2021\/07\/blockchain1-768x438.png 768w, \/blog\/wp-content\/uploads\/2021\/07\/blockchain1-1024x583.png 1024w, \/blog\/wp-content\/uploads\/2021\/07\/blockchain1.png 1980w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/>\r\n\r\nThe graph above has several attractive features. These include:\r\n<ol>\r\n \t<li>FusionCharts automatically plots the regression line, shown as a blue solid line, to show the long-term data. It also computes the linear regression model.<\/li>\r\n \t<li>You can customize the scatter plot colors and symbols.<\/li>\r\n \t<li>Users specify the x-axis ticks and tick labels.<\/li>\r\n \t<li>Users have 100% control over customizing the appearance and behavior of everything in the graph. This includes including the title, subtitle, axis labels, and everything else.<\/li>\r\n<\/ol>\r\n<h2><span class=\"ez-toc-section\" id=\"Steps_to_Create_a_FusionCharts_BlockChain_Data_Graph\"><\/span>Steps to Create a FusionCharts BlockChain Data Graph<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nCreating a blockchain data graph with FusionCharts is easy. Here are the 4 easy steps you need to get going:\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Setup_the_Project\"><\/span>Step 1: Setup the Project<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nFirst, we&#8217;ll implement the project in Javascript using webpack. To begin, create a project directory called <b>blockchainAPI<\/b>. Open the command prompt and switch to the project directory. Next type the following to install webpack and FusionCharts:\r\n<pre class=\"lang:markup\">npm i -D webpack-dev-server html-webpack-plugin path webpack-cli fusioncharts<\/pre>\r\nCreate two directories <strong>src<\/strong> and <strong>dist<\/strong>. In the src directory create a file called index.js. You can type the following at the command prompt:\r\n<pre class=\"lang:markup\">mkdir src \r\ntouch src\/index.js\r\nmkdir dist<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Configure_the_Project\"><\/span>Step 2: Configure the Project<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<p class=\"lang:markup\">To configure the project create a file called webpack.config.js in the main project directory. Add the following code to this file.<\/p>\r\n\r\n<pre class=\"lang:markup\">\/\/ webpack.config.js\r\nconst HtmlWebPackPlugin = require( 'html-webpack-plugin' );\r\nconst path = require( 'path' );\r\nmodule.exports = {\r\n   context: __dirname,\r\n   entry: '.\/src\/index.js',\r\n   output: {\r\n      path: path.resolve( __dirname, 'dist' ),\r\n      filename: 'main.js',\r\n   },\r\n\r\n   plugins: [\r\n      new HtmlWebPackPlugin()\r\n   ],\r\n   devServer: {\r\n       headers: {\r\n           \"Access-Control-Allow-Origin\": \"*\",\r\n           \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, PATCH, OPTIONS\",\r\n           \"Access-Control-Allow-Headers\": \"X-Requested-With, content-type, Authorization\"\r\n         },\r\n       proxy: {\r\n         '\/BlockchainAPI': {\r\n            target: 'https:\/\/api.blockchain.info',\r\n            pathRewrite: { '^\/BlockchainAPI': 'https:\/\/api.blockchain.info\/charts\/transactions-per-second?timespan=1weeks&amp;format=json'},\r\n            changeOrigin: true,\r\n         },\r\n       },\r\n\r\n     }\r\n};<\/pre>\r\nIn the configuration file shown above, we have added a proxy for the blockchain.info URL to avoid any CORS error.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Import_FusionCharts_Libraries\"><\/span>Step 3: Import FusionCharts Libraries<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nTo import the FusionCharts libraries, first, open the index.js file and add the following code. This will import all FusionCharts libraries into the project.\r\n<pre class=\"lang:markup\">\/\/ Include the core fusioncharts file from core\r\nimport FusionCharts from 'fusioncharts\/core';\r\n\r\n\/\/ Include the chart from viz folder\r\n\/\/ E.g. - import ChartType from fusioncharts\/viz\/[ChartType]\r\nimport Scatter from 'fusioncharts\/viz\/scatter';\r\n\r\n\/\/ Include the fusion theme\r\nimport FusionTheme from 'fusioncharts\/themes\/es\/fusioncharts.theme.fusion';<\/pre>\r\nYou also need to create a div tag for the chart container on the main HTML page. Below the import section add the following to your index.js file:\r\n<pre class=\"lang:markup\">\/\/add the div tag for the chart container\r\nconst myDiv = document.createElement('div');\r\nmyDiv.id = 'chart-container';\r\ndocument.body.appendChild(myDiv);<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Import_the_Data_and_Create_the_Graph\"><\/span>Step 4: Import the Data and Create the Graph<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nThe fourth and final step is to import the blockchain data and create a JSON object for our chart. The &#8220;DataSource&#8221; key contains a nested key called &#8220;data&#8221;, which has the actual (x,y) points we want to plot. At the end of your\u00a0 index.js file, add the following code:\r\n<pre class=\"lang:markup\">async function main() {\r\n    \/\/Get the data\r\n    let response = await fetch('\/BlockchainAPI');\r\n    let data = await response.json();\r\n    if (response.ok){        \r\n        renderPage(data);\r\n    }\r\n    else {\r\n        alert('Error reading data from Blockchain Repository');\r\n    }\r\n}\r\n\r\n\/\/renders the html page when passed data as JSON text\r\nfunction renderPage(JsonText){\r\n\r\n    var dataSource = constructDataSource(JsonText);\r\n    renderChart(dataSource);\r\n}\r\n\r\n\r\n\/\/constructs JSON text for 'dataSource' key\r\nfunction constructDataSource(blockchainJson){\r\n\r\n    var dataset = [{\r\n        \"seriesname\": \"Bitcoin transactions\",\r\n        anchorbgcolor: \"ff00ff\",\r\n        data: blockchainJson.values\r\n    }];\r\n    var category = []\r\n    \/\/ Take around 5 transactions at equidistant points\r\n    var len = blockchainJson.values.length;\r\n    for (var i=0;i&lt;len;i=i+Math.trunc(len\/5)){\r\n        category.push({x: blockchainJson.values[i].x, \r\n                       label: blockchainJson.values[i].x.toString(),\r\n                       showverticalline: \"1\"\r\n                       });\r\n    } \/\/end for\r\n\r\n    var categories = [\r\n    {\r\n      verticallinedashed: \"1\",\r\n      verticallinedashlen: \"1\",\r\n      verticallinedashgap: \"1\",\r\n      verticallinethickness: \"1\",\r\n      verticallinecolor: \"#000000\",\r\n      category\r\n    }\r\n  ];\r\n\r\n  var dataSource = {\"chart\": {\r\n        \"caption\": blockchainJson.description,\r\n        \"subcaption\": \"Data Source: https:\/\/www.blockchain.com\",\r\n        \"xAxisName\": \"Time stamp\",\r\n        \"YAxisName\": blockchainJson.unit,\r\n        \"ynumbersuffix\": \"\",\r\n        \"xnumbersuffix\": \"\",\r\n        \"theme\": \"fusion\",\r\n        \"showRegressionLine\": \"1\",\r\n        \"plotToolText\": \"&lt;b&gt;$yDataValue&lt;\/b&gt; transactions at timestamp: &lt;b&gt;$xvalue&lt;\/b&gt;\"\r\n\r\n    }, \r\n    dataset, categories};    \r\n    return dataSource;\r\n}\r\n\r\n\/\/ Draw the chart\r\nfunction renderChart(dataSrc){\r\n\r\n    FusionCharts.addDep(Scatter);\r\n    FusionCharts.addDep(FusionTheme);\r\n    \/\/Chart Configurations\r\n    const chartConfig = {\r\n        type: 'scatter',\r\n        renderAt: 'chart-container',\r\n        width: '80%',\r\n        height: '600',\r\n        dataFormat: 'json',\r\n        dataSource: dataSrc\r\n    }\r\n\r\n    \/\/Create an Instance with chart options and render the chart\r\n    var chartInstance = new FusionCharts(chartConfig);\r\n    chartInstance.render();\r\n}\r\n\r\n\/\/Call main method \r\nmain();<\/pre>\r\nThat&#8217;s it! We just created a beautiful visualization of the blockchain data using FusionCharts scatter graphs.\r\n<h2><span class=\"ez-toc-section\" id=\"Are_There_Other_Ways_to_Create_Effective_BlockChain_Data_Visualizations\"><\/span>Are There Other Ways to Create Effective BlockChain Data Visualizations?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIf you are looking for the quickest and most effective ways to create BlockChain Data Visualizations, you don&#8217;t need to look any further. That is because <a href=\"https:\/\/www.fusioncharts.com\/\">FusionCharts<\/a> comes with a complete library of beautiful plots, charts, maps, and graphs. In total, there are 100+ charts and 2000+ interactive maps you can easily integrate into your next app. You can also build impressive and effective dashboards, stunning interactive charts in addition to powerful illustrations using FusionCharts.\r\n\r\nStart integrating dashboards and interactive charts in your financial apps by downloading the trial <a href=\"https:\/\/www.fusioncharts.com\/fusioncharts\">FusionCharts Suite XT<\/a> today.\r\n\r\nThe <a href=\"https:\/\/github.com\/fusionchartsexpress\/JavascriptBlockChainCharts\">source code for this app can be downloaded here<\/a>. Happy coding!","protected":false},"excerpt":{"rendered":"<p>As the crypto boom gathers ever more momentum, many businesses around the world are jumping on the bandwagon and starting to trade and track cryptocurrencies. Even companies that want to avoid trading in this volatile market have realized that to remain competitive, they need to be open to the idea of using digital currencies to [&hellip;]<\/p>\n","protected":false},"author":59,"featured_media":18279,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,722,18],"tags":[806,809,805,683,102,152,749,211,808,807],"coauthors":[769],"class_list":["post-18275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-charting-guidelines","category-fusioncharts","category-tutorials","tag-bitcoin-transactions","tag-blockchain","tag-blockchain-data","tag-charts","tag-data","tag-fusioncharts","tag-graphs","tag-javascript","tag-plotting-tools","tag-scatter-charts"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create Amazing Blockchain Data Graphs &amp; Charts in JavaScript 2026<\/title>\n<meta name=\"description\" content=\"ReactJS popularity continues to grow in 2026. Learn why it remains a top choice for front-end developers building data visuals. Master the framework now.\" \/>\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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Amazing Blockchain Data Graphs &amp; Charts in JavaScript 2026\" \/>\n<meta property=\"og:description\" content=\"ReactJS popularity continues to grow in 2026. Learn why it remains a top choice for front-end developers building data visuals. Master the framework now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-13T20:15:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/07\/blockchainmockup.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mehreen Saeed\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mehreen Saeed\" \/>\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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Mehreen Saeed\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7\"\n\t            },\n\t            \"headline\": \"Create Amazing Blockchain Data Graphs &amp; Charts in JavaScript 2026\",\n\t            \"datePublished\": \"2021-07-13T20:15:31+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:42+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/\"\n\t            },\n\t            \"wordCount\": 769,\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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/07\/blockchainmockup.jpg\",\n\t            \"keywords\": [\n\t                \"bitcoin transactions\",\n\t                \"blockchain\",\n\t                \"Blockchain data\",\n\t                \"charts\",\n\t                \"data\",\n\t                \"FusionCharts\",\n\t                \"graphs\",\n\t                \"javascript\",\n\t                \"plotting tools\",\n\t                \"scatter charts\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Charting Guidelines\",\n\t                \"FusionCharts\",\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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/\",\n\t            \"name\": \"Create Amazing Blockchain Data Graphs &amp; Charts in JavaScript 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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/07\/blockchainmockup.jpg\",\n\t            \"datePublished\": \"2021-07-13T20:15:31+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:42+00:00\",\n\t            \"description\": \"ReactJS popularity continues to grow in 2026. Learn why it remains a top choice for front-end developers building data visuals. Master the framework now.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/\"\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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2021\/07\/blockchainmockup.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2021\/07\/blockchainmockup.jpg\",\n\t            \"width\": 1920,\n\t            \"height\": 1280,\n\t            \"caption\": \"Create your own Stunning BlockChain Data Graphs with FusionCharts\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#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 Amazing Blockchain Data Graphs &amp; Charts in JavaScript 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\/93c1ff85ace69b8175fdec9016c8aca7\",\n\t            \"name\": \"Mehreen Saeed\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/b00c4263cd8aa44b9c97ced2ed628629\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg\",\n\t                \"caption\": \"Mehreen Saeed\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/mehreensaeed\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Amazing Blockchain Data Graphs &amp; Charts in JavaScript 2026","description":"ReactJS popularity continues to grow in 2026. Learn why it remains a top choice for front-end developers building data visuals. Master the framework now.","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\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Create Amazing Blockchain Data Graphs &amp; Charts in JavaScript 2026","og_description":"ReactJS popularity continues to grow in 2026. Learn why it remains a top choice for front-end developers building data visuals. Master the framework now.","og_url":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2021-07-13T20:15:31+00:00","article_modified_time":"2026-01-20T09:11:42+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/07\/blockchainmockup.jpg","type":"image\/jpeg"}],"author":"Mehreen Saeed","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mehreen Saeed","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/"},"author":{"name":"Mehreen Saeed","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/93c1ff85ace69b8175fdec9016c8aca7"},"headline":"Create Amazing Blockchain Data Graphs &amp; Charts in JavaScript 2026","datePublished":"2021-07-13T20:15:31+00:00","dateModified":"2026-01-20T09:11:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/"},"wordCount":769,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/07\/blockchainmockup.jpg","keywords":["bitcoin transactions","blockchain","Blockchain data","charts","data","FusionCharts","graphs","javascript","plotting tools","scatter charts"],"articleSection":["Charting Guidelines","FusionCharts","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/","url":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/","name":"Create Amazing Blockchain Data Graphs &amp; Charts in JavaScript 2026","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/07\/blockchainmockup.jpg","datePublished":"2021-07-13T20:15:31+00:00","dateModified":"2026-01-20T09:11:42+00:00","description":"ReactJS popularity continues to grow in 2026. Learn why it remains a top choice for front-end developers building data visuals. Master the framework now.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2021\/07\/blockchainmockup.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2021\/07\/blockchainmockup.jpg","width":1920,"height":1280,"caption":"Create your own Stunning BlockChain Data Graphs with FusionCharts"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/quickly-create-visual-stunning-blockchain-data-graphs-and-charts-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Amazing Blockchain Data Graphs &amp; Charts in JavaScript 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\/93c1ff85ace69b8175fdec9016c8aca7","name":"Mehreen Saeed","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/b00c4263cd8aa44b9c97ced2ed628629","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/c98\/c98777bf022eae7522cadf4e18cc8c38x96.jpg","caption":"Mehreen Saeed"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/mehreensaeed\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/18275","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\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=18275"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/18275\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/18279"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=18275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=18275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=18275"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}