> For the complete documentation index, see [llms.txt](https://docs.enlyze.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.enlyze.com/integrations/grafana/visualisation-types/04-advanced-styling.md).
# 04 Erweiterte Gestaltung
Professionelle Dashboards erfordern eine einheitliche Gestaltung: passende Farben, korrekte Einheiten, Schwellenwerte und klare visuelle Hierarchien. In diesem Tutorial lernst du die wichtigsten Techniken, um deine Panels produktionsreif zu gestalten:
## Was du lernst
* Field Overrides für individuelle Gestaltung einzelner Datenreihen
* Einheiten und Dezimalpräzision konfigurieren
* Schwellenwerte direkt im Diagramm anzeigen
* Mehrere Y-Achsen für unterschiedliche Einheiten nutzen
* Transparente Panels für Shopfloor-Anzeigen
## Voraussetzungen
* Vorherige Tutorials in diesem Abschnitt abgeschlossen
* Grundlegendes Verständnis der Panel-Konfiguration
***
## Field Overrides
Field Overrides ermöglichen es, unterschiedliche Einstellungen auf bestimmte Datenreihen innerhalb eines Panels anzuwenden.
### Override-Typen
| Typ | Beschreibung | Beispiel |
| ------------------------- | ------------------ | -------------------------------- |
| **Fields with name** | Exakter Feldname | "Abzugsgeschwindigkeit (Soll)" |
| **Fields matching regex** | Regulärer Ausdruck | `.*\(Soll\)$` für alle Sollwerte |
| **Fields with type** | Datentyp | Alle numerischen Felder |
### Override erstellen
1. Suche im Panel-Editor den Abschnitt **Overrides** in der rechten Seitenleiste
2. Klicke auf **+ Add field override** und wähle den Abgleichtyp
3. Klicke auf **+ Add override property** und konfiguriere die gewünschte Eigenschaft
### Häufige Override-Eigenschaften
| Eigenschaft | Pfad | Beschreibung |
| ------------ | ------------------------------- | ------------------------------ |
| Color | Standard options > Color | Feste Farbe |
| Unit | Standard options > Unit | Anzeigeeinheit |
| Decimals | Standard options > Decimals | Dezimalpräzision |
| Display name | Standard options > Display name | Benutzerdefinierte Bezeichnung |
| Line style | Graph styles > Line style | Solid, Dash, Dots |
| Line width | Graph styles > Line width | Linienstärke |
| Y-axis | Axis > Placement | Linke oder rechte Achse |
### Beispiel: Ist- vs. Sollwert
| Override | Farbe | Linienstil | Breite |
| -------- | ------------- | ------------- | ------ |
| Ist-Wert | Blau (fest) | Solid | 2 |
| Sollwert | Orange (fest) | Dash (10, 10) | 1 |
***
## Einheiten und Dezimalstellen
Korrekte Einheiten machen Werte sofort verständlich.
1. Suche in der rechten Seitenleiste nach **Standard options** > **Unit**
2. Durchsuche die Kategorien oder verwende die Suche
### Häufige Einheiten in der Fertigung
| Kategorie | Einheiten |
| ------------------- | --------------- |
| **Durchsatz** | kg/h, t/h |
| **Temperatur** | °C, °F |
| **Druck** | bar, PSI |
| **Geschwindigkeit** | m/min, RPM |
| **Prozent** | Percent (0-100) |
Unter **Decimals** steuerst du die Dezimalpräzision. Faustregel: 0 für Zähler, 1 für Temperaturen und Prozent, 2 für Präzisionsmessungen.
{% hint style="info" %}
Wenn die gewünschte Einheit nicht in der Liste vorhanden ist: **Misc** > **Custom** und das Suffix eingeben (z. B. "pieces/h").
{% endhint %}
***
## Farben
### Farbschemata
Unter **Standard options** > **Color scheme** stehen verschiedene Optionen:
| Schema | Einsatzbereich |
| -------------------- | ----------------------------------------------- |
| **Single color** | Einfache Panels mit einer Datenreihe |
| **Classic palette** | Mehrere Datenreihen automatisch unterscheiden |
| **Green-Yellow-Red** | Leistungsmetriken mit Gradient |
| **By value** | Statusindikatoren basierend auf Schwellenwerten |
### Farbkonventionen für die Fertigung
| Farbe | Verwendung |
| ---------- | --------------- |
| **Blau** | Ist-/Messwerte |
| **Orange** | Soll-/Zielwerte |
| **Grün** | Guter Status |
| **Gelb** | Warnung |
| **Rot** | Kritisch/Fehler |
***
## Schwellenwerte auf Diagrammen
Schwellenwerte können als horizontale Linien oder farbige Flächen direkt im Zeitreihendiagramm angezeigt werden.
1. Suche in der Seitenleiste nach **Thresholds** und füge Schwellenwerte hinzu
2. Suche nach **Graph styles** > **Threshold display** und wähle einen Modus:
| Modus | Beschreibung |
| --------------------- | --------------------------------------------- |
| **Off** | Nur Legendenfarben beeinflusst |
| **As lines** | Horizontale Linien an den Schwellenwertstufen |
| **As filled regions** | Farbige Flächen zwischen den Schwellenwerten |
| **Both** | Linien und farbige Flächen |
### Beispiel: Soll-Ist-Abweichung
Ein praktisches Beispiel: Bilde die Differenz aus Soll- und Ist-Wert (z. B. über eine Transformation) und zeige sie als eigene Zeitreihe. Lege dann symmetrische Schwellenwerte als **As filled regions** an:
| Schwellenwert | Farbe | Bedeutung |
| ------------- | ----- | ---------------------------- |
| Base | Rot | Starke Abweichung (negativ) |
| -20 | Gelb | Leichte Abweichung (negativ) |
| -5 | Grün | Normalbetrieb |
| 5 | Gelb | Leichte Abweichung (positiv) |
| 20 | Rot | Starke Abweichung (positiv) |
Da bei einer Abweichungsdarstellung die genaue Größe großer Ausreißer weniger relevant ist als das Toleranzband selbst, empfiehlt es sich, die Y-Achse zu begrenzen. Setze unter **Standard options** die Werte **Min** und **Max** (z. B. -30 und 30). Aktiviere unter **Axis** den Toggle **Centered zero**, um die Nulllinie immer mittig darzustellen.
***
## Mehrere Y-Achsen
Die ENLYZE-Datenquelle legt Variablen mit unterschiedlichen Einheiten automatisch auf separate Y-Achsen. Wählst du z. B. Temperatur (°C), Durchsatz (kg/h) und Druck (bar) in einer Abfrage, erhältst du drei Achsen.
Wenn du mehr Kontrolle über die Positionierung möchtest, nutze Overrides:
1. Füge einen Override für die Datenreihe hinzu
2. Füge die Eigenschaft **Axis** > **Placement** hinzu
3. Wähle **Right**
{% hint style="info" %}
Verwende unter **Axis** > **Color mode** den Modus **Series**, damit die Achsenfarbe zur Datenreihenfarbe passt. So wird klar, welche Achse zu welchen Daten gehört.
{% endhint %}
***
## Dashboard-Einstellungen
### Transparenter Hintergrund
Unter **Panel options** > **Transparent background** machst du den Panel-Hintergrund transparent. Geeignet für Shopfloor-Anzeigen und Präsentationen.
### Zeitbereich
* **Dashboard-Zeitbereich**: In den Dashboard-Einstellungen (Zahnradsymbol) unter **Time options** den Standard-Zeitbereich und das Refresh-Intervall festlegen
* **Panel-spezifisch**: Unter **Query options** > **Relative time** den Dashboard-Zeitbereich für einzelne Panels überschreiben (z. B. "1h")
***
## Das fertige Shopfloor-Panel
Die einzelnen Techniken ergeben zusammen ein produktionsreifes Panel:
| Einstellung | Wert |
| ---------------- | ------------------------ |
| **Line width** | 2 |
| **Fill opacity** | 15 |
| **Gradient** | Opacity |
| **Legend** | Table mit Last, Min, Max |
| **Transparent** | Yes |
### Overrides
| Datenreihe | Farbe | Stil |
| ------------------- | ------ | ---------------------- |
| Ist-Geschwindigkeit | Blau | Durchgezogen, Breite 2 |
| Sollwert | Orange | Gestrichelt, Breite 1 |
### Schwellenwerte
| Wert | Farbe | Bedeutung |
| ------------------ | ----- | --------- |
| Base | Grün | Normal |
| 90 % des Sollwerts | Gelb | Warnung |
| 80 % des Sollwerts | Rot | Kritisch |
***
## Tipps
* **Einheitlichkeit**: Gleiche Farben für gleiche Metriktypen im gesamten Dashboard. Nicht kg/h und t/h mischen.
* **Regex-Overrides**: Nutze `.*\(Soll\)$`, um allen Sollwerten gleichzeitig dieselbe Farbe zuzuweisen.
* **Barrierefreiheit**: Nicht allein auf Farben verlassen. Textbeschriftungen und Linien helfen auch bei eingeschränktem Farbsehen.
* **Performance**: Übermäßig viele Overrides vermeiden. Regex-Overrides sind effizienter als viele einzelne By-Name-Overrides.
***
## Nächste Schritte
* [**Dashboard-Organisation**](/integrations/grafana/intermediate-features/01-dashboard-organization.md) - Zeilen, Ordner und Verlinkung
* [**Transformationen**](/integrations/grafana/intermediate-features/02-transformations.md) - Datenmanipulation
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.enlyze.com/integrations/grafana/visualisation-types/04-advanced-styling.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.