{"id":15029,"date":"2015-03-27T18:42:55","date_gmt":"2015-03-27T13:12:55","guid":{"rendered":"http:\/\/blog.fusioncharts.com\/?p=15029"},"modified":"2026-01-20T14:36:54","modified_gmt":"2026-01-20T09:06:54","slug":"angular-fusioncharts","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/","title":{"rendered":"AngularJS Charts: Create Interactive Charts in AngularJS 2026"},"content":{"rendered":"<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2015\/03\/angular-fusioncharts.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15030\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2015\/03\/angular-fusioncharts.png\" alt=\"angularjs charts\" width=\"714\" height=\"304\" srcset=\"\/blog\/wp-content\/uploads\/2015\/03\/angular-fusioncharts.png 714w, \/blog\/wp-content\/uploads\/2015\/03\/angular-fusioncharts-150x64.png 150w\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" \/><\/a>\r\n\r\n<span style=\"font-size: 16px\">Introducing <a href=\"https:\/\/www.fusioncharts.com\/angularjs-charts\/\">Angular-FusionCharts directive<\/a>.<\/span>\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\/angular-fusioncharts\/#What\" title=\"What?\">What?<\/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\/angular-fusioncharts\/#Why_did_we_do_this\" title=\"Why did we do this?\">Why did we do this?<\/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\/angular-fusioncharts\/#Downloading_the_Angular-FusionCharts_directive\" title=\"Downloading the Angular-FusionCharts directive\">Downloading the Angular-FusionCharts directive<\/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\/angular-fusioncharts\/#Installing_the_Angular-FusionCharts_directive\" title=\"Installing the Angular-FusionCharts directive\">Installing the Angular-FusionCharts directive<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#Step_1_Include_library_files\" title=\"Step 1: Include library files\">Step 1: Include library files<\/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\/angular-fusioncharts\/#Step_2_Include_directive_in_your_module\" title=\"Step 2: Include directive in your module\">Step 2: Include directive in your module<\/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\/angular-fusioncharts\/#Step_3_Add_the_fusioncharts_directive\" title=\"Step 3: Add the fusioncharts directive\">Step 3: Add the fusioncharts directive<\/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\/angular-fusioncharts\/#Step_4_Populate_the_required_variables_in_the_controller\" title=\"Step 4: Populate the required variables in the controller\">Step 4: Populate the required variables in the controller<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 dir=\"ltr\"><span class=\"ez-toc-section\" id=\"What\"><\/span>What?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<p dir=\"ltr\">Yes, you got that right. You can now create beautiful charts in AngularJS using our new directive. You can make use of all the stunning charts that we offer without dealing with core JavaScript. If you haven\u2019t got it already, go ahead and download it for free from <a href=\"https:\/\/www.fusioncharts.com\/angularjs-charts\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular charts<\/a> page.<\/p>\r\n\r\n<h2 dir=\"ltr\"><span class=\"ez-toc-section\" id=\"Why_did_we_do_this\"><\/span>Why did we do this?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<p dir=\"ltr\">This one is easy. Everybody in the world, including us of course, loves Angular. Even Google Trends suggests that. See how that blue graph keeps going up?<\/p>\r\n\r\n<div style=\"border: 2px solid #eeeeee;padding: 10px;background: #f4f4f4;margin: 40px 0;border-radius: 3px\"><\/div>\r\n\r\n\u00a0 So when developers, like you, came to us and asked for a solution, we decided to build Angular charts plugin. That\u2019s how Angular-FusionCharts directive was born. Now that you know why we built it, \u00a0let\u2019s learn how to use it. \r\n\r\n<h2 dir=\"ltr\"><span class=\"ez-toc-section\" id=\"Downloading_the_Angular-FusionCharts_directive\"><\/span>Downloading the Angular-FusionCharts directive<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\u00a0 You can download the Angular-FusionCharts directive by clicking <a href=\"https:\/\/www.fusioncharts.com\/downloads\/plugins\/angularjs-plugin.zip\">here<\/a>, or by visiting this <a href=\"https:\/\/www.fusioncharts.com\/angularjs-charts\/\">page<\/a>. \u00a0 \r\n\r\n<h2 dir=\"ltr\"><span class=\"ez-toc-section\" id=\"Installing_the_Angular-FusionCharts_directive\"><\/span>Installing the Angular-FusionCharts directive<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\u00a0 Once you have downloaded the AngularJS charts directive, installation is a simple four-step process: \u00a0 \r\n\r\n<h3 dir=\"ltr\"><span class=\"ez-toc-section\" id=\"Step_1_Include_library_files\"><\/span>Step 1: Include library files<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\u00a0 In your HTML, include the <span class=\"lang:js decode:true crayon-inline\">fusioncharts.js<\/span>\u00a0and the <span class=\"lang:js decode:true  crayon-inline \">angular-fusioncharts.js<\/span>\u00a0files. The <span class=\"lang:js decode:true  crayon-inline \">angular-fusioncharts.js<\/span>\u00a0file must be included after all other scripts. \u00a0 \r\n<pre class=\"lang:markup\">&lt;script type=\"text\/javascript\" src=\"\/path\/to\/fusioncharts.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"\/path\/to\/angular.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"\/path\/to\/angular-fusioncharts.js\"&gt;&lt;\/script&gt;<\/pre>\r\n\r\n&nbsp;\r\n\r\n<h3 dir=\"ltr\"><span class=\"ez-toc-section\" id=\"Step_2_Include_directive_in_your_module\"><\/span>Step 2: Include directive in your module<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nIn the app, include the <span class=\"lang:js decode:true  crayon-inline \">ng-fusioncharts<\/span>\u00a0directive as a dependency. If you are looking for where to add the dependency, look for the call to <span class=\"lang:js decode:true  crayon-inline \">angular.module<\/span>\u00a0in your code. \r\n\r\n<pre class=\"lang:markup\">angular.module(\"myApp\", [\"ng-fusioncharts\"])<\/pre>\r\n\r\n&nbsp;\r\n\r\n<h3 dir=\"ltr\"><span class=\"ez-toc-section\" id=\"Step_3_Add_the_fusioncharts_directive\"><\/span>Step 3: Add the fusioncharts directive<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\u00a0 In your HTML, define a <span class=\"lang:js decode:true  crayon-inline \">&lt;div&gt;<\/span>\u00a0\u00a0element with <span class=\"lang:js decode:true  crayon-inline \">fusioncharts<\/span>\u00a0\u00a0directive where you want to add the chart. \u00a0 \r\n\r\n<pre class=\"lang:markup\">&lt;div ng-controller=\"MyController\"&gt;\r\n\u00a0&lt;div fusioncharts\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width=\"600\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height=\"400\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=\"column2d\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dataSource=\"{{myDataSource}}\" &gt;\r\n\u00a0&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\r\n\r\n\u00a0 In the snippet above, it is assumed that the chart has to be added inside a controller called<span class=\"lang:js decode:true  crayon-inline \">MyController<\/span>\u00a0. \u00a0 \r\n\r\n<h3 dir=\"ltr\"><span class=\"ez-toc-section\" id=\"Step_4_Populate_the_required_variables_in_the_controller\"><\/span>Step 4: Populate the required variables in the controller<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\u00a0 In the above code snippet, the directive is bound to the <span class=\"lang:js decode:true  crayon-inline \">datasource<\/span> scope variable. The variable, however, has not been initialized yet. \u00a0 In your controller, set the <span class=\"lang:js decode:true  crayon-inline \">datasource<\/span> using the FusionCharts JSON format. (Check <a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/plain-javascript\/your-first-chart-using-plain-javascript\">this tutorial<\/a> for a general introduction to this format.) \u00a0 \r\n\r\n<pre class=\"lang:javascript\">app.controller('MyController', function ($scope) {\r\n\r\n\/\/Define the `myDataSource` scope variable. \u00a0\r\n$scope.myDataSource = {\r\n\u00a0\u00a0\u00a0chart: {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0caption: \"Harry's SuperMart\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0subCaption: \"Top 5 stores in last month by revenue\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0numberPrefix: \"$\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0theme: \"fint\"\r\n\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0data:[{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0label: \"Bakersfield Central\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value: \"880000\"\r\n\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0label: \"Garden Groove harbour\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value: \"730000\"\r\n\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0label: \"Los Angeles Topanga\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value: \"590000\"\r\n\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0label: \"Compton-Rancho Dom\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value: \"520000\"\r\n\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0label: \"Daly City Serramonte\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value: \"330000\"\r\n\u00a0\u00a0\u00a0}]\r\n};\r\n});<\/pre>\r\n\r\nWith the scope variable successfully initialized, this is how the result looks: \r\n\r\n<div id=\"chart-container\"><\/div>\r\n\r\n\r\n\/\/ \r\n<blockquote>\r\n<p dir=\"ltr\">FusionCharts uses the JSON and XML data formats for writing chart data. As mentioned earlier, the chart data in the controller above is using the JSON data format.\u00a0Every chart has a set of attributes and a predefined data structure, in both formats. To know about the attributes and data structure of a column 2D chart in JSON, click <a href=\"https:\/\/www.fusioncharts.com\/dev\/chart-attributes?chart=column2d\">here<\/a>. To know about the same representation of a column 2D chart in XML, click <a href=\"https:\/\/www.fusioncharts.com\/dev\/api\/fusioncharts\/fusioncharts-methods#setXMLData\">here<\/a>.<\/p>\r\n<\/blockquote>\r\n<p dir=\"ltr\">In the above example, the<span class=\"lang:js decode:true  crayon-inline  \">fusioncharts<\/span>\u00a0directive is used as an attribute of the <span class=\"lang:js decode:true  crayon-inline \">&lt;div&gt;<\/span>\u00a0\u00a0element. Alternatively, \u00a0the<span class=\"lang:js decode:true  crayon-inline \">fusioncharts<\/span>\u00a0directive can be used as a tag. This is how the HTML code will then change:<\/p>\r\n\r\n<pre class=\"lang:javascript\">&lt;fusioncharts\r\n\u00a0\u00a0\u00a0width=\"300\" \r\n\u00a0\u00a0\u00a0height=\"200\"\r\n\u00a0\u00a0\u00a0type=\"column2d\",\r\n\u00a0\u00a0\u00a0datasource=\"{{dataSource}}\"\r\n&gt;&lt;\/fusioncharts&gt;<\/pre>\r\nThe complete guide to this directive can be found <a href=\"https:\/\/www.fusioncharts.com\/dev\/getting-started\/angular\/angularjs\/your-first-chart-using-angularjs\">here<\/a>.\r\n\r\nThat\u2019s all you need to know to start using our Angular-FusionCharts directive. We would love if you can give our directive a try. And if you are stuck anywhere drop us a line at <a href=\"mailto:support@fusioncharts.com\">support@fusioncharts.com<\/a>. Happy to help!","protected":false},"excerpt":{"rendered":"<p>Introducing Angular-FusionCharts directive. What? Yes, you got that right. You can now create beautiful charts in AngularJS using our new directive. You can make use of all the stunning charts that we offer without dealing with core JavaScript. If you haven\u2019t got it already, go ahead and download it for free from Angular charts page. [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[560,561,562],"coauthors":[712],"class_list":["post-15029","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-angular-charts","tag-angularjs-charts","tag-create-angularjs-charts"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>AngularJS Charts - Create Interactive Charts in AngularJS<\/title>\n<meta name=\"description\" content=\"Create interactive charts in AngularJS using our free plugin. Download the 2026 FusionCharts AngularJS tool and start visualizing today. Master data 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\/angular-fusioncharts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS Charts - Create Interactive Charts in AngularJS\" \/>\n<meta property=\"og:description\" content=\"Create interactive charts in AngularJS using our free plugin. Download the 2026 FusionCharts AngularJS tool and start visualizing today. Master data now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-27T13:12:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:06:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2015\/03\/angular-fusioncharts.png\" \/>\n\t<meta property=\"og:image:width\" content=\"714\" \/>\n\t<meta property=\"og:image:height\" content=\"304\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikas Lalwani\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikas Lalwani\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 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\/angular-fusioncharts\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Vikas Lalwani\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/5530197c230a9b49df5de36777b89bf2\"\n\t            },\n\t            \"headline\": \"AngularJS Charts: Create Interactive Charts in AngularJS 2026\",\n\t            \"datePublished\": \"2015-03-27T13:12:55+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:54+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/\"\n\t            },\n\t            \"wordCount\": 504,\n\t            \"commentCount\": 5,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2015\/03\/angular-fusioncharts.png\",\n\t            \"keywords\": [\n\t                \"angular charts\",\n\t                \"angularjs charts\",\n\t                \"create angularjs charts\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/\",\n\t            \"name\": \"AngularJS Charts - Create Interactive Charts in AngularJS\",\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\/angular-fusioncharts\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2015\/03\/angular-fusioncharts.png\",\n\t            \"datePublished\": \"2015-03-27T13:12:55+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:54+00:00\",\n\t            \"description\": \"Create interactive charts in AngularJS using our free plugin. Download the 2026 FusionCharts AngularJS tool and start visualizing today. Master data now.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#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\/angular-fusioncharts\/\"\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\/angular-fusioncharts\/#primaryimage\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2015\/03\/angular-fusioncharts.png\",\n\t            \"contentUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2015\/03\/angular-fusioncharts.png\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#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\": \"AngularJS Charts: Create Interactive Charts in AngularJS 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\/5530197c230a9b49df5de36777b89bf2\",\n\t            \"name\": \"Vikas Lalwani\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/86ef00c8343692fe10b37d7657769517\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/ccd\/ccdd4b2cb256cf5722d2a55b818472aex96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/ccd\/ccdd4b2cb256cf5722d2a55b818472aex96.jpg\",\n\t                \"caption\": \"Vikas Lalwani\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/www.fusioncharts.com\"\n\t            ],\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/vikas\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS Charts - Create Interactive Charts in AngularJS","description":"Create interactive charts in AngularJS using our free plugin. Download the 2026 FusionCharts AngularJS tool and start visualizing today. Master data 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\/angular-fusioncharts\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS Charts - Create Interactive Charts in AngularJS","og_description":"Create interactive charts in AngularJS using our free plugin. Download the 2026 FusionCharts AngularJS tool and start visualizing today. Master data now.","og_url":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2015-03-27T13:12:55+00:00","article_modified_time":"2026-01-20T09:06:54+00:00","og_image":[{"width":714,"height":304,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2015\/03\/angular-fusioncharts.png","type":"image\/png"}],"author":"Vikas Lalwani","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikas Lalwani","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/"},"author":{"name":"Vikas Lalwani","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/5530197c230a9b49df5de36777b89bf2"},"headline":"AngularJS Charts: Create Interactive Charts in AngularJS 2026","datePublished":"2015-03-27T13:12:55+00:00","dateModified":"2026-01-20T09:06:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/"},"wordCount":504,"commentCount":5,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2015\/03\/angular-fusioncharts.png","keywords":["angular charts","angularjs charts","create angularjs charts"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/","url":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/","name":"AngularJS Charts - Create Interactive Charts in AngularJS","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2015\/03\/angular-fusioncharts.png","datePublished":"2015-03-27T13:12:55+00:00","dateModified":"2026-01-20T09:06:54+00:00","description":"Create interactive charts in AngularJS using our free plugin. Download the 2026 FusionCharts AngularJS tool and start visualizing today. Master data now.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#primaryimage","url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2015\/03\/angular-fusioncharts.png","contentUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2015\/03\/angular-fusioncharts.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/angular-fusioncharts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"AngularJS Charts: Create Interactive Charts in AngularJS 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\/5530197c230a9b49df5de36777b89bf2","name":"Vikas Lalwani","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/86ef00c8343692fe10b37d7657769517","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/ccd\/ccdd4b2cb256cf5722d2a55b818472aex96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/ccd\/ccdd4b2cb256cf5722d2a55b818472aex96.jpg","caption":"Vikas Lalwani"},"sameAs":["http:\/\/www.fusioncharts.com"],"url":"https:\/\/www.fusioncharts.com\/blog\/author\/vikas\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15029","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\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=15029"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15029\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=15029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=15029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=15029"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=15029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}