{"id":16338,"date":"2017-09-28T16:02:45","date_gmt":"2017-09-28T10:32:45","guid":{"rendered":"https:\/\/www.fusioncharts.com\/blog\/?p=16338"},"modified":"2026-06-03T16:43:39","modified_gmt":"2026-06-03T11:13:39","slug":"create-charts-in-ionic-2-with-fusioncharts","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/","title":{"rendered":"How to Create Charts in Your Mobile Application Using Ionic 2 2026"},"content":{"rendered":"<p>With the number of smartphone users globally pegged at 2.3 billion, there is a distinctive shift in the consumption of digital media. While users have been consuming online content from desktops, of late trends show a rise in consumption through smartphones. This has resulted in a massive number of apps. However, the hurdle with this is that we need to develop apps for individual platforms. To overcome this, hybrid apps are gaining popularity.<\/p>\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-in-ionic-2-with-fusioncharts\/#Creating_mobile_apps_using_Ionic_2_Framework\" title=\"Creating mobile apps using Ionic 2 Framework\">Creating mobile apps using Ionic 2 Framework<\/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-in-ionic-2-with-fusioncharts\/#Requirements\" title=\"Requirements\">Requirements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#Creating_charts_in_Ionic_2\" title=\"Creating charts in Ionic 2\">Creating charts in Ionic 2<\/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-in-ionic-2-with-fusioncharts\/#Step_1_Creating_an_app_in_Ionic_2\" title=\"Step 1: Creating an app in Ionic 2\">Step 1: Creating an app in Ionic 2<\/a><\/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\/create-charts-in-ionic-2-with-fusioncharts\/#Step_2_Installing_Dependencies\" title=\"Step 2: Installing Dependencies\">Step 2: Installing Dependencies<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#Step_3_Configuring_the_chart\" title=\"Step 3: Configuring the chart\">Step 3: Configuring the chart<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#Step_4_Creating_the_FusionCharts_directive\" title=\"Step 4: Creating the FusionCharts directive\">Step 4: Creating the FusionCharts directive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#Step_5_Rendering_the_chart\" title=\"Step 5: Rendering the chart\">Step 5: Rendering the chart<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Creating_mobile_apps_using_Ionic_2_Framework\"><\/span>Creating mobile apps using Ionic 2 Framework<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A hybrid app uses web technologies like HTML, CSS, and JavaScript along with the native wrapper so that it can be installed on a mobile device. This method does away with the overheads of developing the app using native programming languages like Java, Objective C. Additionally; it allows to quickly deploy apps across multiple platforms like Android, iOS, Windows Phone without having to develop individual apps. A more significant advantage of deploying hybrid apps is that you can update your app without having to republish it through the app stores, thereby saving a lot of time and unnecessary effort.<\/p>\n<p>While there are a couple of hybrid frameworks, the Ionic framework is gaining widespread popularity, primarily because of its dependence on Angular. The framework uses the Cordova native wrapper, which enables the HTML\/CSS\/JavaScript to be loaded in a web-view when the mobile app is fired up. Moreover, Cordova has plugins that allow you to communicate with the native features of your mobile device using just JavaScript.<\/p>\n<p>Today we shall create a chart in a mobile app using a hybrid framework\u2014Ionic 2. We will use the FusionCharts JavaScript charting library to create charts in the apps. The reason for preferring Ionic 2 is that it is based on Angular. Interestingly, the FusionCharts library has an Angular extension, which will make the process of creating the charts quick and simple.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Requirements\"><\/span>Requirements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To create a chart in a mobile app developed using Ionic 2, you will need the following components downloaded and installed:<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>Ionic framework &#8211;<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ionicframework.com\/docs\/intro\/installation\/\">Download Link<\/a><\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>FusionCharts Library &#8211;<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.fusioncharts.com\/download\/\">Download Link<\/a><\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>Angular-FusionCharts Directive &#8211;<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.fusioncharts.com\/angularjs-charts\/#\/demos\/ex1\">Download Link<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creating_charts_in_Ionic_2\"><\/span>Creating charts in Ionic 2<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"Step_1_Creating_an_app_in_Ionic_2\"><\/span>Step 1: Creating an app in Ionic 2<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To get started, we need to create an app in the Ionic 2 framework.<\/p>\n<ol>\n<li>Run the following command from the shell interface.<br \/>\n<code>ionic start myapp<\/code><br \/>\nThis will automatically create all the dependencies required to create the app.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Step_2_Installing_Dependencies\"><\/span>Step 2: Installing Dependencies<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Next, we need to integrate the FusionCharts library in the Ionic 2 framework.<\/p>\n<ol>\n<li>Install the FusionCharts-Angular extension in the <code>project node_modules<\/code> using the following command.<br \/>\n<code>npm\u00a0install angular2\u00a0-fusioncharts --save<\/code><\/li>\n<li>Import the files into the <code>app.module.ts<\/code> file. [Path: src \u2192 app \u2192 app.module.ts]<\/li>\n<\/ol>\n<pre class=\"lang:javascript decode:true \" title=\"app.module.ts\">import { BrowserModule } from '@angular\/platform-browser';\r\nimport { ErrorHandler, NgModule } from '@angular\/core';\r\nimport { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';\r\nimport { SplashScreen } from '@ionic-native\/splash-screen';\r\nimport { StatusBar } from '@ionic-native\/status-bar';\r\n\r\nimport { MyApp } from '.\/app.component';\r\nimport { HomePage } from '..\/pages\/home\/home';\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\/\/ Load FusionCharts Charts module\r\nimport Charts from \"fusioncharts\/fusioncharts.charts\";\r\n\/\/ Load themes\r\nimport themes from \"fusioncharts\/themes\/fusioncharts.theme.fint\";\r\n\r\n\r\n\r\n@NgModule({\r\n  declarations: [\r\n    MyApp,\r\n    HomePage\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n      FusionChartsModule.forRoot(FusionCharts, Charts, themes),\r\n    IonicModule.forRoot(MyApp)\r\n  ],\r\n  bootstrap: [IonicApp],\r\n  entryComponents: [\r\n    MyApp,\r\n    HomePage\r\n  ],\r\n  providers: [\r\n   StatusBar,\r\n  SplashScreen,\r\n    {provide: ErrorHandler, useClass: IonicErrorHandler}\r\n  ]\r\n})\r\nexport class AppModule {}\r\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Step_3_Configuring_the_chart\"><\/span>Step 3: Configuring the chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now we need to provide the data that would be used to render the chart. The data source has to be updated in the <code>home.ts<\/code> file located in [Path: src \u2192 home \u2192 home.ts]<\/p>\n<ol>\n<li>Update the data source for rendering the chart in the <code>home.ts<\/code> file.<\/li>\n<\/ol>\n<pre class=\"lang:javascript decode:true \" title=\"home.ts\">import { Component } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n\r\n  dataSource: Object;\r\n  constructor(public navCtrl: NavController) {\r\n\r\nthis.dataSource = {\r\n      \"chart\": {\r\n        \"caption\": \"Harry's SuperMart\",\r\n        \"subCaption\": \"Top 5 stores in last month by revenue\",\r\n        \"theme\":\"fint\"\r\n      },\r\n      \"data\": [{\r\n        \"label\": \"Bakersfield Central\",\r\n         \"value\": \"880000\"\r\n      }, {\r\n        \"label\": \"Garden Groove harbour\",\r\n        \"value\": \"730000\"\r\n      }, {\r\n        \"label\": \"Los Angeles Topanga\",\r\n        \"value\": \"590000\"\r\n      }, {\r\n        \"label\": \"Compton-Rancho Dom\",\r\n        \"value\": \"520000\"\r\n      }, {\r\n        \"label\": \"Daly City Serramonte\",\r\n        \"value\": \"330000\"\r\n      }]\r\n    }\r\n\r\n  }\r\n\r\n}\r\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Step_4_Creating_the_FusionCharts_directive\"><\/span>Step 4: Creating the FusionCharts directive<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now that the data is added, we need to create the FusionCharts directive that will create the chart element.<\/p>\n<ol>\n<li>Add the following code to the <code>home.html<\/code> file. [Path: src \u2192 home \u2192 home.html]<\/li>\n<\/ol>\n<pre class=\"lang:markup decode:true \" title=\"home.html\">&lt;ion-header&gt;\r\n  &lt;ion-navbar&gt;\r\n    &lt;ion-title&gt;\r\n      FusionCharts Angular2 plugin in ionic framework\r\n    &lt;\/ion-title&gt;\r\n  &lt;\/ion-navbar&gt;\r\n&lt;\/ion-header&gt;\r\n\r\n&lt;ion-content padding&gt;\r\n&lt;fusioncharts\r\n          width=\"600\"\r\n          height=\"350\"\r\n          type=\"Column2D\"\r\n          dataFormat=\"JSON\"\r\n          [dataSource]=\"dataSource\"&gt;\r\n       \r\n      &lt;\/fusioncharts&gt;\r\n&lt;\/ion-content&gt;\r\n<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Step_5_Rendering_the_chart\"><\/span>Step 5: Rendering the chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now that we have our code in place, let us run the code to see the output.<\/p>\n<ol>\n<li>Run the following command from the shell interface.<br \/>\n<code>ionic serve<\/code><\/li>\n<\/ol>\n<p>If you\u2019ve followed the steps closely, your output should like the chart shown in the image below:<\/p>\n<p><a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/charts-using-ionic-2-mobile-framework-fusioncharts.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16339\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/charts-using-ionic-2-mobile-framework-fusioncharts.png\" alt=\"\" width=\"612\" height=\"481\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/charts-using-ionic-2-mobile-framework-fusioncharts.png 612w, \/blog\/wp-content\/uploads\/2017\/09\/charts-using-ionic-2-mobile-framework-fusioncharts-150x118.png 150w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/a><\/p>\n<p>If you see any errors in your code, you can download the <a href=\"https:\/\/www.dropbox.com\/s\/rii4k2fhh9w3hgv\/FC-column2d%20%28ionic%20app%29.zip?dl=0\">complete source code<\/a> of the sample project we have created for this tutorial.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With the number of smartphone users globally pegged at 2.3 billion, there is a distinctive shift in the consumption of digital media. While users have been consuming online content from desktops, of late trends show a rise in consumption through smartphones. This has resulted in a massive number of apps. However, the hurdle with this [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16345,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675,648],"class_list":["post-16338","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>Create Charts in Ionic 2 Using Angular &amp; FusionCharts<\/title>\n<meta name=\"description\" content=\"Build interactive hybrid app charts in Ionic 2 using Angular2-FusionCharts. Step-by-step tutorial with Column2D charts, Cordova setup &amp; npm integration.\" \/>\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-in-ionic-2-with-fusioncharts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Charts in Ionic 2 Using Angular &amp; FusionCharts\" \/>\n<meta property=\"og:description\" content=\"Build interactive hybrid app charts in Ionic 2 using Angular2-FusionCharts. Step-by-step tutorial with Column2D charts, Cordova setup &amp; npm integration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-28T10:32:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-03T11:13:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/ionic-1024x381.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"381\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jonathan, Ayan Bhadury\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan, Ayan Bhadury\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/\"\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 Charts in Your Mobile Application Using Ionic 2 2026\",\n\t            \"datePublished\": \"2017-09-28T10:32:45+00:00\",\n\t            \"dateModified\": \"2026-06-03T11:13:39+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/\"\n\t            },\n\t            \"wordCount\": 587,\n\t            \"commentCount\": 4,\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-in-ionic-2-with-fusioncharts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/ionic.png\",\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-in-ionic-2-with-fusioncharts\/#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-in-ionic-2-with-fusioncharts\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/\",\n\t            \"name\": \"Create Charts in Ionic 2 Using Angular & FusionCharts\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/ionic.png\",\n\t            \"datePublished\": \"2017-09-28T10:32:45+00:00\",\n\t            \"dateModified\": \"2026-06-03T11:13:39+00:00\",\n\t            \"description\": \"Build interactive hybrid app charts in Ionic 2 using Angular2-FusionCharts. Step-by-step tutorial with Column2D charts, Cordova setup & npm integration.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-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\/create-charts-in-ionic-2-with-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\/create-charts-in-ionic-2-with-fusioncharts\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/09\/ionic.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/ionic.png\",\n\t            \"width\": 2016,\n\t            \"height\": 750,\n\t            \"caption\": \"create charts with ionic 2\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-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\": \"How to Create Charts in Your Mobile Application Using Ionic 2 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":"Create Charts in Ionic 2 Using Angular & FusionCharts","description":"Build interactive hybrid app charts in Ionic 2 using Angular2-FusionCharts. Step-by-step tutorial with Column2D charts, Cordova setup & npm integration.","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-in-ionic-2-with-fusioncharts\/","og_locale":"en_US","og_type":"article","og_title":"Create Charts in Ionic 2 Using Angular & FusionCharts","og_description":"Build interactive hybrid app charts in Ionic 2 using Angular2-FusionCharts. Step-by-step tutorial with Column2D charts, Cordova setup & npm integration.","og_url":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-09-28T10:32:45+00:00","article_modified_time":"2026-06-03T11:13:39+00:00","og_image":[{"width":1024,"height":381,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/ionic-1024x381.png","type":"image\/png"}],"author":"Jonathan, Ayan Bhadury","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan, Ayan Bhadury","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"How to Create Charts in Your Mobile Application Using Ionic 2 2026","datePublished":"2017-09-28T10:32:45+00:00","dateModified":"2026-06-03T11:13:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/"},"wordCount":587,"commentCount":4,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/09\/ionic.png","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/","url":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/","name":"Create Charts in Ionic 2 Using Angular & FusionCharts","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/09\/ionic.png","datePublished":"2017-09-28T10:32:45+00:00","dateModified":"2026-06-03T11:13:39+00:00","description":"Build interactive hybrid app charts in Ionic 2 using Angular2-FusionCharts. Step-by-step tutorial with Column2D charts, Cordova setup & npm integration.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/09\/ionic.png","contentUrl":"\/blog\/wp-content\/uploads\/2017\/09\/ionic.png","width":2016,"height":750,"caption":"create charts with ionic 2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2-with-fusioncharts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Charts in Your Mobile Application Using Ionic 2 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\/16338","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=16338"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16345"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16338"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}