<!--
{
  "documentType" : "article",
  "framework" : "ClockKit",
  "identifier" : "/documentation/ClockKit/graphic",
  "metadataVersion" : "0.1.0",
  "role" : "collectionGroup",
  "title" : "Graphic"
}
-->

# Graphic

Display visually rich content on watch faces.

## Discussion

Use graphic templates to display multicolor text, full-color images, and gauges with color gradients on a variety of watch faces, including the Infograph, Infograph Modular, and Solar Dial.

> Note:
> Watch faces that support graphic templates are available only on Apple Watch Series 4 or later.

ClockKit further divides graphic templates into five different families:

- [`CLKComplicationFamily.graphicCorner`](/documentation/ClockKit/CLKComplicationFamily/graphicCorner)
- [`CLKComplicationFamily.graphicCircular`](/documentation/ClockKit/CLKComplicationFamily/graphicCircular)
- [`CLKComplicationFamily.graphicBezel`](/documentation/ClockKit/CLKComplicationFamily/graphicBezel)
- [`CLKComplicationFamily.graphicRectangular`](/documentation/ClockKit/CLKComplicationFamily/graphicRectangular)
- [`CLKComplicationFamily.graphicExtraLarge`](/documentation/ClockKit/CLKComplicationFamily/graphicExtraLarge).

Each family appears in a different location on the supported watch face. For example, the corner templates can be used in all four corners of the Infographic or Solar Dial watch faces. While the circular templates appear in the center of the Infographic watch face, and along the bottom of the Infographic Modular face.

The graphic families also provide templates that support SwiftUI. These templates use a <doc://com.apple.documentation/documentation/SwiftUI/View> instance to draw some or all of the complication’s content. Every graphic template that takes a [`CLKImageProvider`](/documentation/ClockKit/CLKImageProvider) parameter has a variant that takes a <doc://com.apple.documentation/documentation/SwiftUI/View> instead.

The [`CLKComplicationTemplateGraphicRectangularFullView`](/documentation/ClockKit/CLKComplicationTemplateGraphicRectangularFullView), [`CLKComplicationTemplateGraphicCircularView`](/documentation/ClockKit/CLKComplicationTemplateGraphicCircularView), and [`CLKComplicationTemplateGraphicExtraLargeCircularView`](/documentation/ClockKit/CLKComplicationTemplateGraphicExtraLargeCircularView) provide the most flexibility. In these templates, the SwiftUI view fills the entire complication—giving you a blank canvas that you can use to create your content. For more information, see [Building complications with SwiftUI](/documentation/ClockKit/building-complications-with-swiftui).

### Display Tinted Complications

A watch face that supports graphic complications can display a low-color version of the complication in tinted mode, which makes the following changes to the template:

- Gauges display a solid color instead of a color gradient. The system bases this color on the watch face color the user selected.
- Text displays a color based on the user’s watch face color. Multicolor text providers display only a single color.
- The system automatically desaturates images by default; however, you can use the [`CLKFullColorImageProvider`](/documentation/ClockKit/CLKFullColorImageProvider) class’s [`tintedImageProvider`](/documentation/ClockKit/CLKFullColorImageProvider/tintedImageProvider) property to provide a tinted version for the image. Note that the complication ignores the tinted image provider’s [`tintColor`](/documentation/ClockKit/CLKImageProvider/tintColor) property, using a color based on the user’s watch-face color instead.

For more information, see [Exploring Tinted Graphic Complications](https://developer.apple.com/videos/play/wwdc2019/253/).

## Topics

### Graphic data

[Displaying essential information on a watch face](/documentation/ClockKit/displaying-essential-information-on-a-watch-face)

Implement complications in a watch app to display essential information on a watch face.

### Graphic template families

[Circular complication templates](/documentation/ClockKit/circular-complication-templates)

Display graphical data in a compact circle.

[Corner complication templates](/documentation/ClockKit/corner-complication-templates)

Display graphically rich data in the watch face’s corner.

[Rectangular complication templates.](/documentation/ClockKit/rectangular-complication-templates)

Displays large, rectangular complications for charts, images, or multiple lines of text.

[Extra large circular templates](/documentation/ClockKit/extra-large-circular-templates)

Display large, easy-to-read content on the X-Large watch face.

[`CLKComplicationTemplateGraphicBezelCircularText`](/documentation/ClockKit/CLKComplicationTemplateGraphicBezelCircularText)

A template for displaying a circular complication with text along the bezel.



---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)