{"id":12501,"date":"2017-04-28T16:10:37","date_gmt":"2017-04-28T16:10:37","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=12501"},"modified":"2026-01-12T09:27:38","modified_gmt":"2026-01-12T09:27:38","slug":"create-charts-highcharts-ios","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/create-charts-highcharts-ios\/","title":{"rendered":"Create mobile charts with Highcharts iOS"},"content":{"rendered":"

 <\/p>\n

 
\nIf you are looking for an iOS charting tool that offers a friendly API, short learning curve, and a large number of chart types, read on.\u00a0Highcharts iOS is designed specifically to simplify the process of creating, crisp, interactive charts in native iOS apps.<\/p>\n

Here are the simple steps involved in setting up a project with Highcharts iOS. (Read complete API docs here<\/a>)<\/p>\n

1. Preparing your project<\/h2>\n

First of all, you have to download the iOS Highcharts framework. To do that, choose one of the three options below:<\/p>\n

    \n
  1. A direct download from Github<\/a>.<\/li>\n
  2. Use Cocoapods by adding pod 'Highcharts'<\/code> to your PodFile.<\/li>\n
  3. Use Carthage by adding github \"https:\/\/github.com\/highcharts\/highcharts-ios\" >= 1.0.2<\/code> to your Cartfile<\/li>\n<\/ol>\n

    Then, include the framework to your project by copying it under the folder Frameworks<\/b>, if it doesn\u2019t exist just create one. Remember to check “Copy items if needed<\/strong>” option, then click on finish (see pictures below):<\/p>\n

    \"\"<\/p>\n

    \"\"
    \nThe last task of this section is to go to your project settings and add Highcharts to Embedded Binaries<\/strong>:<\/p>\n

    \"\"
    \nYou are now set to use iOS Highcharts framework!<\/p>\n

    2. Using Highcharts (demo app)<\/h2>\n

    To be able to use the app demo, you have to import Highcharts at the top in your AppDelegate<\/strong>. Open the file\u00a0AppDelegate.m<\/strong> and copy\/paste this line #import <Highcharts\/Highcharts.h><\/code>.<\/p>\n

    To preset the chartView and set some initial options, you have to insert the following line to your application:didFinishLaunchingWithOptions
    \n[HIGChartView preload];<\/code><\/p>\n

    Then include Highcharts.h<\/strong> to the View Controller. Open your ViewController.m file and write #import <Highcharts\/Highcharts.h><\/code>.<\/p>\n

    If you would like to have easy access to the chart, set the property in the ViewController<\/strong> as following:<\/p>\n

    @interface ViewController ()\r\n@property (strong, nonatomic) HIGChartView *chartView; \r\n@end\t\r\n<\/pre>\n
    Now, the project is set to create your first chart.<\/p>\n
    3. Create a chart<\/h2>\n
    Column charts are very popular and versatile charting type, for this simple reason, our demo chart will be a column chart.
    \nTo create the chartView<\/strong> with defined origin and size, add the following line in viewDidLoad<\/strong>:<\/p>\n
    self.chartView = [[HIGChartView alloc] initWithFrame:CGRectMake(self.view.bounds.origin.x, self.view.bounds.origin .y + 20, self.view.bounds.size.width, 300.0f)];\r\n<\/pre>\n
    The main important piece of the chart is HIOptions<\/strong> class, as it contains all the information needed to render a chart. Actually, only the data is required to create a basic chart, but for the sake of this article let\u2019s see how you can implement more useful information.
    \nBefore you implement any feature to your chart, you need to create an instance of HIOptions<\/strong> class HIOptions *options = [[HIOptions alloc]init];<\/code><\/p>\n
    It is a good habit to specify chart\u2019s type. To do so, create HIChart class object and set its type to \u201ccolumn\u201d<\/p>\n
    HIChart *chart = [[HIChart alloc]init]; \r\nchart.type = @\"column\";\t\r\noptions.chart = chart;\r\n<\/pre>\n
    It is always wise to set a title to a chart, as it adds more clarity to the users about the purpose of the chart:<\/p>\n
    HITitle *title = [[HITitle alloc]init]; \r\ntitle.text = @\"Demo chart\";\t\t\t\t\t\t\t\t\r\noptions.title = title;\r\n<\/pre>\n
    Now, it is time to introduce the data. Keep in mind that because the chart is a column type chart, you need to use HIColumn<\/strong> data series prior starting writing the data:<\/p>\n
    HIColumn *series = [[HIColumn alloc]init];\r\nseries.data = @[@49.9, @71.5, @106.4, @129.2, @144, @176, @135.6, @148.5, @216.4, @194.1, @95.6, @54.4];\r\n<\/pre>\n
    The Options<\/strong> feature is designed to store multiple series. In this demo, you need only one series defined as one-element-array options.series = @[series];<\/code><\/p>\n
    Don\u2019t forget to link the options feature to the chartView self.chartView.options = options;<\/code>
    \nThen, add chartView<\/strong> as subview<\/strong> to your View Controller\u2019s view [self.view addSubview:self.chartView];<\/code>
    \nThat\u2019s it! You are now set to run the demo :).<\/p>\n
    Your View Controller .m<\/strong> file should look like this code:<\/p>\n
    #import \"ViewController.h\"\r\n#import <Highcharts\/Highcharts.h>\r\n\r\n@interface ViewController ()\r\n@property (strong, nonatomic) HIGChartView *chartView;\r\n@end\r\n\r\n@implementation ViewController\r\n\r\n- (void)viewDidLoad {\r\n    [super viewDidLoad];\r\n    \/\/ Do any additional setup after loading the view, typically from a nib.\r\n    self.chartView = [[HIGChartView alloc] initWithFrame:CGRectMake(self.view.bounds.origin.x, self.view.bounds.origin.y + 20, self.view.bounds.size.width, 300.0f)];\r\n    \r\n    HIOptions *options = [[HIOptions alloc]init];\r\n    \r\n    HIChart *chart = [[HIChart alloc]init];\r\n    chart.type = @\"column\";\r\n    options.chart = chart;\r\n    \r\n    HITitle *title = [[HITitle alloc]init];\r\n    title.text = @\"Demo chart\";\r\n    options.title = title;\r\n    \r\n    HIColumn *series = [[HIColumn alloc]init];\r\n    series.data = @[@49.9, @71.5, @106.4, @129.2, @144, @176, @135.6, @148.5, @216.4, @194.1, @95.6, @54.4];\r\n    options.series = @[series];\r\n    self.chartView.options = options;\r\n    \r\n    [self.view addSubview:self.chartView];\r\n}\r\n- (void)didReceiveMemoryWarning {\r\n    [super didReceiveMemoryWarning];\r\n    \/\/ Dispose of any resources that can be recreated.\r\n}\r\n@end\r\n<\/pre>\n
    Press \u201cRun\u201d in XCode, and Voila! You have your chart with just a few steps.<\/p>\n
    \"\"
    \nFeel free to add more features and personalize your chart using colors, labels, etc.<\/p>\n
    The best way to really grasp the capabilities that iOS Highcharts offers you is by creating charts and be creative. To explore more advanced features take a look at demo app HighFit<\/a> provided by Highcharts or read the following documentation<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Learn how to create interactive mobile native app charts with Highcharts iOS.<\/p>\n","protected":false},"author":32,"featured_media":13175,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[1094,1031],"coauthors":[699],"class_list":["post-12501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/12501","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\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=12501"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/12501\/revisions"}],"predecessor-version":[{"id":29096,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/12501\/revisions\/29096"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/13175"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=12501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=12501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=12501"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=12501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}