Swiftpack.co - highcharts/highcharts-ios as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by highcharts.
highcharts/highcharts-ios v11.1.0
iOS wrapper for Highcharts.
⭐️ 125
🕓 15 weeks ago
.package(url: "https://github.com/highcharts/highcharts-ios.git", from: "v11.1.0")


Carthage compatible

Highcharts iOS is a delightful wrapper of HighchartsJS for iOS.

The most popular, robust and battle-tested JavaScript Charting library is now available for iOS with our new Objective-C wrapper. Get gorgeous, multi-touch charts with minimal effort.


Access the full API documentation here.


Here we present how to create basic chart and place it in your project.

What we need to do

  • Prepare your project for Highcharts
  • Create chart view and place it in your view
  • Create chart options and add them to your chart view
  • Run your app and enjoy!

Preparing your project

  • First of all download Highcharts xcframework from here: Highcharts or by using Cocoapods by adding

    pod 'Highcharts', '~> 11.1.0'

    to your Podfile

    or Swift Package Manager by adding package dependency


    or Carthage by adding

    github "https://github.com/highcharts/highcharts-ios" >= 11.1.0

    to your Cartfile.

  • Now add Highcharts to your project by simply copying it to your project to folder Frameworks (create it if necessary) and remeber to check "Copy items if needed" option

alt text

  • Click on finish

alt text

  • Then go to your project settings and add Highcharts to Frameworks, Libraries, and Embedded Content with "Embed & Sign" option

alt text

  • If your project is leveraging Xcode UI testing, make sure you add the Highcharts framework to Embedded Binaries for the UITests target as well as the main project target

You are now set to use Highcharts!

Using Highcharts (UIKit demo app)

Set AppDelegate

In your AppDelegate.swift import Highcharts at the top

import Highcharts

Add this line to your application:didFinishLaunchingWithOptions method:


Add HIChartView to your View Controller

In your View Controller.swift file add

import Highcharts


var chartView: HIChartView!

Creating chart

Let's start with creating simple chart!

For the purpose of this tutorial, we will create a simple column chart using random data.

In viewDidLoad add following lines

chartView = HIChartView(frame: CGRect(x: view.bounds.origin.x, y: view.bounds.origin.y  +  20, width: view.bounds.size.width, height: 300))

This will create our chartView with defined origin and size.

Done! Now let's create a chart.

The heart of a chart is HIOptions class which contains all the information needed to present it. Some of the options there are optional, some are not (see demo app HighFit provided by Highcharts).

Create instance of HIOptions class

let options = HIOptions()

Now we need to add the options that our chart requires to be presented. Let's start with chart type. To do so, create HIChart class object and set its type to "column"

let chart = HIChart()
chart.type = "column"

Add this object to your options

options.chart = chart

Then let's give our chart a name (title) and also add it to options

let title = HITitle()
title.text = "Demo chart"
options.title = title

Now we need to add some data (in this tutorial it will be some random set of numbers). Since we are creating a column chart, we need to use HIColumn data series

let series = HIColumn()

To add data, just create array of our data objects

series.data = [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

Since options can store multiple series, we need to add our series as one-element-array

options.series = [series]

And at last add our options to the chartView

chartView.options = options

Don't forget to add chartView as subview to your View Controller's view! At the end add


That's it! We are now set to run our application! Your View Controller.swift file should look like this

import Highcharts
import UIKit

class ViewController: UIViewController {

  var chartView: HIChartView!

  override func viewDidLoad() {
    // Do any additional setup after loading the view.

    chartView = HIChartView(frame: CGRect(x: view.bounds.origin.x,
                                          y: view.bounds.origin.y + 20,
                                          width: view.bounds.size.width,
                                          height: 300))

    let options = HIOptions()

    let chart = HIChart()
    chart.type = "column"
    options.chart = chart

    let title = HITitle()
    title.text = "Demo chart"
    options.title = title

    let series = HIColumn()
    series.data = [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    options.series = [series]

    chartView.options = options



Using Highcharts (SwiftUI demo app)

Setting up preload

In your App.swift import Highcharts at the top

import Highcharts

Add the following line to your init() or application:didFinishLaunchingWithOptions method:


Creating a simple SwiftUI wrapper for HIChartView

It takes a few steps:

  • Create a struct conforming UIViewRepresentable;
  • Define a property that stores a HIOptions configuration of the chart;
  • Implement makeUIView() that will create our chart view;
  • Implement updateUIView() that will update our chart view

In your code it could looks like this:

struct ChartView: UIViewRepresentable {

  var options: HIOptions

  func makeUIView(context: Context) -> HIChartView {
    let chart = HIChartView()
    chart.options = options
    return chart

  func updateUIView(_ uiView: HIChartView, context: Context) {
    uiView.options = options


That’s all! We can use now the ChartView component in SwiftUI:

import Highcharts
import SwiftUI

struct ContentView: View {

  private var chartOptions: HIOptions {
    let options = HIOptions()
    let chart = HIChart()
    chart.type = "column"
    options.chart = chart
    let title = HITitle()
    title.text = "Demo chart in SwiftUI"
    options.title = title
    let series = HIColumn()
    series.data = [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    options.series = [series]
    return options

  var body: some View {
    ChartView(options: chartOptions)


Full SwiftUI demo project you can find here: HCSwiftUIDemo.

Press "Run" in XCode.

For more complex solutions see demo app HighFit provided by Highcharts or read the following documentation!

Additional info

Additional modules

In case of enabling additional module, add it to plugins of HIChartView object before assign your chart options, e.g.

chartView.plugins = ["annotations"]
chartView.options = options

HIColor example

Highcharts iOS wrapper provides its own colors implementation. As you can notice, some options are of HIColor type. You can instantiate the desired color in few ways which are described in the API documentation. In here, we will show the most complex case which is gradient usage. For example, you can instantiate a color for chart background:

chart.backgroundColor = HIColor(linearGradient: ["x1": 0, "x2": 0, "y1": 0, "y2": 300],
                                stops: [
                                  [0, "rgb(102, 153, 161)"],
                                  [1, "rgb(128, 135, 232)"]

HIFunction example

Thanks to Highcharts iOS wrapper you can now assign native iOS closures to events for specific chart elements. We will show you a small taste of such usage. For these purpose we will let appear a simple alert with point coordinates when it's clicked but keep in mind that you can achieve much more with HIFunction mechanism!

First of all, you need to create a plotOptions object for your series type:

let plotOptions = HIPlotOptions()
plotOptions.series = HISeries()

Now, you can refer to the point event and add on click function like this:

plotOptions.series.point = HIPoint()
plotOptions.series.point.events = HIEvents()
let clickFunction = HIFunction(closure: { [weak self] context in
  guard let self = self, let context = context else { return }

  let category = context.getProperty("this.category") ?? "",
      value = context.getProperty("this.y") ?? ""

  let alertMessage = "Category: \(category), value: \(value)"

  let alertController = UIAlertController(title: nil,
                                          message: alertMessage,
                                          preferredStyle: .alert)

  let okAction = UIAlertAction(title: "OK", style: .default, handler: nil)

  self.present(alertController, animated: true, completion: nil)
}, properties: ["this.category", "this.y"])

plotOptions.series.point.events.click = clickFunction

options.plotOptions = plotOptions

As you can see in the above code snippet first argument of the HIFunction is the actual closure. Second argument is simple string array of chart elements. We need to put them here to let wrapper pull them for us during HIFunction instantiation. Thanks to this, we can refer to these elements corresponding values by getProperty: method. You can pull any data from chart like this. Depending on the current needs you can just run some code, withdraw data from chart, return a String to the chart (e.g. in HITooltip formatter) and even put pure Javascript function in the constructor in the String format. For more information feel free to check the API documentation.

Custom fonts

Highcharts iOS wrapper allows you to add custom fonts. If you have your own font and want to use that in your chart, follow next steps:

  • Add a font file to your project. Select File -> Add Files to “Your Project Name” from the menu bar or drag and drop the file into your Xcode project, check Copy items if needed option and add the font to your app target.

alt text

alt text

  • Add your font to HIChartView. To do this, firstly, you need to get an absolute path pointing to the location of the font and then call addFont: method:
let fontPath = Bundle.main.path(forResource: "Windsong", ofType: "ttf")

So, now you can use a custom font in your chart. For example, let's change the chart title font. You only need to create a style object for the title and set its font family to the font file name:

title.style = HICSSObject()
title.style.fontFamily = "Windsong"


Stars: 125
Last commit: 15 weeks ago
jonrohan Something's broken? Yell at me @ptrpavlik. Praise and feedback (and money) is also welcome.

Release Notes

15 weeks ago

Version 11.1.0


  1. Added support for mouse wheel zooming through chart.zooming.mouseWheel. This feature is embedded in the Highcharts Stock bundle, but requires an additional module file for the Highcharts bundle.
  2. Added the heatmap.interpolation option for creating smooth heatmaps.
  3. Added new function, Chart.getOptions(), to get the current active configuration options for the chart.
  4. Added the treegraph.fillSpace option for treegraphs to fill the whole plot area even when some points are collaped.
  5. Added borderRadius option support for funnel and pyramid series. See #18839.
  6. Added new option, xAxis.crossing and yAxis.crossing, making it easier to create axis layout for mathematical plots.
  7. Added new option, series.legendSymbol. See #18753.
  8. Design facelift with clearer, more vivid palette, added contrast for text labels and many minor visual changes.
  9. Added new series type, treegraph. Read more in the docs.
  10. Added new series type, pictorial.
  11. Removed support for IE 8 and older.
  12. Changed the default builds to ECMAScript version ES2016.
  13. Replaced SASS files for styledMode with updated CSS files. Highcharts theming is now easier by supporting CSS variables as well as prefers-color-scheme. See style by CSS.
  14. Sonification module v2 with many new features for audio charts, now part of the official API.
  15. Changed default rotationMode to circular for sunburst data labels.
  16. Added minorTicksPerMajor option for axes, see #13338.
  17. Added the point.percentage property for gauge charts, see #18433.
  18. Added ResizeObserver to the chart so it could adjust reflow on container size change, closes #17924.

Framework upgrade notes:

  1. To revert to the old design, use the theme defined in the v10 theme sample.
  2. Font sizes of the chart are now using rem by default. This may cause too small or too big fonts if your web page is using non-default root element font size. To avoid that, set chart.style.fontSize to 16px or any other values you see fit.
  3. The top-level labels option has been deprecated for a long time and is now removed. Use Annotations instead.
  4. Time-related settings on the global options structure are removed. Use the time options instead.
  5. The new version of the sonification module is not backwards compatible with the old, experimental module.
  6. The default builds were changed to ECMAScript version ES2016. See the system requirements on how to support IE11 and other legacy browsers.
  7. If you're using chart.styledMode, and your end users have prefers-color-scheme set to dark in their browsers, they may now be presented with dark-themed charts. The exception is if your CSS overrides the default coloring.
  8. Changed default rotationMode to circular for sunburst data labels.

Framework bug fixes:

  1. Fixed #18869, redundant chart redraws on changing title, subtitle or caption font size, or top level chart font size.
  2. Fixed #19017, failure in parsing negative numbers with spaces in the data module.
  3. Fixed #19053, a regression since 10.3 causing item series update not to work correctly.
  4. Fixed #19051, axis crossing was not always correct.
  5. Fixed #18985, updating enableMouseTracking from true to false didn't work.
  6. Fixed #17589, update of multiple data labels didn't work in specific conditions.
  7. Fixed #17791, pointRange wasn't calculated for multiple series with single points.
  8. Fixed #19028, border radius was wrongly applied for negative column points when the zoneAxis option was x.
  9. Fixed #12063, packed bubble parent nodes had a bad position after width update.
  10. Fixed #18891, invisible data labels in treegraph series reacted to hover.
  11. Fixed #18960, a regression in v11, wrong placement for data labels in dumbbell series.
  12. Fixed #18110, yAxis.maxPadding was ignored when yAxis.softMin was set.
  13. Fixed #18956, a regression causing small sankey nodes rendering as circles.
  14. Fixed #18876, updating the tooltip didn't work when wasn't declared in the chart configuration.
  15. Fixed #18884, sunburst circular labels did not work when the difference in value was small.
  16. Fixed #18928, a regression in v11 causing the tooltip to not display in subsequent charts when the first chart in the web page was hidden.
  17. Fixed #18821, hidden overlapped data labels with useHTML on were still active for the mouseover event.
  18. Fixed sonification issue where resuming after pause ignored the original onEnd argument.
  19. Fixed too low contrast for credits in High Contrast theme.
  20. Fixed #14602, arearange series.label.onArea was not implemented.
  21. Fixed #18856, the last point wasn't displayed while hovering in the boost module.
  22. Fixed #18790, custom symbols were incorrectly positioned in some cases.
  23. Fixed #18103, Y zoom while panning on top of the plot when chart inverted was not working.
  24. Fixed #18066, after updating the series data to one point with category xAxis there were unwanted labels.
  25. Fixed #17720, the tooltip with enabled outside and split properties was badly positioned for some series.
  26. Fixed #18693, tooltip.stickOnContact threw errors on hover between one series with followPointer set to true and the second series followPointer set to false.
  27. Fixed #18741, incorrect guide box behaviour while dragging stacked bars.
  28. Fixed #14080, bubble legend didn't work correctly if the legendItemClick event for one series was prevented.
  29. Fixed #18635, bad tooltip position in an inverted chart inside a scrollable container when tooltip.outside was true.
  30. Fixed #17614, timeline styled mode default colors.
  31. Fixed #18617, stack labels in inverted charts were mispositioned in the y axis.
  32. Fixed #18636, waterfall lines missing when there was a null point.
  33. Fixed #17168, the Sunburst series didn’t work properly when the chart was inverted.
  34. Fixed #17257, item chart points color wasn't updating.
  35. Fixed #17280, bubbles with z: 0 caused points to disappear.
  36. Fixed #16516, legend symbol height didn't accept 0 as a value.
  37. Fixed #18501, vertical alignment of stack labels didn't work with logarithmic axes.
  38. Fixed #18502, pointPadding for heatmap series wasn't working with reversed axes.
  39. Fixed #18444, a polar chart with type "bar" and data labels caused JavaScript error.
  40. Fixed #17912, column range points were not aligned with column points.
  41. Fixed #18443, the className property in guideBox didn't work for drag & drop.
  42. Fixed #10005, wrong series name and legend item by using data.seriesMapping property.
  43. Fixed #18422, stacked polar column chart with zero value rendered a wedge across the whole y axis.
  44. Fixed #16675, adding annotation from a custom button was not possible if the button had a custom SVG symbol.
  45. Fixed #18305, updating series marker size was not working if the initial size was not set.

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics