Skip to end of metadata
Go to start of metadata

UIChartView is a highly sophisticated, enterprise-class charting library engineered with a blend of great architecture and beautiful pixel-perfect design. Featuring over 20 chart types and customizable color themes, UIChartView lets you quickly visualize your data in stunning charts with elegant startup animation – each customized to suit the nature of the chart type.

In addition to the fully customizable appearance, UIChartView also includes a host of useful enterprise features such as chart zooming and panning supporting X, Y, and both axis, as well as data annotations and custom grid lines. And the best of all, it's super easy to get started with UIChartView, thanks to the built-in data binding support, you can simply setup the chart source in the ViewModel and bind it to the chart view control. Obviously, the same chart source can be shared with other platforms such as Android and Windows.

Key features include:

  • High-performance chart rendering with stunning animations
  • Robust chart engine supporting multiple chart series
  • Predefined animation types – startup, data point changes, and series collection changes
  • Flexible axis zooming through pinch and double tap gestures
  • Fully customizable chart appearance from the canvas, series, data points to grid lines and ticks
  • Smart axis and label positioning
  • Automatic rotation support

This page describes the charting features and usage specific to iOS. For more information about Crosslight charting concept in general, see Visualizing Data with Charts.

On this page:

Using Chart View

There are several ways to use UIChartView in your iOS project, depending on whether you prefer to instantiate it through code or designer. If you only need to display a single chart view, you can use the built-in UIChartViewController(TViewModel) class, see the code example below.

As seen in the code above, presenting a chart view is as easy as a simple class declaration, without requiring any platform-specific implementation. This is made possible since the binding between the chart view control and the chart data source is established through the ImportBinding attribute. You can learn about configuring the chart data source later in this page.

The UIChartViewController provides a ChartView property which returns the instance of UIChartView that it manages. It also automatically register the ChartView as an identifier, allowing you to easily bind to the chart view in the binding provider. For more information about data binding in Crosslight, see Understanding Binding Providers.

If you need to add multiple charts to your view, you can create a new UIChartView object programmatically and add it to the view hierarchy through the native AddSubView method. If you prefer, you can also opt to use a standard UIViewController for presenting multiple chart views.
In addition to adding chart views programmatically, UIChartView also complies with Crosslight iOS component interface, enabling you to work with the chart view in Xamarin iOS Designer, see the figure below.

For more information about Crosslight iOS control support for Xamarin iOS Designer, see Working with iOS Universal Storyboards.

Configuring Chart Source

At the heart of the Crosslight Charting is the Chart class which represents a lightweight, portable chart model which can be easily consumed in the ViewModel. The Chart object, further called chart source, include all possible settings that you can configure in a chart, including the data source, series, axis configuration, as well as layout and appearance settings.

With the chart source defined in the ViewModel, you can reuse the same chart configuration across multiple platforms. In the most basic configuration, you will simply need to define a Chart property in the ViewModel, add one or more series which have been populated with data, and configure the axis.

The following code example shows how to create a chart source with two column series, using numeric axis and category axis.

The following illustration shows the result of the column chart from the code above.

Designed for ultimate flexibility, Crosslight Charting features over 20 chart series and hundreds of customizable settings. To learn more about the concept and features of Crosslight Charting in details, see Visualizing Data with Charts.


To see Crosslight Charting in action, please check out the comprehensive charting samples here: The samples demonstrate each chart series and possible feature configuration, including chart appearance customization, palette settings, and several gorgeous reference samples.