{"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-01-20T14:36:24","modified_gmt":"2026-01-20T09:06:24","slug":"create-charts-in-ionic-2","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/","title":{"rendered":"How to Create Charts in Your Mobile Application Using Ionic 2 2026"},"content":{"rendered":"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.\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-in-ionic-2\/#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\/#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\/#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\/#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\/#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\/#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\/#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\/#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>\r\nA 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.\r\n\r\nWhile 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.\r\n\r\nToday 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.\r\n<h2><span class=\"ez-toc-section\" id=\"Requirements\"><\/span>Requirements<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo create a chart in a mobile app developed using Ionic 2, you will need the following components downloaded and installed:\r\n<ul>\r\n \t<li style=\"list-style-type: none\">\r\n<ul>Ionic framework &#8211;<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<a href=\"https:\/\/ionicframework.com\/docs\/intro\/installation\/\">Download Link<\/a>\r\n<ul>\r\n \t<li style=\"list-style-type: none\">\r\n<ul>FusionCharts Library &#8211;<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<a href=\"https:\/\/www.fusioncharts.com\/download\/\">Download Link<\/a>\r\n<ul>\r\n \t<li style=\"list-style-type: none\">\r\n<ul>Angular-FusionCharts Directive &#8211;<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<a href=\"https:\/\/www.fusioncharts.com\/angularjs-charts\/#\/demos\/ex1\">Download Link<\/a>\r\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>\r\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>\r\nTo get started, we need to create an app in the Ionic 2 framework.\r\n<ol>\r\n \t<li>Run the following command from the shell interface.\r\n<code>ionic start myapp<\/code>\r\nThis will automatically create all the dependencies required to create the app.<\/li>\r\n<\/ol>\r\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>\r\nNext, we need to integrate the FusionCharts library in the Ionic 2 framework.\r\n<ol>\r\n \t<li>Install the FusionCharts-Angular extension in the <code>project node_modules<\/code> using the following command.\r\n<code>npm\u00a0install angular2\u00a0-fusioncharts --save<\/code><\/li>\r\n \t<li>Import the files into the <code>app.module.ts<\/code> file. [Path: src \u2192 app \u2192 app.module.ts]<\/li>\r\n<\/ol>\r\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>\r\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>\r\nNow 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]\r\n<ol>\r\n \t<li>Update the data source for rendering the chart in the <code>home.ts<\/code> file.<\/li>\r\n<\/ol>\r\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>\r\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>\r\nNow that the data is added, we need to create the FusionCharts directive that will create the chart element.\r\n<ol>\r\n \t<li>Add the following code to the <code>home.html<\/code> file. [Path: src \u2192 home \u2192 home.html]<\/li>\r\n<\/ol>\r\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>\r\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>\r\nNow that we have our code in place, let us run the code to see the output.\r\n<ol>\r\n \t<li>Run the following command from the shell interface.\r\n<code>ionic serve<\/code><\/li>\r\n<\/ol>\r\nIf you\u2019ve followed the steps closely, your output should like the chart shown in the image below:\r\n\r\n<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>\r\n\r\nIf 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.","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>How to create charts in your mobile application using Ionic 2<\/title>\n<meta name=\"description\" content=\"Boost your 2026 skills with these data viz tips. Learn to pick the right charts and use visuals effectively for your audience. Communicate data perfectly.\" \/>\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\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create charts in your mobile application using Ionic 2\" \/>\n<meta property=\"og:description\" content=\"Boost your 2026 skills with these data viz tips. Learn to pick the right charts and use visuals effectively for your audience. Communicate data perfectly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/\" \/>\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-01-20T09:06:24+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\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/\"\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-01-20T09:06:24+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/\"\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\/#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\/#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\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/\",\n\t            \"name\": \"How to create charts in your mobile application using Ionic 2\",\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\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/#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-01-20T09:06:24+00:00\",\n\t            \"description\": \"Boost your 2026 skills with these data viz tips. Learn to pick the right charts and use visuals effectively for your audience. Communicate data perfectly.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/#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\/\"\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\/#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\/#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":"How to create charts in your mobile application using Ionic 2","description":"Boost your 2026 skills with these data viz tips. Learn to pick the right charts and use visuals effectively for your audience. Communicate data perfectly.","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\/","og_locale":"en_US","og_type":"article","og_title":"How to create charts in your mobile application using Ionic 2","og_description":"Boost your 2026 skills with these data viz tips. Learn to pick the right charts and use visuals effectively for your audience. Communicate data perfectly.","og_url":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-09-28T10:32:45+00:00","article_modified_time":"2026-01-20T09:06:24+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\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/"},"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-01-20T09:06:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/"},"wordCount":587,"commentCount":4,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/#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\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/","url":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/","name":"How to create charts in your mobile application using Ionic 2","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/09\/ionic.png","datePublished":"2017-09-28T10:32:45+00:00","dateModified":"2026-01-20T09:06:24+00:00","description":"Boost your 2026 skills with these data viz tips. Learn to pick the right charts and use visuals effectively for your audience. Communicate data perfectly.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/create-charts-in-ionic-2\/#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\/#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}]}}