> ## Documentation Index
> Fetch the complete documentation index at: https://docs.get-clara.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Diagramm-Einstellungen

> Konfigurieren Sie Ihre Diagramme so, dass Daten genau so angezeigt werden, wie Sie sie benötigen.

export const ChartIcon = ({icon, size = 20}) => {
  const icons = {
    'database': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0" />
        <path d="M4 6v6a8 3 0 0 0 16 0v-6" />
        <path d="M4 12v6a8 3 0 0 0 16 0v-6" />
      </svg>,
    'filter': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227" />
      </svg>,
    'axis-x': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 13v.01" />
        <path d="M4 9v.01" />
        <path d="M4 5v.01" />
        <path d="M17 20l3 -3l-3 -3" />
        <path d="M4 17h16" />
      </svg>,
    'axis-y': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M11 20h-.01" />
        <path d="M15 20h-.01" />
        <path d="M19 20h-.01" />
        <path d="M4 7l3 -3l3 3" />
        <path d="M7 20v-16" />
      </svg>,
    'sum': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" />
      </svg>,
    'chart-pie': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M10 3.2a9 9 0 1 0 10.8 10.8a1 1 0 0 0 -1 -1h-6.8a2 2 0 0 1 -2 -2v-7a.9 .9 0 0 0 -1 -.8" />
        <path d="M15 3.5a9 9 0 0 1 5.5 5.5h-4.5a1 1 0 0 1 -1 -1v-4.5" />
      </svg>,
    'chart-line': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 19l16 0" />
        <path d="M4 15l4 -6l4 2l4 -5l4 4" />
      </svg>,
    'calendar': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" />
        <path d="M16 3v4" />
        <path d="M8 3v4" />
        <path d="M4 11h16" />
        <path d="M11 15h1" />
        <path d="M12 15v3" />
      </svg>,
    'arrows-sort': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 9l4 -4l4 4m-4 -4v14" />
        <path d="M21 15l-4 4l-4 -4m4 4v-14" />
      </svg>,
    'filters': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M7 8a5 5 0 1 0 10 0a5 5 0 1 0 -10 0" />
        <path d="M8 11a5 5 0 1 0 3.998 1.997" />
        <path d="M12.002 19.003a5 5 0 1 0 3.998 -8.003" />
      </svg>,
    'chart-bar-popular': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -6" />
        <path d="M9 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -10" />
        <path d="M15 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -14" />
        <path d="M4 20h14" />
      </svg>,
    'math-min': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M15 18a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
        <path d="M3 13s1 -9 4 -9c2.48 0 5.643 9.565 8.36 12.883" />
        <path d="M18.748 17.038c.702 -.88 1.452 -3.56 2.252 -8.038" />
      </svg>,
    'math-max': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M5 6a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
        <path d="M3 15s.616 -5.544 2.332 -7.93" />
        <path d="M8.637 7.112c2.717 3.313 5.882 12.888 8.363 12.888c2 0 3.333 -3 4 -9" />
      </svg>,
    'color-swatch': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M19 3h-4a2 2 0 0 0 -2 2v12a4 4 0 0 0 8 0v-12a2 2 0 0 0 -2 -2" />
        <path d="M13 7.35l-2 -2a2 2 0 0 0 -2.828 0l-2.828 2.828a2 2 0 0 0 0 2.828l9 9" />
        <path d="M7.3 13h-2.3a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h12" />
        <path d="M17 17l0 .01" />
      </svg>,
    'gizmo': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M20 19l-8 -5.5l-8 5.5" />
        <path d="M12 4v9.5" />
        <path d="M11 4a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
        <path d="M3 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
        <path d="M19 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
      </svg>,
    'stack-2': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M12 4l-8 4l8 4l8 -4l-8 -4" />
        <path d="M4 12l8 4l8 -4" />
        <path d="M4 16l8 4l8 -4" />
      </svg>,
    'badge-2k': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -10" />
        <path d="M14 9v6" />
        <path d="M17 9l-2 3l2 3" />
        <path d="M15 12h-1" />
        <path d="M7 9h2a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-1a1 1 0 0 0 -1 1v1a1 1 0 0 0 1 1h2" />
      </svg>,
    'text-caption': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 15h16" />
        <path d="M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
        <path d="M4 20h12" />
      </svg>,
    'eye-off': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
        <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
        <path d="M3 3l18 18" />
      </svg>,
    'caret-left': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M14 6l-6 6l6 6v-12" />
      </svg>,
    'caret-right': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M10 18l6 -6l-6 -6v12" />
      </svg>,
    'number-123': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 10l2 -2v8" />
        <path d="M9 8h3a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h3" />
        <path d="M17 8h2.5a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1 -1.5 1.5h-1.5h1.5a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1 -1.5 1.5h-2.5" />
      </svg>,
    'frame': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 7l16 0" />
        <path d="M4 17l16 0" />
        <path d="M7 4l0 16" />
        <path d="M17 4l0 16" />
      </svg>,
    'align-box-left-top': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14" />
        <path d="M9 13h-2" />
        <path d="M13 10h-6" />
        <path d="M11 7h-4" />
      </svg>
  };
  const selectedIcon = icons[icon];
  if (!selectedIcon) {
    return null;
  }
  return selectedIcon;
};

## Diagramm-Einstellungen aufrufen

1. Klicken Sie auf die Schaltfläche **Bearbeiten** in der oberen rechten Ecke Ihres Dashboards

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-edit.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=392cdb9a6e32036b1f252ee017eb820f" alt="Bearbeitungsmodus" width="3024" height="1722" data-path="images/user-guide/dashboard/dashboard-edit.png" />

2. Das Dashboard wechselt in den Bearbeitungsmodus
3. Klicken Sie auf ein beliebiges Widget, um es auszuwählen
4. Der Einstellungsbereich öffnet sich rechts

Die Einstellungen sind in Abschnitte gegliedert:

* **Daten**: Welche Daten abgerufen werden und wie sie gefiltert werden
* **X-Achse**: Wie Kategorien gruppiert und sortiert werden (Balken-/Liniendiagramme)
* **Y-Achse**: Was gemessen wird und wie es angezeigt wird (Balken-/Liniendiagramme)
* **Stil**: Farben, Beschriftungen und visuelle Optionen

<Note>
  Einige Einstellungen erscheinen nur, wenn andere Einstellungen konfiguriert sind. Beispielsweise wird **Datumsgranularität** nur angezeigt, wenn Sie ein Datumsfeld auswählen.
</Note>

***

## Daten-Einstellungen

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="database" />Quelle </span>

Wählen Sie, aus welchem Objekt Daten abgerufen werden sollen.

1. Klicken Sie auf **Quelle**
2. Wählen Sie ein Objekt (Chancen, Personen, Unternehmen usw.)

Alle Ihre Standard- und benutzerdefinierten Objekte sind verfügbar. Das Ändern der Quelle setzt andere Einstellungen zurück, da Feldoptionen vom ausgewählten Objekt abhängen.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-source.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=3fb95da16784d7371600e1f829cf2f0c" alt="Quelle" width="938" height="1226" data-path="images/user-guide/dashboard/dashboard-chart-settings-source.png" />

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filter" />Filter </span>

Begrenzen Sie, welche Datensätze in das Diagramm einbezogen werden.

1. Klicken Sie auf **Filter**
2. Der Filter-Editor wird geöffnet
3. Klicken Sie auf **+ Filter hinzufügen**
4. Wählen Sie ein Feld, eine Bedingung und einen Wert
5. Fügen Sie bei Bedarf weitere Filter hinzu

Filter funktionieren genauso wie in Tabellenansichten. Verwenden Sie sie, um sich auf bestimmte Segmente Ihrer Daten zu konzentrieren.

**Beispiel**: Filtern Sie Chancen, bei denen Phase "Gewonnen" ist, um nur abgeschlossene Deals anzuzeigen.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-filters.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=eda97aea77fbb2921a977a90ecfc7f27" alt="Filter" width="940" height="1190" data-path="images/user-guide/dashboard/dashboard-chart-settings-filters.png" />

<Tip>
  Für Datumsfelder verwenden Sie **Ist relativ**, um dynamische Filter wie "Letzte 7 Tage" oder "Dieser Monat" zu erstellen, die automatisch aktualisiert werden.
</Tip>

<Tip>
  Erweiterte Filter werden unterstützt — fügen Sie mehrere Filterregeln hinzu und kombinieren Sie sie mit **Und**- oder **Oder**-Logik.
</Tip>

***

## Einstellungen der X-Achse

Diese Einstellungen steuern die horizontale Achse von Balken- und Liniendiagrammen — typischerweise, wie Ihre Daten in Kategorien gruppiert werden.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-x" />Angezeigte Daten </span>

Wählen Sie das Feld aus, nach dem Ihre Daten gruppiert werden sollen. Dies bestimmt die auf der X-Achse angezeigten Kategorien.

**Beispiel**: Wählen Sie "Phase", um Daten nach Pipeline-Phase zu gruppieren, oder "Erstellungsdatum", um Daten über die Zeit zu sehen.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-x-data-on-display.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=130b7729bd8959070127245cadfd3d25" alt="Angezeigte Daten" width="938" height="1426" data-path="images/user-guide/dashboard/dashboard-chart-settings-x-data-on-display.png" />

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />Datumsgranularität </span>

Beim Gruppieren nach einem Datumsfeld wählen Sie den Zeitraum für die Gruppierung.

| Option                 | Gruppiert Daten nach   | Beispielausgabe                                     |
| ---------------------- | ---------------------- | --------------------------------------------------- |
| **Tag**                | Jeder Kalendertag      | 1. Jan., 2. Jan., 3. Jan. ...                       |
| **Woche**              | Kalenderwochen         | Woche 1, Woche 2, Woche 3 ...                       |
| **Monat**              | Kalendermonate         | Januar, Februar, März ...                           |
| **Quartal**            | Geschäftsquartale      | Q1, Q2, Q3, Q4                                      |
| **Jahr**               | Kalenderjahre          | 2023, 2024, 2025                                    |
| **Wochentag**          | Wochentag (aggregiert) | Montag, Dienstag ... (alle Montage zusammengefasst) |
| **Monat des Jahres**   | Monat (aggregiert)     | Januar, Februar ... (alle Januare zusammengefasst)  |
| **Quartal des Jahres** | Quartal (aggregiert)   | Q1, Q2, Q3, Q4 (alle Q1 zusammengefasst)            |

Die "der Woche/des Jahres"-Optionen aggregieren über die gesamte Zeit. Verwenden Sie **Wochentag**, um zu sehen, welcher Wochentag typischerweise die meisten Deals bringt. Verwenden Sie **Monat**, um Trends Monat für Monat zu sehen.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />Sortieren nach </span>

Steuern Sie die Reihenfolge der Kategorien auf der X-Achse.

* **Position** – Verwendet die in den Einstellungen Ihres Auswahlfelds definierte Reihenfolge
* **Alphabetisch** – A bis Z (oder chronologisch bei Daten)
* **Nach Wert** – Nach der Kennzahl sortiert (höchste oder niedrigste zuerst)
* **Manuell** – Ziehen Sie, um Ihre eigene Reihenfolge festzulegen

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-x-sort.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=7cca30332cc156f2e3aecfecbe14d03b" alt="Sortieren nach" width="938" height="1248" data-path="images/user-guide/dashboard/dashboard-chart-settings-x-sort.png" />

**Tipp**: Für Pipeline-Phasen verwenden Sie **Position**, um Phasen in der Reihenfolge Ihres Verkaufsprozesses anzuzeigen (Lead → Qualifiziert → Angebot → Gewonnen).

<Note>
  Die angezeigten Optionen hängen von Ihrem Feldtyp ab. Auswahlfelder haben alle Optionen; Datums- und Textfelder zeigen weniger.
</Note>

<Tip>
  Mit der Sortieroption **Manuell** können Sie Kategorien ziehen, um eine benutzerdefinierte Reihenfolge zu erstellen — ideal, um bestimmte Segmente hervorzuheben oder mit Ihren Daten eine Geschichte zu erzählen.
</Tip>

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="eye-off" />Nullwerte auslassen </span>

Kategorien mit Nullwerten oder ohne Daten ausblenden.

* **Ein**: Kategorien ohne Einträge werden ausgeblendet
* **Aus**: Alle Kategorien werden angezeigt, auch wenn sie leer sind

Verwenden Sie dies, um Diagramme mit spärlichen Daten aufzuräumen.

***

## Einstellungen der Y-Achse

Diese Einstellungen steuern, was Sie messen und wie es angezeigt wird.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-y" />Angezeigte Daten </span>

Wählen Sie das Feld und die Operation zur Berechnung Ihrer Kennzahl.

* **Zählungen** – Alle zählen, Leere zählen, Nicht-Leere zählen, Eindeutige Werte zählen
* **Mathematik** – Summe, Durchschnitt, Min, Max (Zahlenfelder)
* **Prozentsätze** – Prozent leer, Prozent nicht leer

Boolesche Felder fügen „Wahr/Falsch zählen“ hinzu. Aggregierte Diagramme mit Datumsfeldern zeigen Frühestes/Spätestes.

**Beispiel**: Wählen Sie „Betrag“ mit Summe, um den gesamten Deal-Wert pro Kategorie zu sehen, oder Alle zählen, um die Anzahl der Deals zu sehen.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-y-data-on-display.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=55e607195f09d382ba634cfcaa680b13" alt="Angezeigte Daten" width="940" height="1616" data-path="images/user-guide/dashboard/dashboard-chart-settings-y-data-on-display.png" />

<Note>
  Die angezeigten Optionen hängen von Ihrem Feld- und Diagrammtyp ab. Wenn eine erwartete Operation nicht angezeigt wird, überprüfen Sie Ihren Feldtyp.
</Note>

### Verhältnis

Für Auswahl-, Mehrfachauswahl- oder Boolesche Felder können Sie den Prozentsatz eines bestimmten Werts berechnen.

1. Wählen Sie ein Auswahl-, Mehrfachauswahl- oder Boolesches Feld aus
2. Aktivieren Sie **Verhältnis**
3. Wählen Sie die zu messende Option

**Beispiel**: Zeigen Sie "Gewonnene" Deals als Prozentsatz aller Chancen. Wenn Sie 10 „Gewonnen“-Deals von insgesamt 50 haben, zeigt das Diagramm 20 %.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filters" />Gruppieren nach </span>

Fügen Sie eine zweite Dimension hinzu, um mehrere Reihen zu erstellen (mehrere Balken oder Linien).

1. Legen Sie zuerst Ihr X-Achsen-Feld fest
2. Klicken Sie auf **Gruppieren nach**
3. Wählen Sie ein zweites Feld aus

**Beispiel**: Gruppieren Sie Deals nach Phase (X-Achse) UND nach Inhaber (Gruppieren nach), um die Pipeline-Aufschlüsselung jeder Person nebeneinander zu sehen.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-y-group-by.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=75770edc506599ec7270d991ad75f64b" alt="Gruppieren nach" width="942" height="1618" data-path="images/user-guide/dashboard/dashboard-chart-settings-y-group-by.png" />

Wenn Gruppieren nach eingestellt ist, sehen Sie mehrere Farben in Ihrem Diagramm und eine Legende erscheint.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />Datumsgranularität </span>

Wenn Gruppieren nach ein Datumsfeld ist, wählen Sie den Zeitraum (gleiche Optionen wie bei der X-Achse).

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />Sortieren nach </span>

Wenn Gruppieren nach eingestellt ist, steuern Sie die Reihenfolge der gruppierten Reihen (z. B. welcher Balken des Inhabers innerhalb jeder Kategorie zuerst erscheint).

Gleiche Optionen wie bei der Sortierung der X-Achse — Position, Alphabetisch und Manuell — außer dass wertbasierte Sortierung für die sekundäre Gruppierung nicht verfügbar ist.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="chart-bar-popular" />Kumulativ </span>

Laufende Summen statt einzelner Werte anzeigen.

* **Aus**: Jeder Balken/Punkt zeigt seinen eigenen Wert
* **Ein**: Jeder Balken/Punkt zeigt die Summe aller vorherigen Werte plus seinen eigenen

**Beispiel**: Januar = 10, Februar = 15

* Kumulativ aus: Zeigt 10 und 15
* Kumulativ ein: Zeigt 10 und 25 (10 + 15)

Verwenden Sie „Kumulativ“, um den Fortschritt zu einem Ziel im Zeitverlauf zu verfolgen.

<img src="https://mintcdn.com/clara-1b8b12e1/nw6qFuBqeI4qyyh5/images/user-guide/dashboard/dashboard-chart-settings-y-cumulative.png?fit=max&auto=format&n=nw6qFuBqeI4qyyh5&q=85&s=e8378fefec9080de8d2bc8d802501964" alt="Kumulativ" width="2164" height="868" data-path="images/user-guide/dashboard/dashboard-chart-settings-y-cumulative.png" />

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="math-min" />Min-Bereich / <ChartIcon icon="math-max" />Max-Bereich </span>

Legen Sie feste Mindest- und Höchstwerte für die Y-Achse fest.

* Leer lassen für automatische Skalierung
* Geben Sie eine Zahl ein, um die Grenze festzulegen

**Wann verwenden:**

* Setzen Sie Min auf 0 für genaue visuelle Vergleiche
* Setzen Sie beides für konsistente Skalen über mehrere Diagramme hinweg
* Fokussieren Sie einen bestimmten Wertebereich, indem Sie beide festlegen

***

## Stil-Einstellungen

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="color-swatch" />Farben </span>

Legen Sie das Farbschema für Ihr Diagramm fest. Wählen Sie aus einer Vielzahl von Farbpaletten.

<Note>
  Beim Gruppieren nach einem Auswahlfeld verwendet das Diagramm automatisch die in Ihren Feldeinstellungen für jede Option definierten Farben.
</Note>

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="gizmo" />Achsenname </span>

Wählen Sie, welche Achsenbeschriftungen angezeigt werden sollen: **Keine**, **X-Achse**, **Y-Achse** oder **Beide** (nur Balken- und Liniendiagramme).

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="stack-2" />Gestapelte Balken / Gestapelte Linien </span>

Wenn Gruppieren nach eingestellt ist, wählen Sie, wie mehrere Reihen angezeigt werden.

* **Aus (Gruppiert)**: Reihen erscheinen nebeneinander. Verwenden Sie dies, wenn exakte Werte zwischen Gruppen verglichen werden.
* **Ein (Gestapelt)**: Reihen werden übereinander gestapelt. Verwenden Sie dies, wenn Sie die Zusammensetzung zeigen — wie Teile ein Ganzes bilden.

**Beispiel**: Deals nach Phase, gruppiert nach Inhaber

* Gruppiert: Sehen Sie die exakten Zahlen jedes Inhabers nebeneinander
* Gestapelt: Sehen Sie die Gesamtzahl der Deals pro Phase, mit dem gestapelten Beitrag jedes Inhabers

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="badge-2k" />Datenbeschriftungen </span>

Werte direkt auf Diagrammelementen (Balken, Punkte, Segmente) anzeigen.

* **Ein**: Werte erscheinen im Diagramm
* **Aus**: Keine Werte angezeigt (aufgeräumtere Darstellung)

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="text-caption" />Legende </span>

Legende anzeigen oder ausblenden (erscheint nur, wenn Gruppieren nach eingestellt ist).

* **Ein**: Die Legende zeigt, was jede Farbe darstellt
* **Aus**: Keine Legende angezeigt

<Tip>
  **Bewegen Sie den Mauszeiger** über ein Legendenelement, um diese Gruppe hervorzuheben. **Klicken** Sie, um es vorübergehend aus dem Diagramm auszublenden.
</Tip>

***

## Diagrammspezifische Hinweise

### Tortendiagramme

* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="chart-pie" size={16} /></span> **Jedes Segment steht für** – Legen Sie fest, wie Segmente gruppiert werden
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="eye-off" size={16} /></span> **Leere Kategorie ausblenden** – Nullwert-Segmente entfernen
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="number-123" size={16} /></span> **Wert in der Mitte anzeigen** – Den aggregierten Wert anzeigen (Summe, Durchschnitt, Anzahl usw.)

### Aggregierte Diagramme

* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-left" size={16} /></span> **Präfix** – Text vor der Zahl hinzufügen (z. B. `$`)
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-right" size={16} /></span> **Suffix** – Text nach der Zahl hinzufügen (z. B. `%`)
