{"id":16640,"date":"2017-12-27T12:23:44","date_gmt":"2017-12-27T06:53:44","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16640"},"modified":"2026-01-20T14:36:19","modified_gmt":"2026-01-20T09:06:19","slug":"charts-aurelia","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/","title":{"rendered":"How to Render Charts Using Aurelia and FusionCharts 2026"},"content":{"rendered":"Aurelia is a JavaScript client framework for mobile, desktop and web which helps in developing applications. The application can be a collection of modern javascript modules and with MV architecture it can be used with business logic.\r\n\r\nUsing Aurelia framework, you can create rich dynamic data-driven UI composition with a two-way data binding feature and integrated test table modules.\r\n\r\nIn this tutorial, we will learn how you can render charts in Aurelia framework. To render charts using Aurelia framework, we\u2019ll use FusionCharts JavaScript Library.\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\/charts-aurelia\/#Requirements\" title=\"Requirements\">Requirements<\/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\/charts-aurelia\/#Setting_up_the_Environment\" title=\"Setting up the Environment\">Setting up the Environment<\/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\/charts-aurelia\/#Configuring_the_chart\" title=\"Configuring the chart\">Configuring the chart<\/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\/charts-aurelia\/#Rendering_the_Chart\" title=\"Rendering the Chart\">Rendering the Chart<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Requirements\"><\/span>Requirements<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nBefore you start, make sure you have the following components on your local machine:\r\n<ul>\r\n \t<li>Aurelia [<a href=\"https:\/\/aurelia-1.gitbook.io\/v1-docs\/introduction\/contact-manager-tutorial\" target=\"_blank\" rel=\"noopener\">Download Link<\/a>]<\/li>\r\n \t<li>FusionCharts Suite XT [<a href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noopener\">Download Link<\/a>]<\/li>\r\n<\/ul>\r\nTo render charts in Aurelia framework, refer to the step by step process given below:\r\n<h2><span class=\"ez-toc-section\" id=\"Setting_up_the_Environment\"><\/span>Setting up the Environment<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nInstall Aurelia in your local system. Run the following code in the terminal:\r\n<code>npm install aurelia-cli -g<\/code>\r\n\r\nAfter the installation, create the skeleton of the application. Run the following code in cmd shell to create the skeleton :\r\n<code>au start\r\n<\/code>The above command will install all the dependencies to run a basic project.\r\n\r\nInstall FusionCharts library by running the following command on the terminal.\r\n<code>npm install fusioncharts<\/code>\r\n\r\nTo know more about how to install FusionCharts via npm check <a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/plain-javascript\/your-first-chart-using-plain-javascript\" target=\"_blank\" rel=\"noopener\">here<\/a>.\r\n<h2><span class=\"ez-toc-section\" id=\"Configuring_the_chart\"><\/span>Configuring the chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nOpen the project in a text editor and open <code>aurelia.json<\/code> file. In this file, search for a prepend array of objects and add <code>node_modules<\/code> path to it. Refer to the code snippet below:\r\n<pre class=\"lang:js decode:true\"> \"prepend\": [\r\n          \"node_modules\/bluebird\/js\/browser\/bluebird.core.js\",\r\n          {\r\n            \"path\": \"node_modules\/aurelia-cli\/lib\/resources\/scripts\/configure-bluebird-no-long-stacktraces.js\",\r\n            \"env\": \"stage &amp; prod\"\r\n          },\r\n          {\r\n            \"path\": \"node_modules\/aurelia-cli\/lib\/resources\/scripts\/configure-bluebird.js\",\r\n            \"env\": \"dev\"\r\n          },\r\n          \"node_modules\/requirejs\/require.js\",\r\n          \"node_modules\/fusioncharts\/fusioncharts.js\",\r\n          \"node_modules\/fusioncharts\/fusioncharts.charts.js\"\r\n        ]\r\n<\/pre>\r\nImport FusionCharts library files in your project. To do this, browse <code>app.js<\/code> file located inside the <code>src<\/code> folder of your project and add the following lines to it:\r\n<pre class=\"lang:js decode:true\">import {FC} from 'node_modules\/fusioncharts\/fusioncharts.js';\r\nimport {Charts} from 'node_modules\/fusioncharts\/fusioncharts.charts.js';\r\n<\/pre>\r\nNow, create a datasource object and place them inside the FusionCharts constructor method. To do so, implement the Aurelia\u2019s attached method of the component lifecycle. To know more about Aurelia\u2019s component life cycle, click <a href=\"https:\/\/aurelia-1.gitbook.io\/v1-docs\/components\/component-basics\" target=\"_blank\" rel=\"noopener\">here<\/a>. Refer to the following code snippet.\r\n<pre class=\"lang:js decode:true\">attached(){\r\nlet mydata={\r\n      \"chart\": {\r\n        \"caption\": \"Size Of Wikipedia\",\r\n        \"subcaption\": \"[2007-2017]\",\r\n        \"pYAxisName\": \"Article Count\",\r\n        \"xAxisName\": \"Years\",\r\n        \"sYAxisName\": \"% Increase during preceding year\",\r\n        \"sNumberSuffix\": \"%\",\r\n        \"showvalues\": \"0\",\r\n        \"paletteColors\": \"#247FF3,#f2c500\",\r\n        \"labeldisplay\": \"ROTATE\",\r\n        \"slantlabels\": \"1\",\r\n        \"bgColor\": \"#ffffff\",\r\n        \"borderAlpha\": \"20\",\r\n        \"showcanvasborder\": \"1\",\r\n        \"canvasborderalpha\": \"30\",\r\n        \"usePlotGradientColor\": \"0\",\r\n        \"plotBorderAlpha\": \"10\",\r\n        \"placevaluesInside\": \"0\",\r\n        \"rotatevalues\": \"0\",\r\n        \"valueFontColor\": \"#000000\",\r\n        \"plotfillalpha\": \"90\",\r\n        \"showLegend\": \"0\",\r\n        \"showHoverEffect\": \"1\",\r\n        \"xAxisLineColor\": \"#999999\",\r\n        \"divlineColor\": \"#999999\",\r\n        \"divLineIsDashed\": \"0\",\r\n        \"showAlternateHGridColor\": \"0\",\r\n        \"anchorBorderHoverThickness\": \"2\",\r\n        \"anchorHoverRadius\": \"5\",\r\n        \"toolTipColor\": \"#ffffff\",\r\n        \"toolTipBorderThickness\": \"0\",\r\n        \"toolTipBgColor\": \"#000000\",\r\n        \"toolTipBgAlpha\": \"80\",\r\n        \"toolTipBorderRadius\": \"2\",\r\n        \"toolTipPadding\": \"5\",\r\n        \"animation\": \"1\",\r\n        \"syaxismaxvalue\":\"100\",\r\n        \"legendborderalpha\": \"20\",\r\n        \"numdivlines\": \"10\",\r\n        \"numVDivLines\": \"10\"\r\n      },\r\n      \"categories\": [{\r\n        \"category\": [{\r\n          \"label\": \"2007\"\r\n        }, {\r\n          \"label\": \"2008\"\r\n        }, {\r\n          \"label\": \"2009\"\r\n        }, {\r\n          \"label\": \"2010\"\r\n        }, {\r\n          \"label\": \"2011\"\r\n        }, {\r\n          \"label\": \"2012\"\r\n        }, {\r\n          \"label\": \"2013\"\r\n        }, {\r\n          \"label\": \"2014\"\r\n        }, {\r\n          \"label\": \"2015\"\r\n        }, {\r\n          \"label\": \"2016\"\r\n        }, {\r\n          \"label\": \"2017\"\r\n        }]\r\n      }],\r\n      \"dataset\": [{\r\n        \"seriesName\": \"Annual Growth Rate For The English Wikipedia\",\r\n        \"data\": [{\r\n          \"value\": \"1560000\"\r\n        }, {\r\n          \"value\": \"2153000\"\r\n        }, {\r\n          \"value\": \"2679000\"\r\n        }, {\r\n          \"value\": \"3144000\"\r\n        }, {\r\n          \"value\": \"3518000\"\r\n        }, {\r\n          \"value\": \"3835000\"\r\n        }, {\r\n          \"value\": \"4133000\"\r\n        }, {\r\n          \"value\": \"4413000\"\r\n        }, {\r\n          \"value\": \"4682000\"\r\n        }, {\r\n          \"value\": \"5045000\"\r\n        }, {\r\n          \"value\": \"5530232\"\r\n        }]\r\n      }, {\r\n        \"seriesName\": \"% Of All Wikipedia Articles in English\",\r\n        \"parentYAxis\": \"S\",\r\n        \"renderAs\": \"line\",\r\n        \"showValues\": \"0\",\r\n        \"data\": [{\r\n          \"value\": \"74\"\r\n        }, {\r\n          \"value\": \"38\"\r\n        }, {\r\n          \"value\": \"24\"\r\n        }, {\r\n          \"value\": \"17\"\r\n        }, {\r\n          \"value\": \"12\"\r\n        }, {\r\n          \"value\": \"9\"\r\n        }, {\r\n          \"value\": \"8\"\r\n        }, {\r\n          \"value\": \"7\"\r\n        }, {\r\n          \"value\": \"6\"\r\n        }, {\r\n          \"value\": \"8\"\r\n        }, {\r\n          \"value\": \"7\"\r\n        }]\r\n      }]\r\n    };\r\n       \r\nFusionCharts.ready(function () {\r\n        let wikiChart = new FusionCharts({\r\n        type: 'mscombidy2d',\r\n        renderAt: 'chart-container',\r\n        width: '70%',\r\n        height: '400',\r\n        dataFormat: 'json',\r\n        dataSource: mydata\r\n    })\r\n    .render();\r\n});\r\n  }\r\n<\/pre>\r\nFollowing is the entire code present in <code>app.js<\/code> file:\r\n<pre class=\"lang:js decode:true\">import {FC} from 'node_modules\/fusioncharts\/fusioncharts.js';\r\nimport {Charts} from 'node_modules\/fusioncharts\/fusioncharts.charts.js';\r\n\r\nexport class App {\r\n  constructor() {\r\n    this.message = 'FusionCharts in Aurelia Framework';\r\n}\r\n\r\nattached(){\r\nlet mydata={\r\n      \"chart\": {\r\n        \"caption\": \"Size Of Wikipedia\",\r\n        \"subcaption\": \"[2007-2017]\",\r\n        \"pYAxisName\": \"Article Count\",\r\n        \"xAxisName\": \"Years\",\r\n        \"sYAxisName\": \"% Increase during preceding year\",\r\n        \"sNumberSuffix\": \"%\",\r\n        \"showvalues\": \"0\",\r\n        \"paletteColors\": \"#247FF3,#f2c500\",\r\n        \"labeldisplay\": \"ROTATE\",\r\n        \"slantlabels\": \"1\",\r\n        \"bgColor\": \"#ffffff\",\r\n        \"borderAlpha\": \"20\",\r\n        \"showcanvasborder\": \"1\",\r\n        \"canvasborderalpha\": \"30\",\r\n        \"usePlotGradientColor\": \"0\",\r\n        \"plotBorderAlpha\": \"10\",\r\n        \"placevaluesInside\": \"0\",\r\n        \"rotatevalues\": \"0\",\r\n        \"valueFontColor\": \"#000000\",\r\n        \"plotfillalpha\": \"90\",\r\n        \"showLegend\": \"0\",\r\n        \"showHoverEffect\": \"1\",\r\n        \"xAxisLineColor\": \"#999999\",\r\n        \"divlineColor\": \"#999999\",\r\n        \"divLineIsDashed\": \"0\",\r\n        \"showAlternateHGridColor\": \"0\",\r\n        \"anchorBorderHoverThickness\": \"2\",\r\n        \"anchorHoverRadius\": \"5\",\r\n        \"toolTipColor\": \"#ffffff\",\r\n        \"toolTipBorderThickness\": \"0\",\r\n        \"toolTipBgColor\": \"#000000\",\r\n        \"toolTipBgAlpha\": \"80\",\r\n        \"toolTipBorderRadius\": \"2\",\r\n        \"toolTipPadding\": \"5\",\r\n        \"animation\": \"1\",\r\n        \"syaxismaxvalue\":\"100\",\r\n        \"legendborderalpha\": \"20\",\r\n        \"numdivlines\": \"10\",\r\n        \"numVDivLines\": \"10\"\r\n      },\r\n      \"categories\": [{\r\n        \"category\": [{\r\n          \"label\": \"2007\"\r\n        }, {\r\n          \"label\": \"2008\"\r\n        }, {\r\n          \"label\": \"2009\"\r\n        }, {\r\n          \"label\": \"2010\"\r\n        }, {\r\n          \"label\": \"2011\"\r\n        }, {\r\n          \"label\": \"2012\"\r\n        }, {\r\n          \"label\": \"2013\"\r\n        }, {\r\n          \"label\": \"2014\"\r\n        }, {\r\n          \"label\": \"2015\"\r\n        }, {\r\n          \"label\": \"2016\"\r\n        }, {\r\n          \"label\": \"2017\"\r\n        }]\r\n      }],\r\n      \"dataset\": [{\r\n        \"seriesName\": \"Annual Growth Rate For The English Wikipedia\",\r\n        \"data\": [{\r\n          \"value\": \"1560000\"\r\n        }, {\r\n          \"value\": \"2153000\"\r\n        }, {\r\n          \"value\": \"2679000\"\r\n        }, {\r\n          \"value\": \"3144000\"\r\n        }, {\r\n          \"value\": \"3518000\"\r\n        }, {\r\n          \"value\": \"3835000\"\r\n        }, {\r\n          \"value\": \"4133000\"\r\n        }, {\r\n          \"value\": \"4413000\"\r\n        }, {\r\n          \"value\": \"4682000\"\r\n        }, {\r\n          \"value\": \"5045000\"\r\n        }, {\r\n          \"value\": \"5530232\"\r\n        }]\r\n      }, {\r\n        \"seriesName\": \"% Of All Wikipedia Articles in English\",\r\n        \"parentYAxis\": \"S\",\r\n        \"renderAs\": \"line\",\r\n        \"showValues\": \"0\",\r\n        \"data\": [{\r\n          \"value\": \"74\"\r\n        }, {\r\n          \"value\": \"38\"\r\n        }, {\r\n          \"value\": \"24\"\r\n        }, {\r\n          \"value\": \"17\"\r\n        }, {\r\n          \"value\": \"12\"\r\n        }, {\r\n          \"value\": \"9\"\r\n        }, {\r\n          \"value\": \"8\"\r\n        }, {\r\n          \"value\": \"7\"\r\n        }, {\r\n          \"value\": \"6\"\r\n        }, {\r\n          \"value\": \"8\"\r\n        }, {\r\n          \"value\": \"7\"\r\n        }]\r\n      }]\r\n    };\r\n\r\n  FusionCharts.ready(function () {\r\n        let wikiChart = new FusionCharts({\r\n        type: 'mscombidy2d',\r\n        renderAt: 'chart-container',\r\n        width: '70%',\r\n        height: '400',\r\n        dataFormat: 'json',\r\n        dataSource: mydata\r\n    })\r\n    .render();\r\n});\r\n  }\r\n}\r\n<\/pre>\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\nNow that we have our code in place, let us run the code to see the output.\r\n\r\nRun the following command from the shell interface.\r\n<code>au run --watch<\/code>\r\n\r\nThe output should be as shown in the image below:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/12\/aurelia-js-fusioncharts-chart-output.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16643\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/12\/aurelia-js-fusioncharts-chart-output.png\" alt=\"\" width=\"1398\" height=\"918\" srcset=\"\/blog\/wp-content\/uploads\/2017\/12\/aurelia-js-fusioncharts-chart-output.png 1398w, \/blog\/wp-content\/uploads\/2017\/12\/aurelia-js-fusioncharts-chart-output-150x98.png 150w\" sizes=\"auto, (max-width: 1398px) 100vw, 1398px\" \/><\/a>\r\n\r\nIf you see any errors in your code, you can <a href=\"https:\/\/www.dropbox.com\/s\/i26je85p777cgvf\/mscombidy_sample.zip?dl=0\" target=\"_blank\" rel=\"noopener\">download<\/a> the complete source code of the sample project.","protected":false},"excerpt":{"rendered":"<p>Aurelia is a JavaScript client framework for mobile, desktop and web which helps in developing applications. The application can be a collection of modern javascript modules and with MV architecture it can be used with business logic. Using Aurelia framework, you can create rich dynamic data-driven UI composition with a two-way data binding feature and [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675,648],"class_list":["post-16640","post","type-post","status-publish","format-standard","has-post-thumbnail","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 render charts using Aurelia and FusionCharts<\/title>\n<meta name=\"description\" content=\"Aurelia framework uses futuristic technology for today&#039;s browsers. Learn how to create professional charts in Aurelia with our 2026 guide. Try it 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\/charts-aurelia\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to render charts using Aurelia and FusionCharts\" \/>\n<meta property=\"og:description\" content=\"Aurelia framework uses futuristic technology for today&#039;s browsers. Learn how to create professional charts in Aurelia with our 2026 guide. Try it today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-27T06:53:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:06:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/12\/Creating-charts-with-Aurelia-JS.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2016\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jonathan, Ayan Bhadury\" \/>\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, Ayan Bhadury\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 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\/charts-aurelia\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/\"\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 Render Charts Using Aurelia and FusionCharts 2026\",\n\t            \"datePublished\": \"2017-12-27T06:53:44+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:19+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/\"\n\t            },\n\t            \"wordCount\": 372,\n\t            \"commentCount\": 1,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/12\/Creating-charts-with-Aurelia-JS.jpg\",\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\/charts-aurelia\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/\",\n\t            \"name\": \"How to render charts using Aurelia and FusionCharts\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/12\/Creating-charts-with-Aurelia-JS.jpg\",\n\t            \"datePublished\": \"2017-12-27T06:53:44+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:19+00:00\",\n\t            \"description\": \"Aurelia framework uses futuristic technology for today's browsers. Learn how to create professional charts in Aurelia with our 2026 guide. Try it today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#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\/charts-aurelia\/\"\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\/charts-aurelia\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/12\/Creating-charts-with-Aurelia-JS.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/12\/Creating-charts-with-Aurelia-JS.jpg\",\n\t            \"width\": 2016,\n\t            \"height\": 750\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#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 Render Charts Using Aurelia and 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 render charts using Aurelia and FusionCharts","description":"Aurelia framework uses futuristic technology for today's browsers. Learn how to create professional charts in Aurelia with our 2026 guide. Try it 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\/charts-aurelia\/","og_locale":"en_US","og_type":"article","og_title":"How to render charts using Aurelia and FusionCharts","og_description":"Aurelia framework uses futuristic technology for today's browsers. Learn how to create professional charts in Aurelia with our 2026 guide. Try it today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-12-27T06:53:44+00:00","article_modified_time":"2026-01-20T09:06:19+00:00","og_image":[{"width":2016,"height":750,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/12\/Creating-charts-with-Aurelia-JS.jpg","type":"image\/jpeg"}],"author":"Jonathan, Ayan Bhadury","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan, Ayan Bhadury","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"How to Render Charts Using Aurelia and FusionCharts 2026","datePublished":"2017-12-27T06:53:44+00:00","dateModified":"2026-01-20T09:06:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/"},"wordCount":372,"commentCount":1,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/12\/Creating-charts-with-Aurelia-JS.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/","url":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/","name":"How to render charts using Aurelia and FusionCharts","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/12\/Creating-charts-with-Aurelia-JS.jpg","datePublished":"2017-12-27T06:53:44+00:00","dateModified":"2026-01-20T09:06:19+00:00","description":"Aurelia framework uses futuristic technology for today's browsers. Learn how to create professional charts in Aurelia with our 2026 guide. Try it today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/12\/Creating-charts-with-Aurelia-JS.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2017\/12\/Creating-charts-with-Aurelia-JS.jpg","width":2016,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-aurelia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Render Charts Using Aurelia and 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\/16640","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=16640"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16640\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16649"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16640"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}