{"id":12948,"date":"2017-07-17T14:35:14","date_gmt":"2017-07-17T14:35:14","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=12948"},"modified":"2026-01-12T09:35:27","modified_gmt":"2026-01-12T09:35:27","slug":"setting-chart-ionic-app-using-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/setting-chart-ionic-app-using-highcharts\/","title":{"rendered":"Setting up a chart in an Ionic App using Highcharts"},"content":{"rendered":"

 <\/p>\n

For native iOS apps, check out the new Highcharts iOS wrapper<\/a><\/i><\/b>.<\/p>\n

Ionic has grown spectacularly in the last two years; from using AngularJS initially to Angular 4 and now TypeScript in Ionic Framework (version 3)<\/a>. I am a big fan of Ionic.<\/p>\n

My other favorite JavaScript library is Highcharts (no surprise there). Like most Highcharts fans, I love how easy it is to create responsive and interactive charts. That is why I decided to set up a project to combine my two favorite libraries. Will it blend? Let\u2019s give it a shot!<\/p>\n

First thing first: install Ionic by typing the following commands in the command prompt or terminal. Actually, the first thing is to install the latest version of NodeJs, if you haven\u2019t done so already. Download NodeJS from nodejs.org.
\nnpm install ionic -g
\nnpm install cordova -g<\/code><\/p>\n

Install also Cordova as Ionic Apps require Cordova. (Ok, this is technically the second first thing to do\u2026)
\nCordova wraps your HTML, SCSS, and TS based Web App into a Native Android or iOS App, which is often a good option.
\nFinally, let\u2019s create our first Ionic App:
\nionic start blank<\/code><\/code>
\nReplace with the name of your choice to create an app. For this article, I use the name HighChartsIonic. \u201cblank\u201d is a template name to create a blank Ionic App with minimal pre-written code.
\nionic start HighChartsIonic<\/code><\/p>\n

Once this command finishes its execution, a new folder with the name HighChartsIonic is created. Open that folder in the text editor of your choice; I use VS Code as a text editor, as it allows me to run the app in the browser. (You may naturally use any other IDE of your choice). Open the terminal from the view menu or press Ctrl + ` (backtick) and write the following command:
\nionic serve <\/code><\/p>\n

This command builds and launches the app in the browser. To get a more mobile-like view in the browser use \u2013l flag to launch the app in the lab mode.
\nionic serve \u2013l <\/code><\/p>\n

At this point of the project you should see something like this in the browser:<\/p>\n

\"\"<\/p>\n

This is a preview of how the application will look like on a real mobile device. Let\u2019s bring in Highcharts and create a chart on this page. Get back to VS Code, and in the terminal press Ctrl + C to stop the Ionic Development Server. Type in the following commands to install Highcharts.
\nnpm install highcharts \u2013save<\/code><\/p>\n

The result will look like:<\/p>\n

\"\"<\/p>\n

The message on the screen is information that Highcharts module has been installed successfully (notice the text<\/code> in this color).
\nOpen the file .\/src\/pages\/home\/home.html<\/code> and replace everything inside the ion-content tag with a div like this.<\/p>\n

<div id=\"container\" style=\"display: block;\"\t><\/div><\/pre>\n
This div is a container to hold the chart. I write the code in home.ts<\/code> file. The home.html<\/code> and home.ts<\/code> are the files in charge of creating the home page in the app.
\nIn home.ts, on the top, import the highcharts<\/code> module first.<\/p>\n
import * as HighCharts from 'highcharts';<\/pre>\n
Next, create a function called ionViewDidLoad()<\/code> inside the HomePage<\/code> class, just after the constructor. The file should look like this:<\/p>\n
import {\r\n  Component\r\n} from '@angular\/core';\r\nimport {\r\n  NavController\r\n} from 'ionic-angular';\r\nimport * as HighCharts from 'highcharts';\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  constructor(public navCtrl: NavController) {}\r\n\r\n  ionViewDidLoad() {}\r\n}\r\n<\/pre>\n
The ionViewDidLoad<\/code> is a special function which is executed after the View has been initialized and loaded; this makes sure to avoid any errors during the components\u2019 access in the view. Create a new HighCharts.chart<\/code> object in the ionViewDidLoad<\/code>:<\/p>\n
var myChart = HighCharts.chart('container', {\r\n  chart: {\r\n    type: 'bar'\r\n  },\r\n  title: {\r\n    text: 'Fruit Consumption'\r\n  },\r\n  xAxis: {\r\n    categories: ['Apples', 'Bananas', 'Oranges']\r\n  },\r\n  yAxis: {\r\n    title: {\r\n      text: 'Fruit eaten'\r\n    }\r\n  },\r\n  series: [{\r\n    name: 'Jane',\r\n    data: [1, 0, 4]\r\n  }, {\r\n    name: 'John',\r\n    data: [5, 7, 3]\r\n  }]\r\n});<\/pre>\n
 <\/p>\n
Save the file, and in the terminal type ionic serve \u2013l to run the app in the browser in the lab mode. The app should look like this:<\/p>\n
\"\"<\/p>\n
The charts are now visible on the homepage of the Ionic 3 App. Let\u2019s play around with the chart object a little bit and see how it modifies the charts in the app.
\nChange the chart.type<\/code> property in the JSON object to a line<\/code> and save the file. The browser will reload the app in a few seconds as soon as the file is saved. The result should look like:<\/p>\n
\"\"<\/p>\n
Awesome, isn\u2019t it? Let\u2019s try one more thing. Change the chart\u2019s type to spline<\/code> and save again. Let the magic happens.<\/p>\n
I can also generate the graph series data using a function. For now, I use a for-loop to generate random dummy data, but in a real app, the data could come from an API, web service, or after calculations.
\nReplace the existing data<\/code> objects of both the series with the data object:<\/p>\n
data: (function() {\r\n  var data = [];\r\n\r\n  for (let i = 0; i & lt; = 5; i += 1) {\r\n    data.push({\r\n      x: i,\r\n      y: Math.floor(Math.random() * 10) + 0\r\n    });\r\n  }\r\n  return data;\r\n}())\r\n<\/pre>\n
This
\nfunction generates an array of five random integer elements between 0 and 10. The < code > ionViewDidLoad < \/code> should now look like this: <\/p>\n
data: (function() {\r\n  var data = [];\r\n\r\n  for (let i = 0; i & lt; = 5; i += 1) {\r\n    data.push({\r\n      x: i,\r\n      y: Math.floor(Math.random() * 10) + 0\r\n    });\r\n  }\r\n  return data;\r\n}())\r\nionViewDidLoad() {\r\n  var myChart = HighCharts.chart('container', {\r\n    chart: {\r\n      type: 'spline'\r\n    },\r\n    title: {\r\n      text: 'Fruit Consumption'\r\n    },\r\n    xAxis: {\r\n      categories: ['Apples', 'Bananas', 'Oranges']\r\n    },\r\n    yAxis: {\r\n      title: {\r\n        text: 'Fruit eaten'\r\n      }\r\n    },\r\n    series: [{\r\n      name: 'Jane',\r\n      data: (function() {\r\n        var data = [];\r\n        for (let i = 0; i & lt; = 5; i += 1) {\r\n          data.push({\r\n            x: i,\r\n            y: Math.floor(Math.random() * 10) + 0\r\n          });\r\n        }\r\n        return data;\r\n      }())\r\n    }, {\r\n      name: 'John',\r\n      data: (function() {\r\n        var data = [];\r\n        for (let i = 0; i & lt; = 5; i += 1) {\r\n          data.push({\r\n            x: i,\r\n            y: Math.floor(Math.random() * 10) + 0\r\n          });\r\n        }\r\n        return data;\r\n      }())\r\n    }]\r\n  });\r\n}\r\n<\/pre>\n
 <\/p>\n
Save the file and let the app reload in the browser. You will get random graphs like the ones shown below:<\/p>\n
\"\"<\/p>\n
Feel free to play with the code and try out new properties and functions. Check out the Official Highcharts Docs<\/a> to learn more about Highcharts.
\nI enjoyed this project, and I hope it will help you to set up great charts. I would love to hear your comments and experiences.<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to build wonderful charts for your mobile apps using Highcharts and IONIC framework.<\/p>\n","protected":false},"author":214,"featured_media":13173,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[1094],"coauthors":[697],"class_list":["post-12948","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/12948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/214"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=12948"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/12948\/revisions"}],"predecessor-version":[{"id":29098,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/12948\/revisions\/29098"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/13173"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=12948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=12948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=12948"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=12948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}