---
title: Der Widget-Typ "KPI-Chart"
slug: campaign/docs/der-widget-typ-kpi-chart
createdAt: 2026-08-06T15:53:54.958Z
---

Doppelklicken Sie im Bearbeiten-Modus auf ein Widget oder bewegen Sie den Mauszeiger über ein Widget und klicken Sie auf **Bearbeiten…** :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/g3-BbZ7uqQRkDhTCz1OAE-20260720-145431.png" alt="Bild" caption width="20" height="20"}.

![Bild: KPI-Chart-Einstellungen](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/jiRXMTBoVAnjJsCcQJ9BT-20260720-145431.png "Bild: KPI-Chart-Einstellungen")

Folgende Einstellungen können Sie vornehmen:

- **Titel**. Titel des KPI-Charts. Der Titel wird zentriert in einer vordefinierten Schriftgröße angezeigt. Lassen Sie das Feld leer, falls Sie keinen Titel anzeigen möchten.
- **Werttyp**. Definieren Sie den Ausgabetyp Ihrer Datenquelle.
  - **Summe**. Addiert die Daten der ausgewählten Datenquelle. (Beispiel: Es wurden insgesamt 955.000 Nachrichten geöffnet.)
  - **Durchschnitt**. Berechnet den Durchschnitt der ausgewählten Daten. (Beispiel: Es wurden am Tag durchschnittlich 120.000 Nachrichten geöffnet.)
  - **Minimum**. Zeigt den geringsten Wert der Datenquelle eines Tages im ausgewählten Zeitraum an. (Beispiel: Die Mindestzahl geöffneter E-Mails beträgt 465 E-Mails.)
  - **Maximum**. Zeigt den höchsten Wert der Datenquelle eines Tages im ausgewählten Zeitraum an. (Beispiel: Die Höchstzahl geöffneter E-Mails beträgt 511.000 E-Mails.)
- **Wert-Style**. Definieren Sie den Stil, in dem die Kennzahl ausgegeben werden soll. Klicken Sie auf **Bearbeiten…** und wählen Sie im Fenster **Style bearbeiten** aus der Drop-down-Liste die Eigenschaft, die Sie bearbeiten möchten. Klicken Sie auf das **Plus** :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/OiekZ5ByVzCYPZ4PLvBsH-20260720-145431.png" alt="Bild" caption width="20" height="20"}, um die Eigenschaft dem Style-Set hinzuzufügen.
  - **Schriftfarbe**. Definieren Sie die Schriftfarbe, indem Sie einen Hexadezimalwert eingeben, dem # vorangestellt ist (z. B. #000000). Alternativ können Sie mit Hilfe des Farbwählers einen Farbwert festlegen.
  - **Deckkraft**. Stellen Sie für die Deckkraft der ausgegebenen Kennzahl einen Wert zwischen 0 und 1 ein.
  - **Hintergrundfarbe**. Der Hintergrund wird in Form eines farbigen Streifens hinter der Kennzahl angezeigt. Definieren Sie die Hintergrundfarbe, indem Sie einen Hexadezimalwert eingeben, dem # vorangestellt ist (z. B. #000000). Alternativ können Sie mit Hilfe des Farbwählers einen Farbwert festlegen.
  - **Textausrichtung**. Platzieren Sie die Kennzahl links, zentriert oder rechts im Widget. Standardmäßig ist die Kennzahl zentriert.
  - **Rahmen**. Geben Sie im Textfeld eine Rahmendefinition nach CSS-Standard ein, z. B. *2px dotted orange* für einen 2 Pixel breiten, orange gepunkteten Rahmen.
  - **Innenabstand**. Geben Sie einen Pixelwert an, um die vertikale Position der Kennzahl zu verändern, z. B. *20px* (je größer der Pixelwert, umso niedriger die Position der Kennzahl).
  - **Schriftgröße**. Die Schriftgröße wird automatisch angepasst. Änderungen haben keinen Einfluss auf die Darstellung.
- **Datenquelle**. Wählen Sie den KPI aus, für den Sie ein KPI-Chart erstellen möchten. Die KPIs sind absolute Werte und beziehen sich auf die in Ihrem Mandanten gespeicherten Nachrichten.
  - **Empfänger**. Anzahl der Empfänger, an die Nachrichten gesendet wurden.
  - **Klicks**. Geklickte Links.
  - **Öffnungen**. Geöffnete Nachrichten.
  - **Rückläufer**. Nachrichten, die zum absendenden Mail-Server zurückkommen (u. a. Antwort, Autoresponder, Hard-Bounce und Soft-Bounce).
  - **Abbestellungen**. Registrierte Abbestellungen.

:::Paragraph{indent="1"}
**Diagrammfarbe**. Farbe des im Hintergrund des KPI-Charts angezeigten Diagramms. Geben Sie in das Feld einen Hexadezimalwert ein, dem # vorangestellt ist (z. B. #000000). Alternativ können Sie mit Hilfe des Farbwählers einen Farbwert festlegen.
:::

:::hint{type="info" indent="2"}
**Note**

Für eine bessere Lesbarkeit wird die Diagrammfarbe leicht transparent dargestellt. Dadurch kommt es zu Farbveränderungen (z. B. wird Rot zu Rosa).
:::

- **Diagrammtyp**.
  - **Spline-Fläche**. Liniendiagramm mit abgerundeten Ecken und farbiger Fläche.
  - **Fläche**. Liniendiagramm mit farbiger Fläche.
  - **Linie**. Liniendiagramm.
  - **Spline**. Liniendiagramm mit abgerundeten Ecken.
- **Zeitraum-Optionen**.
  - **Zeitraum hinzufügen…**. Fügen Sie einen selbst definierten Zeitraum hinzu.
    - **Titel**. Geben Sie einen Namen für den neu erstellten Zeitraum an.
    - **Typ**. Wählen Sie, ob die Zeitraumangabe absolut oder dynamisch erfolgen soll.
    - **Von**/**Bis (Absolut)**. Geben Sie ein Start- und ein Enddatum an.
    - **Von**/**Bis (Dynamisch)**. Geben Sie ausgehend vom aktuellen Datum einen Zeitraum in Tagen an. Verwenden Sie Minuswerte für einen vergangenen Zeitraum.
  - Klicken Sie auf das **Minus** :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/rt_qpi1ilOO2_nYFic_Ct-20260720-145431.png" alt="Bild" caption width="20" height="20"}, um Zeiträume aus der Auswahl zu entfernen.
  - **Vorausgewählter Zeitraum**. Geben Sie an, welcher Zeitraum voreingestellt angezeigt werden soll.
  - **Zeitraumauswahl anzeigen**. Blenden Sie die Drop-down-Liste in der Performance-Dashboard-Übersicht für die Zeitraumauswahl ein oder aus.