{"id":16470,"date":"2017-11-14T13:03:58","date_gmt":"2017-11-14T07:33:58","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16470"},"modified":"2026-01-20T14:41:40","modified_gmt":"2026-01-20T09:11:40","slug":"charts-polymer-application","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/","title":{"rendered":"How to Create Stunning Charts in Polymer Applications 2026"},"content":{"rendered":"Polymer is a JavaScript library that assists in the development of custom components for a web page or web application. Web components are primitives at the lowest level. Because Polymer is built with web components, these components assist you in defining your own HTML elements. They also give you more flexibility by allowing you to define custom components. The defined custom components are also used in web pages in the same way that any other HTML component is, by using custom tags.\r\n\r\nIn this post, you&#8217;ll learn about Polymer JS&#8217;s key features, how to create stunning <a href=\"https:\/\/www.fusioncharts.com\/charts\/realtime-charts\/line-chart\">Live Charts<\/a> with Fusioncharts in Polymer Applications, and how to troubleshoot.\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-polymer-application\/#Key_Features_of_Polymer_JS\" title=\"Key Features of Polymer JS\">Key Features of Polymer JS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Constructor\" title=\"Constructor\">Constructor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Populated_with_Internal_DOM_Within_Each_Instance\" title=\"Populated with Internal DOM Within Each Instance\">Populated with Internal DOM Within Each Instance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Styled_with_Internal_Defaults_or_Externally\" title=\"Styled with Internal Defaults or Externally\">Styled with Internal Defaults or Externally<\/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\/charts-polymer-application\/#Prerequisites\" title=\"Prerequisites\">Prerequisites<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Set_the_Environment\" title=\"Set the Environment\">Set the Environment<\/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\/charts-polymer-application\/#Step_1\" title=\"Step 1\">Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Step_2\" title=\"Step 2\">Step 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Step_3\" title=\"Step 3\">Step 3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Step_4\" title=\"Step 4\">Step 4<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Polymer_Custom-Element_Within_a_Polymer_JS_Application\" title=\"Polymer Custom-Element Within a Polymer JS Application\">Polymer Custom-Element Within a Polymer JS Application<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Step_1-2\" title=\"Step 1\">Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Step_2-2\" title=\"Step 2\">Step 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Step_3-2\" title=\"Step 3\">Step 3<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#Troubleshooting\" title=\"Troubleshooting\">Troubleshooting<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Key_Features_of_Polymer_JS\"><\/span>Key Features of Polymer JS<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nPolymer focuses on allowing you to create rich, powerful, reusable web components by defining custom elements. These could be used in web applications built using frameworks like Angular or Ember.\r\n\r\nCustom elements can be created using the dom-module element provided by Polymer. Custom element definition comprises of:\r\n<ul>\r\n \t<li>CSS style<\/li>\r\n \t<li>HTML template of the element&#8217;s local DOM<\/li>\r\n \t<li>Element properties<\/li>\r\n \t<li>Lifecycle callbacks<\/li>\r\n \t<li>JavaScript methods<\/li>\r\n<\/ul>\r\nSome key features of Polymer JS include:\r\n<h3><span class=\"ez-toc-section\" id=\"Constructor\"><\/span><strong>Constructor<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nRegistering an element associates a class with a custom element name. The class has a constructor that instantiates the associated custom element. Alternatively, document.createElement() can also be used to create and instantiate the element.\r\n<h3><span class=\"ez-toc-section\" id=\"Populated_with_Internal_DOM_Within_Each_Instance\"><\/span><strong>Populated with Internal DOM Within Each Instance<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nShadow DOM provides a local, encapsulated DOM tree for your element. The Polymer can automatically create and populate a shadow tree for your element from a DOM template.\r\n<h3><span class=\"ez-toc-section\" id=\"Styled_with_Internal_Defaults_or_Externally\"><\/span><strong>Styled with Internal Defaults or Externally<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nThe &lt;style&gt;&lt;\/style&gt; tags can be used as usual in the shadow Dom template of the custom elements.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">FusionCharts<\/a>, being a JavaScript-based charting solution can be rendered in Polymer applications. We will define a custom element and register it to a class. The local DOM template of the custom element is holding the FusionCharts chart instance. The custom element will be used in another web page or DOM to render the chart. This custom element is reusable for multiple instances.\r\n<h2><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nBefore you integrate FusionCharts with a Polymer JS application, you need to have a basic understanding of HTML, CSS, JavaScript, and Document Object Model (DOM).\r\n<h3><span class=\"ez-toc-section\" id=\"Set_the_Environment\"><\/span><strong>Set the Environment<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nBefore getting into the steps to render the FusionCharts Polymer JS application, let\u2019s first set the environment in our local machine. Some of the basic requirements include:\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1\"><\/span><strong>Step 1<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<ul>\r\n \t<li>Install NodeJS (if not installed)<\/li>\r\n \t<li>Install Bower using NPM command as shown below:\r\n<span style=\"font-weight: 400\"><code>npm install -g bower<\/code><\/span><\/li>\r\n<\/ul>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2\"><\/span><strong>Step 2<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<ul>\r\n \t<li>Create a project directory named <code>TestPolymer<\/code><\/li>\r\n \t<li>Step into the project directory created.<\/li>\r\n \t<li>Now, in the TestPolymer working directory, go ahead and initialize bower using the command as shown below:\r\n<code>bower init<\/code><\/li>\r\n<\/ul>\r\nThis will create a <code>bower.json<\/code> file in the project working directory.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3\"><\/span><strong>Step 3<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nInstall Polymer using Bower in the project working directory. Execute the command as shown below:\r\n<code>bower install --save Polymer\/polymer<\/code>\r\n\r\nThis will install the Polymer JS in the <code>bower_components<\/code> folder within the TestPolymer project directory.\r\n\r\nOnce you are done with the installation of Polymer JS, cross-check whether it has been perfectly installed:\r\n<code>polymer help<\/code>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_4\"><\/span><strong>Step 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<ul>\r\n \t<li>Install FusionCharts bower component in <code>TestPolymer<\/code> directory using the command stated below:\r\n<span style=\"font-weight: 400\">`bower install fusioncharts<\/span><\/li>\r\n \t<li>This will create a bower_components folder in the TestPolymer project folder where you can insert all the FusionCharts downloaded files.<\/li>\r\n<\/ul>\r\nWe are all set with the environment and ready to render FusionCharts in the Polymer JS application.\r\n<h2><span class=\"ez-toc-section\" id=\"Polymer_Custom-Element_Within_a_Polymer_JS_Application\"><\/span>Polymer Custom-Element Within a Polymer JS Application<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1-2\"><\/span><strong>Step 1<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nCreate an index.html file in the TestPolymer directory. Once done follow the steps mentioned below :\r\n<ul>\r\n \t<li style=\"list-style-type: none\">\r\n<ul>\r\n \t<li>Add the webcomponents-loader.js from the webcomponentsjs folder in the bower_components. The .js file is added as it is a client-side loader and it dynamically loads the minimum polyfill bundle using feature detection. Refer to the script tag added below:\r\n<pre class=\"lang:markup decode:true\">&lt;script src=\"bower_components\/webcomponentsjs\/webcomponents-loader.js\"&gt;&lt;\/script&gt;<\/pre>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n&nbsp;\r\n<ul>\r\n \t<li>Add the following link to index.html.<\/li>\r\n<\/ul>\r\n&nbsp;\r\n<ul>\r\n \t<li style=\"list-style-type: none\">This refers to the polymer.html file which is needed to develop the Polymer application.<\/li>\r\n<\/ul>\r\n&nbsp;\r\n<pre class=\"lang:markup decode:true\">&lt;link rel=\"import\" href=\"bower_components\/polymer\/polymer.html\"&gt;&lt;\/script&gt;\r\n<\/pre>\r\n<ul>\r\n \t<li>Along with the above file, add the Polymer custom-element (which we will create in Step 2 mentioned below) under &lt;body&gt; of index.html.\r\n<pre class=\"lang:markup decode:true\">&lt;link rel=\"import\" href=\"element\/polymer-fusioncharts.html\"&gt;<\/pre>\r\n<\/li>\r\n \t<li>Now, add the code given below under &lt;body&gt; of the index.html file.\r\n<pre class=\"lang:markup decode:true\">&lt;h3 align=\"center\"&gt;This is our main Polymer Application integrating FusionCharts&lt;\/h3&gt;\r\n&lt;polymer-fusioncharts&gt;&lt;\/polymer-fusioncharts&gt;\r\n<\/pre>\r\n<\/li>\r\n<\/ul>\r\nOnce we are done with the four steps mentioned above, our index.html file is ready with its code implementation.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2-2\"><\/span><strong>Step 2<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nWe are all set with our index.html file. Also, we have already mentioned the source code and the page content using the polymer-fusioncharts custom element. Now, let\u2019s create the custom element we added previously:\r\n<ul>\r\n \t<li>Create a new folder in the TestPolymer project directory and name the folder as an element.<\/li>\r\n \t<li>Under the element folder, create a new file named polymer-fusioncharts.html.<\/li>\r\n \t<li>Add polymer-element.html from the polymer folder of bower_components in the polymer-fusioncharts.html file as shown below:\r\n<pre class=\"lang:xhtml decode:true\">&lt;link rel=\"import\" href=\"..\/bower_components\/polymer\/polymer-element.html\"&gt;<\/pre>\r\n<\/li>\r\n \t<li>To render charts, add FusionCharts library files. Since the created custom element will have the whole chart content in it, the JS files must be included here using the script tag as shown below:\r\n<pre class=\"lang:markup decode:true\">&lt;script src=\"\/bower_components\/fusioncharts\/fusioncharts.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"\/bower_components\/fusioncharts\/fusioncharts.charts.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"\/bower_components\/fusioncharts\/themes\/fusioncharts.theme.fint.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\r\n<\/li>\r\n \t<li>Once you are done with the inclusion of library files, keep the code that will define a custom element class that extends the Polymer.Element. This is where the chart will be defined using the code mentioned below: Once you are done with the inclusion of library files, keep the code that will define a custom element class that extends the Polymer.Element. This is where the chart will be defined using the code mentioned below:\r\n<pre class=\"lang:javascript decode:true\">&lt;script&gt;\r\n    \/\/ Your new element extends the Polymer.Element base class\r\n    class ChartElement extends Polymer.Element {\r\n      static get is() { return 'polymer-fusioncharts'; }\r\n      constructor() {\r\n        super();\r\n\r\n        this.textContent = \"Rendering the chart using the Polymer custom element(containing the chart)\";\r\n        this.style = \"align: center\";\r\n\r\n        var iDiv = document.createElement('div');\r\n        iDiv.id = 'chart-container';\r\n        document.getElementsByTagName('body')[0].appendChild(iDiv);\r\n\r\n\t    FusionCharts.ready(function () {\r\n            var conversionChart = new FusionCharts({\r\n                type: 'bubble',\r\n                renderAt: 'chart-container',\r\n                width: '100%',\r\n                height: '550',\r\n                dataFormat: 'json',\r\n                dataSource: {\r\n                    \"chart\": {\r\n                        \"theme\": \"fint\",\r\n                        \"caption\": \"Popular Text Editors - 2016\",\r\n                        \"captionFontSize\": \"20\",\r\n                        \"captionPadding\": \"20\",                        \r\n                        \"xAxisMinValue\": \"0\",\r\n                        \"xAxisMaxValue\": \"100\",\r\n                        \"yAxisMinValue\": \"0\",\r\n                        \"yAxisMaxValue\": \"10\",\r\n                        \"xAxisName\": \"Customer Satisfaction\",\r\n                        \"yAxisName\": \"Market Presence Rating{br}(Out of 10)\",\r\n                        \"xAxisNameFontSize\": \"12\",\r\n                        \"yAxisNameFontSize\": \"12\",\r\n                        \r\n                        \"numDivlines\": \"9\",\r\n                        \"bubbleScale\": \"1\",\r\n                        \"showValues\": \"1\",\r\n                        \"divLineColor\": \"#72D7B2\",\r\n                        \"plotFillHoverColor\": \"#98e6e6\",\r\n                        \r\n                        \"plotTooltext\": \"$name{br}Overall Rating - $zvalue\",\r\n\r\n                        \/\/Drawing quadrants on chart\r\n                        \"drawQuadrant\" : \"1\",\r\n                        \"quadrantLineAlpha\" : \"50\",\r\n                        \"quadrantLineThickness\" : \"1\"\r\n                    },\r\n                    \"categories\": [\r\n                        {\r\n                            \"category\": [\r\n                                {\r\n                                    \"label\": \"0\",\r\n                                    \"x\": \"0\"\r\n                                }, \r\n                                {\r\n                                    \"label\": \"25 %\",\r\n                                    \"x\": \"25\",\r\n                                    \"showverticalline\": \"1\"\r\n                                }, \r\n                                {\r\n                                    \"label\": \"50 %\",\r\n                                    \"x\": \"50\",\r\n                                    \"showverticalline\": \"1\"\r\n                                }, \r\n                                {\r\n                                    \"label\": \"75 %\",\r\n                                    \"x\": \"75\",\r\n                                    \"showverticalline\": \"1\"\r\n                                }, \r\n                                {\r\n                                    \"label\": \"100 %\",\r\n                                    \"x\": \"100\",\r\n                                    \"showverticalline\": \"1\"\r\n                                }\r\n                            ]\r\n                        }\r\n                    ],\r\n                    \"dataset\": [\r\n                        {\r\n                            \"color\":\"#00aee4\",\r\n                            \"data\": [\r\n                                {\r\n                                    \"x\": \"78\",\r\n                                    \"y\": \"7.4\",\r\n                                    \"z\": \"8\",\r\n                                    \"name\": \"Dreamweaver\",\r\n                                    \"color\": \"#d35f61\"\r\n                                }, \r\n                                {\r\n                                    \"x\": \"92\",\r\n                                    \"y\": \"5.1\",\r\n                                    \"z\": \"9.2\",\r\n                                    \"name\": \"Sublime Text\",\r\n                                    \"color\": \"#86bb5d\"\r\n                                }, \r\n                                {\r\n                                    \"x\": \"60\",\r\n                                    \"y\": \"5\",\r\n                                    \"z\": \"6\",\r\n                                    \"name\": \"Brackets\",\r\n                                    \"color\": \"#ffbb99\"\r\n                                }, \r\n                                {\r\n                                    \"x\": \"59\",\r\n                                    \"y\": \"3.1\",\r\n                                    \"z\": \"5\",\r\n                                    \"name\": \"TextPad\",\r\n                                    \"color\": \"#ce99ff\"\r\n                                },\r\n                                {\r\n                                    \"x\": \"9\",\r\n                                    \"y\": \"1.8\",\r\n                                    \"z\": \"3\",\r\n                                    \"name\": \"Elvis\",\r\n                                    \"color\": \"#7d9bcf\"\r\n                                },\r\n                                {\r\n                                    \"x\": \"83\",\r\n                                    \"y\": \"4\",\r\n                                    \"z\": \"7.4\",\r\n                                    \"name\": \"Atom\",\r\n                                    \"color\": \"#e19951\"\r\n                                }, \r\n                                {\r\n                                    \"x\": \"93\",\r\n                                    \"y\": \"3.6\",\r\n                                    \"z\": \"8.3\",\r\n                                    \"name\": \"Notepad++\",\r\n                                    \"color\": \"#8a8f8f\"\r\n                                },\r\n                                {\r\n                                    \"x\": \"29\",\r\n                                    \"y\": \"3.8\",\r\n                                    \"z\": \"5\",\r\n                                    \"name\": \"G Edit\",\r\n                                    \"color\": \"#d4cb11\"\r\n                                },\r\n                                {\r\n                                    \"x\": \"45\",\r\n                                    \"y\": \"2.5\",\r\n                                    \"z\": \"8\",\r\n                                    \"name\": \"Edit+\",\r\n                                    \"color\": \"#c8c8c8\"\r\n                                }, \r\n                                {\r\n                                    \"x\": \"47\",\r\n                                    \"y\": \"3.8\",\r\n                                    \"z\": \"4\",\r\n                                    \"name\": \"VIM Edit\",\r\n                                    \"color\": \"#b27666\"\r\n                                }\r\n                            ]\r\n                        }\r\n                    ],\r\n                    \"vTrendLines\": [\r\n                        {\r\n                            \"line\": [\r\n                                {\r\n                                    \"startValue\": \"50\",\r\n                                    \"endValue\": \"75\",\r\n                                    \"isTrendZone\": \"1\",\r\n                                    \"color\": \"#aaaaaa\",\r\n                                    \"alpha\": \"14\"\r\n                                }, \r\n                                {\r\n                                    \"startValue\": \"75\",\r\n                                    \"endValue\": \"100\",\r\n                                    \"isTrendZone\": \"1\",\r\n                                    \"color\": \"#aaaaaa\",\r\n                                    \"alpha\": \"21\"\r\n                                }, \r\n                                {\r\n                                    \"startValue\": \"25\",\r\n                                    \"endValue\": \"50\",\r\n                                    \"isTrendZone\": \"1\",\r\n                                    \"color\": \"#aaaaaa\",\r\n                                    \"alpha\": \"7\"\r\n                                }\r\n                            ]\r\n                        }\r\n                    ]\r\n                }\r\n            }).render();\r\n        });\r\n\r\n      }\r\n    }\r\n\r\n    \/\/Now, register your new custom element so the browser can use it\t\t\r\n\tcustomElements.define(ChartElement.is, ChartElement);\r\n\r\n  &lt;\/script&gt;\r\n<\/pre>\r\n&nbsp;<\/li>\r\n<\/ul>\r\nAn optional &lt;template&gt; tag can also be added to the custom element if you want to provide any additional content to the file.\r\n<pre class=\"lang:markup decode:true\">&lt;template&gt;\r\n    &lt;style&gt;\r\n    &lt;\/style&gt;\r\n    &lt;h4 align=\"center\"&gt;Rendering the chart using the Polymer custom element(containing the chart)&lt;\/h4&gt;\r\n  &lt;\/template&gt;\r\n<\/pre>\r\nWith this, the polymer-fusioncharts.html custom element is ready to be used in index.html. Therefore, you can import and add &lt;polymer-fusioncharts&gt;&lt;\/polymer-fusioncharts&gt; which we have already discussed while creating the index.html file.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3-2\"><\/span><strong>Step 3<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nThe project is ready but to run the application. However, you have to start the Polymer server using the following command in the terminal:\r\n<code>polymer serve<\/code>\r\n\r\nThe above command will start the server. To get the output on the screen, hit the URL displayed in the Cmder.\r\n\r\nCheck out the final output after hitting the URL (https:\/\/127.0.0.1:8081):\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/polymer-js-fusioncharts-output.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16471\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/polymer-js-fusioncharts-output.png\" alt=\"\" width=\"1364\" height=\"722\" srcset=\"\/blog\/wp-content\/uploads\/2017\/11\/polymer-js-fusioncharts-output.png 1364w, \/blog\/wp-content\/uploads\/2017\/11\/polymer-js-fusioncharts-output-150x79.png 150w\" sizes=\"auto, (max-width: 1364px) 100vw, 1364px\" \/><\/a>\r\n\r\nIf you find any difficulty in rendering the chart or you see any error in your code, click <a href=\"https:\/\/www.dropbox.com\/s\/7hp0wrorjqauydk\/TestPolymer.zip?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>. You will be able to download the complete source code of the sample project we created for this tutorial.\r\n<h2><span class=\"ez-toc-section\" id=\"Troubleshooting\"><\/span>Troubleshooting<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nIf you can&#8217;t see the chart, check that:\r\n<ul>\r\n \t<li>The chart ID is unique for all charts rendered on the same page or it will result in a JavaScript error.<\/li>\r\n \t<li>The fusioncharts.js and other related library files are properly included (especially if the chart does not show up at all).<\/li>\r\n \t<li>The path to files is correct and the files reside there.<\/li>\r\n \t<li>The chart alias names are mentioned correctly.<\/li>\r\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Polymer is a JavaScript library that assists in the development of custom components for a web page or web application. Web components are primitives at the lowest level. Because Polymer is built with web components, these components assist you in defining your own HTML elements. They also give you more flexibility by allowing you to [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16507,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675,691],"class_list":["post-16470","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 Create Stunning Charts In Polymer Applications<\/title>\n<meta name=\"description\" content=\"Polymer lets you create rich, reusable web components. Learn how to create charts in Polymer apps using defines and custom 2026 elements. Build apps 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\/charts-polymer-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create Stunning Charts In Polymer Applications\" \/>\n<meta property=\"og:description\" content=\"Polymer lets you create rich, reusable web components. Learn how to create charts in Polymer apps using defines and custom 2026 elements. Build apps now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-14T07:33:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/Implementing-FusionCharts-with-Polymer-JS-Application.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, Akash Biswas\" \/>\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, Akash Biswas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/\"\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 Stunning Charts in Polymer Applications 2026\",\n\t            \"datePublished\": \"2017-11-14T07:33:58+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:40+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/\"\n\t            },\n\t            \"wordCount\": 1132,\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\/charts-polymer-application\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/Implementing-FusionCharts-with-Polymer-JS-Application.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-polymer-application\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/\",\n\t            \"name\": \"How To Create Stunning Charts In Polymer Applications\",\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-polymer-application\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/Implementing-FusionCharts-with-Polymer-JS-Application.jpg\",\n\t            \"datePublished\": \"2017-11-14T07:33:58+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:40+00:00\",\n\t            \"description\": \"Polymer lets you create rich, reusable web components. Learn how to create charts in Polymer apps using defines and custom 2026 elements. Build apps now.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#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-polymer-application\/\"\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-polymer-application\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/11\/Implementing-FusionCharts-with-Polymer-JS-Application.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/11\/Implementing-FusionCharts-with-Polymer-JS-Application.jpg\",\n\t            \"width\": 2016,\n\t            \"height\": 750,\n\t            \"caption\": \"charts in Polymer JS Application\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#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 Stunning Charts in Polymer Applications 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 Stunning Charts In Polymer Applications","description":"Polymer lets you create rich, reusable web components. Learn how to create charts in Polymer apps using defines and custom 2026 elements. Build apps 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\/charts-polymer-application\/","og_locale":"en_US","og_type":"article","og_title":"How To Create Stunning Charts In Polymer Applications","og_description":"Polymer lets you create rich, reusable web components. Learn how to create charts in Polymer apps using defines and custom 2026 elements. Build apps now.","og_url":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-11-14T07:33:58+00:00","article_modified_time":"2026-01-20T09:11:40+00:00","og_image":[{"width":2016,"height":750,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/11\/Implementing-FusionCharts-with-Polymer-JS-Application.jpg","type":"image\/jpeg"}],"author":"Jonathan, Akash Biswas","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan, Akash Biswas","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"How to Create Stunning Charts in Polymer Applications 2026","datePublished":"2017-11-14T07:33:58+00:00","dateModified":"2026-01-20T09:11:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/"},"wordCount":1132,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/11\/Implementing-FusionCharts-with-Polymer-JS-Application.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/","url":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/","name":"How To Create Stunning Charts In Polymer Applications","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/11\/Implementing-FusionCharts-with-Polymer-JS-Application.jpg","datePublished":"2017-11-14T07:33:58+00:00","dateModified":"2026-01-20T09:11:40+00:00","description":"Polymer lets you create rich, reusable web components. Learn how to create charts in Polymer apps using defines and custom 2026 elements. Build apps now.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/11\/Implementing-FusionCharts-with-Polymer-JS-Application.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2017\/11\/Implementing-FusionCharts-with-Polymer-JS-Application.jpg","width":2016,"height":750,"caption":"charts in Polymer JS Application"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-polymer-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Stunning Charts in Polymer Applications 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\/16470","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=16470"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16470\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16507"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16470"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}