Quick start

This guide describes how to integrate the DXcharts library for iOS and enable its basic functionality.

Requirements

• iOS 15.0+
• Real device or simulator to launch the app

Demo project

We provide a demo project with all default providers (based on DXFeedFramework) and default settings upon client request.

Installation

To install this package locally, follow these steps:

1. Unzip the package:

   unzip DXPackage.zip -d <destination_path>

2. Open your project in Xcode.

3. Add the local package:

   • Go to File -> Add Packages...
   • Click on Add Local...
   • Navigate to the unzipped folder "DXPackage" and select it.

4. Ensure the package is added to your target's dependencies.

Base framework configuration

To prepare the framework, do the following:

1. Import the DXChart module in your UIApplicationDelegate.

import DXChart

2. Configure the framework by calling DXChartApp.configure() in your app delegate's application(_:didFinishLaunchingWithOptions:) method:

DXChartApp.configure()

That's it. See the example below to set up a custom configuration.

Using the Chart

Components

You can use ChartView and ChartScreen components to present your data.

• ChartView is a UIView component that you can integrate into your screens. It has an API for configuring and displaying data directly. (Available starting from version 1.2.0.)

• ChartScreen is a UIViewController that includes all features of our framework. It requires some dependencies to work, such as CandlesProvider and IPFDataProvider. It encapsulates most of the chart logic and offers more features than ChartView.

Using ChartScreen

This section describes how to integrate ChartScreen directly into your iOS application.

You provide candle data to ChartScreen using a CandlesProvider. If you need a service to retrieve market data, you can use DXFeedFramework.

Settings have sensible defaults and persist user changes. To store and manage settings, ChartScreen uses a SettingsManager. You can provide your own instance or use the default implementation (DXCSettingsManager). To set up custom parameters, see Settings.

ChartScreen configuration

To configure ChartScreen, initialize it using the static method makeScreen() from the ChartScreen enum. ChartScreen expects the following parameters:

• dataProvider — provides all necessary data for the chart (candles, quotes, IPF, schedule, etc.).
• delegate — handles trading operations (buy/sell).
• dataSource — optional data source for customizing Settings content.
• toolbarDataSource — optional custom data source for the main toolbar.
• toolbarDelegate — optional custom delegate for the main toolbar.
• configuration — optional configuration to customize module presentation.
• logo — optional Logo configuration to display a logo on the chart screen.
• shouldShowToolbar — controls whether the toolbar is displayed (default: true).
• dataStorage — storage for managing instrument and aggregation data.
• settingsManager — manager for handling chart settings.
• uniqueIdentifier — optional identifier for isolating user data between multiple charts (indicators, drawings, etc.).

You can provide your own providers or start from the dxFeed-based examples. To set up default data providers, see Configuration. Factory method signature:

public enum ChartScreen {
  public static func makeScreen(
      dataProvider: DataProvider,
      delegate: QuoteOperationsDelegate,
      dataSource: DataSource? = nil,
      toolbarDataSource: ChartToolBar.DataSource? = nil,
      toolbarDelegate: ChartToolBar.Delegate? = nil,
      configuration: Configuration? = nil,
      logo: Logo? = nil,
      shouldShowToolbar: Bool = true,
      dataStorage: DataStorage = DXChartApp.dataStorage,
      settingsManager: SettingsManager = DXChartApp.settingsManager,
      uniqueIdentifier: String? = nil
  ) -> ViewController
}

Notes

• ChartScreenConfigurator has been deprecated and renamed to ChartScreen. Please use ChartScreen going forward.

DataProvider

To provide data to the chart, implement a DataProvider that conforms to the DXChart.DataProvider protocol. You can use the default implementation, which is available here.

/// A protocol that defines the necessary data providers for a system.
///
/// This protocol acts as a central place to access different data providers
/// such as candles, quotes, IPF, schedule, and news.
///
/// Types conforming to `DataProvider` must provide access to a variety of services
/// via properties, with some being optional depending on the implementation.
public protocol DataProvider {
  /// Provides access to the candle data for a specific instrument.
  /// Used for fetching and streaming historical and real-time candle data.
  var candlesProvider: CandlesProvider { get }
  
  /// Provides access to the quotes data for a specific instrument.
  /// Facilitates fetching bid, ask, and last price data for the selected symbol.
  var quotesDataProvider: QuotesDataProvider { get }
  
  /// Provides access to the IPF (Instrument Price Flow) data.
  /// Used for tracking and visualizing instrument price flow information.
  var ipfDataProvider: IPFDataProvider { get }
  
  /// Provides access to the instrument's trading schedule.
  /// Useful for aligning data with trading session start times and identifying trading windows.
  var scheduleProvider: ScheduleProvider { get }
  
  /// Provides access to news data for the selected symbol, including corporate actions, earnings, and conference calls.
  /// May be `nil` if news functionality is not supported or not required.
  var newsProvider: NewsProvider? { get }
  
  /// Provides access to orders data for the selected symbol.
  /// May be `nil` if orders functionality is not supported or not required.
  var ordersProvider: OrdersProvider? { get }
  
  /// Provides settings and configurations for studies on the chart.
  /// May be `nil` if studies are not used or not required.
  var studiesProvider: StudiesProvider? { get }
}

CandlesProvider

CandlesProvider — provides candle data for the selected trading instrument that needs to be displayed on the chart. You can use the default implementation built on DXFeed, which is available here.

QuotesDataProvider

QuotesDataProvider — provides quotes for the selected instrument, including bid and ask prices. You can use the default implementation built on DXFeed, which is available here.

IPFDataProvider

IPFDataProvider — provides the list of instruments the user can select to display on the chart. The DataProvider must also expose an IPFDataProvider. You can use the default implementation built on DXFeed, which is available here.

ScheduleProvider

ScheduleProvider — provides the schedule for extended hours and session breaks. Your schedule provider should conform to the ScheduleProtocol. You can use the default implementation built on DXFeedFramework, which is available here.

NewsProvider

NewsProvider is responsible for news and events on the chart. Provide your own provider conforming to the NewsProvider protocol or use the default implementation built on DXFeedFramework, which is available here.

OrdersProvider

OrdersProvider is responsible for handling orders on the chart. Provide your own provider conforming to the OrdersProvider protocol, or use the example implementation available here. If an orders provider is not present in the DataProvider, the chart will not show order functionality.

StudiesProvider

StudiesProvider handles studies information such as default and available studies, favorites management, and the ability to modify studies via API (without GUI). Provide your own provider conforming to the StudiesProvider protocol, or start from the example implementation here. If you don't provide a StudiesProvider, the chart will use its internal implementation.

QuoteOperationsDelegate

If you need to handle Buy and Sell values, create your own class that conforms to the QuoteOperationsDelegate protocol. Then implement these functions in your class:

public protocol QuoteOperationsDelegate: AnyObject {
  func buyButtonWasPressed(_ value: Double?)
  func sellButtonWasPressed(_ value: Double?)
}

Additional features

Logo image

Provide a logo via the logo parameter of makeScreen using the Logo struct.

Logo fields and defaults:

• image — UIImage to display (required)
• position — anchor inside the view (default: .bottomLeading)
• insets — offsets from the anchored edges (default: .zero)
• isHidden — controls visibility (default: false)

Position is defined by Logo.Position(vertical:horizontal:) where:

• vertical is one of .top or .bottom
• horizontal is one of .leading or .trailing

Convenience presets: .bottomLeading, .bottomTrailing, .topLeading, .topTrailing.

Example (bottom-leading with custom insets):

let logo = Logo(
  image: UIImage(named: "companyLogo")!,
  position: .bottomLeading,
  insets: UIEdgeInsets(top: 10, left: 5, bottom: 50, right: 5),
  isHidden: false
)
let chartVC = ChartScreen.makeScreen(
  dataProvider: dataProvider,
  delegate: quoteOperationsHandler,
  logo: logo,
  shouldShowToolbar: true
)

Example (top-trailing; the logo does not cover the price axis):

let logo = Logo(
  image: UIImage(named: "companyLogo")!,
  position: .topTrailing,
  insets: UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 55) // Increase right inset to avoid overlapping the price axis
)
,[object Object]

Deprecated convenience (use logo instead):

let chartVC = ChartScreen.makeScreen(
  dataProvider: dataProvider,
  delegate: quoteOperationsHandler,
  logoImage: UIImage(named: "companyLogo"),
  shouldShowLogo: true,
  shouldShowToolbar: true
)

uniqueIdentifier

You can provide a uniqueIdentifier, and the DXcharts framework will use it to handle this chart’s data separately, including mechanisms for segregating data such as drawings and indicator settings.

Configuration

You can provide additional configuration to the chart via a ChartScreen.DataSource instance. You can control the content of the Settings screen in the ChartScreen module. See full documentation here

Custom items on toolbar

You can customize the toolbar in ChartScreen via ChartScreen.Delegate and ChartScreen.DataSource. See full documentation here

Example: initialize ChartScreen

import UIKit
import DXChart
class Handler: DXChart.QuoteOperationsDelegate {
  func buyButtonWasPressed(_ value: Double?) {
      debugPrint(">>> HANDLER BUY sender.title = (value ?? 0)")
  }
  func sellButtonWasPressed(_ value: Double?) {
      debugPrint(">>> HANDLER SELL sender.title = (value ?? 0)")
  }
}
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
  var window: UIWindow?
  private let quoteOperationsHandler = Handler()
  func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
      guard let windowScene = (scene as? UIWindowScene) else { return }
      self.window = UIWindow(windowScene: windowScene)
      directStartWithChart()
  }
  private func directStartWithChart() {
      // example
      let dataProvider = CustomDataProvider(
          quoteAddress: <#quoteAddress#>,
          ipfAddress: <#ipfAddress#>,
          instrument: DXChartApp.dataStorage.instrument
      )
      let logo = Logo(
          image: UIImage(named: "companyLogo")!,
          insets: UIEdgeInsets(top: 10, left: 5, bottom: 50, right: 55),
          isHidden: false
      )
      let chartScreenViewController = ChartScreen.makeScreen(
          dataProvider: dataProvider,
          delegate: quoteOperationsHandler,
          logo: logo,
          shouldShowToolbar: true
      )
      window?.rootViewController = chartScreenViewController
      window?.makeKeyAndVisible()
      
      // Interact with the returned ViewController API
      chartScreenViewController.changeInstrument(<#newInstrument#>)
      chartScreenViewController.updateSettings(<#newSettings#>)
  }
}

ChartScreen.ViewController API (overview)

Use the returned ViewController to programmatically control the chart screen:

public protocol ViewController: UIViewController {
  var settingsManager: SettingsManager { get }
  var state: State { get }
  var defaultToolBarItems: [ChartToolBar.Item] { get }
  
  var defaultConfiguration: Configuration { get }
  var configuration: Configuration { get set }
  func changeInstrument(_ instrument: Instrument)
  func updateSettings(_ settings: Chart.Settings, completion: (() -> Void)?)
  func updateSettings(_ settings: Chart.Settings)
  func setupLogoVisibility(_ visible: Bool)
  func setupHeaderVisibility(_ visible: Bool)
  func setupToolbarVisibility(_ visible: Bool)
  func enableDrawingMode(_ isEnable: Bool)
  func updateAggregationPickerShowing(_ shouldShow: Bool)
  func updateStudiesPickerShowing(_ shouldShow: Bool)
}

ChartScreen.DataSource (overview)

Use ChartScreen.DataSource to customize additional parameters of ChartScreen (e.g., Settings content). Return nil from settingsContent to use the default layout. See full documentation in ChartScreen Customizations