{"id":16208,"date":"2017-09-12T20:19:44","date_gmt":"2017-09-12T14:49:44","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16208"},"modified":"2026-01-20T14:40:53","modified_gmt":"2026-01-20T09:10:53","slug":"create-charts-with-angular","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/","title":{"rendered":"How to Create Stunning Charts with Angular: 2026 Dev"},"content":{"rendered":"When Google released <a class=\"editor-rtfLink\" href=\"https:\/\/angularjs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span data-preserver-spaces=\"true\">AngularJS<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0<\/span>(version 1.x) a few years ago, it was a compelling JavaScript library. However, when Facebook launched the ReactJS library, the library experienced unexpected developer attrition. They completely redesigned the architecture to keep it from becoming obsolete. The framework was a Model-View-Whatever architecture to a component-based architecture conversion. To commemorate the redesign of the architecture, the framework was renamed Angular (for versions 2 and up).\r\n\r\nAngular was made modular as part of its architecture redesign. This feature allows you to install individual modules, allowing you to avoid installing unnecessary modules. Angular, on the other hand, insists on using TypeScript to ensure type safety in the app.\r\n\r\nWhen creating an Angular application, you can divide it into multiple components that can be nested or child components. Each Angular component is made up of three major components:\r\n<ul>\r\n \t<li><strong>Main file: <\/strong>contains the business logic of the app<\/li>\r\n \t<li><strong>Index file: <\/strong>contains the user interface of the app<\/li>\r\n \t<li><strong>App file:<\/strong> contains the core app configurations<\/li>\r\n<\/ul>\r\nOne of these components, the FusionCharts Javascript charting library, will be used to create a chart in this post.\r\n\r\nFusionCharts provides a ready-to-use Angular plugin for creating <a href=\"https:\/\/www.fusioncharts.com\/angular2-js-charts\">Live charts<\/a>, allowing developers to integrate the charting library with Angular. This method eliminates the need for the component to be built from the ground up.\r\n\r\nLet&#8217;s get started on the chart without further ado:\r\n\r\nStep 1: <strong>Prepare the data<\/strong>\r\n\r\nStep 2: <strong>Install the FusionCharts-Angular2 extension<\/strong>\r\nStep 3: <strong>Create a chart component in Angular<\/strong>\r\nStep 4: <strong>Render the chart<\/strong>\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\/create-charts-with-angular\/#Step_1_Prepare_the_Data\" title=\"Step 1: Prepare the Data\">Step 1: Prepare the Data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#Step_2_Install_the_FusionCharts-Angular2_Extension\" title=\"Step 2: Install the FusionCharts-Angular2 Extension\">Step 2: Install the FusionCharts-Angular2 Extension<\/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\/create-charts-with-angular\/#Step_3_Create_a_Chart_Component_in_Angular\" title=\"Step 3: Create a Chart Component in Angular\">Step 3: Create a Chart Component in Angular<\/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\/create-charts-with-angular\/#Step_4_Render_the_Chart\" title=\"Step 4: Render the Chart\">Step 4: Render the Chart<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Step_1_Prepare_the_Data\"><\/span>Step 1: Prepare the Data<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe FusionCharts library currently accepts data in JSON and XML only. As such, we need to convert data in a format accepted by the library. For this AngularJS chart example, we will use JSON.\r\n\r\nWe\u2019ll use the following data that shows expenses incurred by different functions:\r\n<table class=\"tg\">\r\n<tbody>\r\n<tr>\r\n<th class=\"tg-43nb\">Quarter<\/th>\r\n<th class=\"tg-43nb\">Marketing<\/th>\r\n<th class=\"tg-t2cw\">Management<\/th>\r\n<th class=\"tg-t2cw\">Operations<\/th>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-s6z2\">Q1<\/td>\r\n<td class=\"tg-s6z2\">121000<\/td>\r\n<td class=\"tg-baqh\">190000<\/td>\r\n<td class=\"tg-baqh\">225000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-s6z2\">Q2<\/td>\r\n<td class=\"tg-s6z2\">135000<\/td>\r\n<td class=\"tg-baqh\">195000<\/td>\r\n<td class=\"tg-baqh\">260000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-s6z2\">Q3<\/td>\r\n<td class=\"tg-s6z2\">123500<\/td>\r\n<td class=\"tg-baqh\">187000<\/td>\r\n<td class=\"tg-baqh\">245000<\/td>\r\n<\/tr>\r\n<tr>\r\n<td class=\"tg-s6z2\">Q4<\/td>\r\n<td class=\"tg-s6z2\">145000<\/td>\r\n<td class=\"tg-baqh\">190000<\/td>\r\n<td class=\"tg-baqh\">250000<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nSince we are visualizing a part-to-whole data set, we will use a Stacked Column Chart.\r\n<h2><span class=\"ez-toc-section\" id=\"Step_2_Install_the_FusionCharts-Angular2_Extension\"><\/span>Step 2: Install the FusionCharts-Angular2 Extension<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo get started, you need to install the FusionCharts-Angular2 Component using npm.\r\n\r\n`$ npm install angular2-fusioncharts &#8211;save`\r\n\r\nYou then need to import the angular2-fusioncharts extension in the root @NgModule\r\n<pre class=\"lang:js decode:true\" title=\"module.ts\">import { NgModule } from '@angular\/core';\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\n\/\/ Import the library\r\nimport { FusionChartsModule } from 'angular2-fusioncharts';\r\nimport { AppComponent } from '.\/app.component';\r\n\r\n\/\/ Import angular2-fusioncharts\r\nimport { FusionChartsModule } from 'angular2-fusioncharts';\r\n\r\n\/\/ Import FusionCharts library\r\nimport * as FusionCharts from 'fusioncharts';\r\n\/\/ Import FusionCharts Charts module\r\nimport * as Charts from 'fusioncharts\/fusioncharts.charts';\r\n \r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule, \r\n    \/\/ Specify FusionChartsModule as an import \r\n    \/\/ and pass FusionCharts and Charts as a dependency\r\n    \/\/ You can pass all other FusionCharts modules such as Charts, PowerCharts\r\n    \/\/ Maps, Widgets e.t.c. after FusionCharts\r\n    FusionChartsModule.forRoot(FusionCharts, Charts)\r\n  ],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\r\n<h2><span class=\"ez-toc-section\" id=\"Step_3_Create_a_Chart_Component_in_Angular\"><\/span>Step 3: Create a Chart Component in Angular<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow we need to create the chart component.\r\n<pre class=\"lang:js decode:true \" title=\"app.ts\">\/\/our root app component\r\nimport {Component, NgModule} from '@angular\/core'\r\nimport {BrowserModule} from '@angular\/platform-browser'\r\n\r\n@Component({\r\n  selector: 'my-app',\r\n  template: `&lt;fusioncharts\r\n    width=\"100%\" \r\n    height=\"450\"\r\n    type=\"stackedcolumn2d\"\r\n    dataFormat=\"json\"\r\n    [dataSource]=dataSource &gt;\r\n  &lt;\/fusioncharts&gt;\r\n  `,\r\n})\r\nexport class App {\r\n  demoId: string;\r\n  constructor() {\r\n    this.demoId = \"ex1\";\r\n\r\n    this.dataSource = {\r\n      chart: {\r\n        \"caption\": \"Quarterly expenditure\",\r\n        \"xAxisname\": \"Quarter\",\r\n        \"yAxisName\": \"Expenditure (In USD)\",\r\n        \"numberPrefix\": \"$\",\r\n        \"baseFont\": \"Roboto\",\r\n        \"baseFontSize\": \"14\",\r\n        \"labelFontSize\": \"15\",\r\n        \"captionFontSize\": \"20\",\r\n        \"subCaptionFontSize\": \"16\",\r\n        \"paletteColors\": \"#2c7fb2,#6cc184,#fed466\",\r\n        \"bgColor\": \"#ffffff\",\r\n        \"legendShadow\": \"0\",\r\n        \"valueFontColor\": \"#ffffff\",\r\n        \"showXAxisLine\": \"1\",\r\n        \"xAxisLineColor\": \"#999999\",\r\n        \"divlineColor\": \"#999999\",\r\n        \"divLineIsDashed\": \"1\",\r\n        \"showAlternateHGridColor\": \"0\",\r\n        \"subcaptionFontBold\": \"0\",\r\n        \"subcaptionFontSize\": \"14\",\r\n        \"showHoverEffect\": \"1\"\r\n      },\r\n      \"categories\": [{\r\n        \"category\": [{\r\n          \"label\": \"Q1\"\r\n        }, {\r\n          \"label\": \"Q2\"\r\n        }, {\r\n          \"label\": \"Q3\"\r\n        }, {\r\n          \"label\": \"Q4\"\r\n        }]\r\n      }],\r\n      \"dataset\": [{\r\n        \"seriesname\": \"Marketing\",\r\n        \"data\": [{\r\n          \"value\": \"121000\"\r\n        }, {\r\n          \"value\": \"135000\"\r\n        }, {\r\n          \"value\": \"123500\"\r\n        }, {\r\n          \"value\": \"145000\"\r\n        }]\r\n      }, {\r\n        \"seriesname\": \"Management\",\r\n        \"data\": [{\r\n          \"value\": \"190000\"\r\n        }, {\r\n          \"value\": \"195000\"\r\n        }, {\r\n          \"value\": \"187000\"\r\n        }, {\r\n          \"value\": \"190000\"\r\n        }]\r\n      }, {\r\n        \"seriesname\": \"Operations\",\r\n        \"data\": [{\r\n          \"value\": \"225000\"\r\n        }, {\r\n          \"value\": \"260000\"\r\n        }, {\r\n          \"value\": \"245000\"\r\n        }, {\r\n          \"value\": \"250000\"\r\n        }]\r\n      }]\r\n    };\r\n  }\r\n}\r\n<\/pre>\r\nThe component adds the <code>&lt;fusioncharts&gt;<\/code> directive in the Angular app. The detailed chart configurations, along with the data in JSON format, are added to the component.\r\n<h2><span class=\"ez-toc-section\" id=\"Step_4_Render_the_Chart\"><\/span>Step 4: Render the Chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<pre class=\"lang:markup decode:true \" title=\"index.html\">&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;base href=\".\" \/&gt;\r\n  &lt;title&gt;Angular2 playground - FusionCharts&lt;\/title&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"style.css\" \/&gt;\r\n  &lt;script src=\"https:\/\/unpkg.com\/core-js@2.4.1\/client\/shim.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/unpkg.com\/zone.js\/dist\/zone.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/unpkg.com\/zone.js\/dist\/long-stack-trace-zone.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/unpkg.com\/reflect-metadata@0.1.3\/Reflect.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/unpkg.com\/systemjs@0.19.31\/dist\/system.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"config.js\"&gt;&lt;\/script&gt;\r\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto\" rel=\"stylesheet\"&gt;\r\n  &lt;script&gt;\r\n    System.import('app')\r\n      .catch(console.error.bind(console));\r\n  &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n  &lt;my-app&gt;\r\n    &lt;h1&gt;Creating your Chart in Angular using &lt;i&gt;FusionCharts&lt;\/i&gt;!&lt;\/h1&gt;\r\n  &lt;\/my-app&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\r\nWe now make a call to the &lt;my-app&gt; component that we created in Angular.\r\n<pre class=\"lang:js decode:true \" title=\"main.ts\">\/\/main entry point\r\nimport {platformBrowserDynamic} from '@angular\/platform-browser-dynamic';\r\nimport {AppModule} from '.\/module';\r\n\r\nplatformBrowserDynamic().bootstrapModule(AppModule)\r\n<\/pre>\r\nWhen the &lt;my-app&gt; component is referenced, the AppModule function will get triggered. This would then import the FusionChartsModule, thereby rendering the chart using the chart component that we created.\r\n\r\nIf you have been following along, your output should look similar to the image shown below:\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/angular-charts-fusioncharts-example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16214 size-full\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/angular-charts-fusioncharts-example.png\" alt=\"Creating charts in Angular using FusionCharts\" width=\"691\" height=\"450\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/angular-charts-fusioncharts-example.png 691w, \/blog\/wp-content\/uploads\/2017\/09\/angular-charts-fusioncharts-example-150x98.png 150w\" sizes=\"auto, (max-width: 691px) 100vw, 691px\" \/><\/a>\r\n\r\nAlternatively, you can experiment with our codebase on <a href=\"https:\/\/embed.plnkr.co\/PQ01QtTJzdKue51stusS\/\" target=\"_blank\" rel=\"noopener noreferrer\">Plunker<\/a>.\r\n\r\nIf you still face issues with the implementation, you can reach out to us for <a href=\"https:\/\/www.fusioncharts.com\/support\/\" target=\"_blank\" rel=\"noopener noreferrer\">support<\/a>.","protected":false},"excerpt":{"rendered":"<p>When Google released AngularJS\u00a0(version 1.x) a few years ago, it was a compelling JavaScript library. However, when Facebook launched the ReactJS library, the library experienced unexpected developer attrition. They completely redesigned the architecture to keep it from becoming obsolete. The framework was a Model-View-Whatever architecture to a component-based architecture conversion. To commemorate the redesign of [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16223,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[560,562],"coauthors":[675,688],"class_list":["post-16208","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-angular-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>How to Create Stunning Charts with Angular<\/title>\n<meta name=\"description\" content=\"Learn how to create stunning charts with Angular. Our 2026 dev guide covers the component-based architecture needed for interactive visualizations 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\/create-charts-with-angular\/\" \/>\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 with Angular\" \/>\n<meta property=\"og:description\" content=\"Learn how to create stunning charts with Angular. Our 2026 dev guide covers the component-based architecture needed for interactive visualizations today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-12T14:49:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:10:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/Rendering-FusionCharts-in-an-Android-Application2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"672\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jonathan, Gagan Sikri\" \/>\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, Gagan Sikri\" \/>\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\/create-charts-with-angular\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/\"\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 with Angular: 2026 Dev\",\n\t            \"datePublished\": \"2017-09-12T14:49:44+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:53+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/\"\n\t            },\n\t            \"wordCount\": 494,\n\t            \"commentCount\": 2,\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\/create-charts-with-angular\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/Rendering-FusionCharts-in-an-Android-Application2.jpg\",\n\t            \"keywords\": [\n\t                \"angular 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\/create-charts-with-angular\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/\",\n\t            \"name\": \"How to Create Stunning Charts with Angular\",\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\/create-charts-with-angular\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/Rendering-FusionCharts-in-an-Android-Application2.jpg\",\n\t            \"datePublished\": \"2017-09-12T14:49:44+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:53+00:00\",\n\t            \"description\": \"Learn how to create stunning charts with Angular. Our 2026 dev guide covers the component-based architecture needed for interactive visualizations today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#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\/create-charts-with-angular\/\"\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\/create-charts-with-angular\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/09\/Rendering-FusionCharts-in-an-Android-Application2.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/Rendering-FusionCharts-in-an-Android-Application2.jpg\",\n\t            \"width\": 672,\n\t            \"height\": 250\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#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 with Angular: 2026 Dev\"\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 with Angular","description":"Learn how to create stunning charts with Angular. Our 2026 dev guide covers the component-based architecture needed for interactive visualizations 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\/create-charts-with-angular\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Stunning Charts with Angular","og_description":"Learn how to create stunning charts with Angular. Our 2026 dev guide covers the component-based architecture needed for interactive visualizations today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-09-12T14:49:44+00:00","article_modified_time":"2026-01-20T09:10:53+00:00","og_image":[{"width":672,"height":250,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/Rendering-FusionCharts-in-an-Android-Application2.jpg","type":"image\/jpeg"}],"author":"Jonathan, Gagan Sikri","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan, Gagan Sikri","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"How to Create Stunning Charts with Angular: 2026 Dev","datePublished":"2017-09-12T14:49:44+00:00","dateModified":"2026-01-20T09:10:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/"},"wordCount":494,"commentCount":2,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/09\/Rendering-FusionCharts-in-an-Android-Application2.jpg","keywords":["angular charts","create angularjs charts"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/","url":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/","name":"How to Create Stunning Charts with Angular","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/09\/Rendering-FusionCharts-in-an-Android-Application2.jpg","datePublished":"2017-09-12T14:49:44+00:00","dateModified":"2026-01-20T09:10:53+00:00","description":"Learn how to create stunning charts with Angular. Our 2026 dev guide covers the component-based architecture needed for interactive visualizations today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/09\/Rendering-FusionCharts-in-an-Android-Application2.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2017\/09\/Rendering-FusionCharts-in-an-Android-Application2.jpg","width":672,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-with-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Stunning Charts with Angular: 2026 Dev"}]},{"@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\/16208","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=16208"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16223"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16208"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}