--- title: "Chart Circle" slug: "chart-circle" category: "Mini Widgets" hosts: "vue" --- # Chart Circle ## AI Defaults (read first) - **Function name**: `arcCustomChartCircle`. - **value**: Percentage (0–100), as number. - **size**: Circle diameter, e.g. `"120px"`. - **strokeWidth**: Ring thickness, e.g. `"10"`. - **color**: Fill color for the progress arc. - **backgroundColor**: Background ring color. - **No uniqueId needed** for display-only charts. # arcCustomChartCircle ![](https://framerusercontent.com/images/n9PTr1k2xJeCKvO0ro0nydihE0s.png) Das Widget `arcCustomChartCircle` ermöglicht die Visualisierung von Kreisdiagrammen (Pie- und Donut-Charts) direkt in deiner Ninox-Datenbank. Ob als Übersicht über Lagerbestände, Verteilungen, Auslastungen oder Projektanteile – dieses Widget bringt deine Daten in ansprechender, interaktiver Form auf die Oberfläche. Dank flexibler Parameter lässt sich das Design des Charts präzise anpassen: Farben, Größen, Legenden, zentrale Beschriftung, Abstand zwischen Segmenten und vieles mehr. Du kannst mehrere Charts gleichzeitig darstellen – mit jeweils eigener Konfiguration, ohne dass sie sich gegenseitig beeinflussen. **Use Cases:** - Lagerkapazitäten & Auslastungen visualisieren - Projektanteile oder Auftragsverteilungen zeigen - Vergleich von Soll-/Ist-Werten in grafischer Form - Dynamische Dashboards mit mehreren Kreisdiagrammen aufbauen Das Widget funktioniert sowohl eingebettet in andere Komponenten als auch als eigenständiges Element. Dank der `uniqueId` bleibt jede Instanz klar unterscheidbar. ## uniqueId Die `uniqueId` ist ein Pflichtfeld und sorgt dafür, dass jedes Diagramm eindeutig auf deiner Oberfläche erkannt wird. Das ist besonders wichtig, wenn du mehrere `arcCustomChartCircle`-Widgets gleichzeitig anzeigst – nur so bleiben Layout und Farben getrennt und überschreiben sich nicht gegenseitig. 💡 Tipp: Verwende eine Kombination aus statischem Text und einem eindeutigen Feld (z. B. `Nr`), um die ID automatisch pro Datensatz zu erzeugen. ```javascript uniqueId: Nr, // Ninox-Feld uniqueId: "Aufgabe Beschreibung", // Text in " ``` ## embedded Der Parameter `embedded` steuert, ob das Widget innerhalb eines anderen Widgets eingebettet ist oder eigenständig auf der Seite steht. In der Regel musst du nichts ändern, denn `embedded` ist standardmäßig auf `true` gesetzt. ```javascript embedded: false // wenn das Widget NICHT eingebettet in andere Widgets ist embedded: true // default ``` ## width Mit `width` bestimmst du die Breite des äußeren Containers des Diagramms. Dieser Container umschließt das Donut- oder Kreisdiagramm sowie ggf. die Legende. Du kannst jede gültige CSS-Weite angeben: - Prozentangaben (`"100%"`) - feste Pixelwerte (`"300px"`) - automatische Größe (`"auto"`) Standardwert: Wenn kein Wert angegeben ist, wird automatisch `"100%"` verwendet. ```javascript width: "auto" // passt sich automatisch an width: "100%" // in px oder Prozent ``` ## height Mit `height` legst du die Höhe des Widget-Containers fest. Dieser Wert beeinflusst nicht nur die Fläche, in der das Diagramm gerendert wird, sondern auch die vertikale Ausrichtung (z. B. der Legende). Du kannst alle gängigen CSS-Höhenwerte verwenden: - `"auto"` → automatische Höhe basierend auf Inhalt (Standard) - `"300px"` → feste Höhe - `"100%"` → gesamte Höhe des Eltern-Elements Standardwert: Ohne Angabe wird `"auto"` gesetzt. ```javascript height: "auto" // passt sich automatisch an height: "200px" // in px oder Prozent ``` ⚠️ Wenn du `height` auf einen fixen Wert setzt, achte darauf, dass dein Chart (und ggf. die Legende) genug Platz zum Anzeigen hat. ## type Mit dem Parameter `type` bestimmst du, ob dein Diagramm als Donut oder als klassisches Kreisdiagramm (Pie Chart) dargestellt wird. Optionen: - `"donut"` → Ringförmige Darstellung mit optionaler Mittelbeschriftung - `"pie"` → Vollflächiges Kreisdiagramm ohne Loch in der Mitte ```javascript type: "donut" // stellt das Chart als Donut dar type: "pie" // stellt das Chart als Pie dar type: "" // default: pie ``` 💡 Hinweis: Nur bei `type: "donut"` werden die Parameter `thickness` und `center` berücksichtigt. Ein `pie`-Chart ignoriert diese Einstellungen und zeigt einen einfachen Kreis. ## size Der Parameter `size` definiert die Gesamtgröße des Charts (Breite und Höhe des SVG-Kreises in einem). Dies wirkt sich direkt auf die Darstellung des Kreises oder Donuts aus – unabhängig vom äußeren `width`-/`height`-Container. - Du kannst alle gängigen CSS-Größen verwenden (z. B. `"160px"` oder `"100%"`), wobei Pixelangaben empfohlen werden. - Standardwert: Wenn kein Wert angegeben ist, wird automatisch `"160px"` verwendet. ```javascript size: "160px" size: "" // default: 160px ``` ## thickness Der Parameter `thickness` definiert die Dicke des Rings bei einem Donut-Chart (`type: "donut"`). Je höher der Wert, desto schmaler das Loch in der Mitte. Dieser Parameter hat nur eine Wirkung bei `type: "donut"` – bei `type: "pie"` wird er ignoriert. - Einheit: in px angeben z. B. `"30px"` oder `"50px"` - Standardverhalten: Wenn kein Wert gesetzt wird, berechnet das Widget die Ringdicke automatisch auf Basis von `size`. ```javascript thickness: "30px" thickness: "" // default: 120px ``` ⚠️ Zu große Werte können den Ring visuell zu schmal oder sogar unsichtbar machen – ideal sind Werte zwischen 20–60 px. ## gap Mit `gap` bestimmst du den **Abstand zwischen den einzelnen Segmenten** im Chart – sowohl bei `pie` als auch bei `donut`. Ein größerer Wert erzeugt mehr visuelle Trennung zwischen den Bereichen. Der Abstand wird **in Pixeln** angegeben, intern aber auf den **Winkel** umgerechnet (abhängig vom Radius). - **Einheit: **Nur Zahlenwerte in px, z. B. `"2px"` oder `"8px"` - **Standardwert: **Wenn kein Wert gesetzt ist, beträgt der Abstand `0px`, also **kein sichtbarer Abstand**. ```javascript gap: "5px" gap: "" // default: 0px ``` 💡 **Tipp:** Ein kleiner Abstand (2–6px) kann helfen, Segmente besser unterscheidbar zu machen – besonders bei ähnlichen Farben. ## legend settings Mit der `legend`-Gruppe kannst du steuern, **ob und wie die Legende angezeigt wird**, und deren **Position, Schriftart, Farben und Abstände** festlegen. Die Legende zeigt kleine Farb-Dots und einen Text (je nach Einstellung `title`, `value` oder `percent`). ```javascript legend: { position: "right", // left, right, bottom, top // default: right label: "title", // Bezeichnung fontSize: "12px", // Schriftgröße fontWeight: "normal", // Schriftstärke fontColor: "#333", // Schriftfarbe gap: "6px" // Abstand zwischen den Legenden Items } ``` **Einzelne Einstellungen:**
Paramter **Beschreibung**
visible Zeigt die Legende an (`true`) oder blendet sie aus (`false`).
position Platzierung: `"left"`, `"right"`, `"top"` oder `"bottom"`
label Was soll in der Legende stehen? Ninox Felder referenzieren oder eigene Textbezeichnungen wählen.
fontSize Schriftgröße der Labels, z. B. `"12px"`
fontWeight Schriftstärke: `"normal"`, `"bold"`, `"500"` usw.
fontColor Farbe des Legendentextes, z. B. `"#333"`
gap Abstand zwischen den Einträgen, z. B. `"6px"`
## center Settings Mit der `center`-Gruppe kannst du einen Titel und Untertitel in der Mitte des Donut-Charts anzeigen lassen. Diese Anzeige ist nur bei `type: "donut"` sichtbar, da bei `pie` kein Platz in der Mitte vorhanden ist. Ideal für Werte wie Gesamtzahl, Prozentsumme, Statusangaben o. ä. **Einzelne Einstellungen:**
Paramter **Beschreibung**
title Haupttext in der Mitte (z. B. „Gesamt“)
subtitle Untertitel direkt darunter (z. B. eine Zahl oder Status)
fontSize Größe beider Texte (gilt für beide), z. B. `"18px"`
fontColor Farbe der Schrift, z. B. `"#444"`
```javascript center: { title: "Gesamt", // title im Center des Widgets subtitle: "2000", // subtitle im Center des Widgets fontSize: "18px", // Schriftgröße im Center des Widgets fontColor: "#444", // Schriffarbe im Center des Widgets }, ``` ## items Die items-Liste enthält alle **einzelnen Segmente deines Kreisdiagramms**. Jedes Item definiert: - **Titel** für die Legende - **Wert**, der die Segmentgröße bestimmt - **Farbe**, in der das Segment dargestellt wird (und der Dot in der Legende) Die items können entweder statisch, einzeln als items definiert werden oder du greifst auf eine dynamische Liste (Tabelle in Ninox) zurück, aus dem sich die Werte, die du angibst gezogen werden. ```javascript items: [{ title: "Belegung", // Beschriftung in der Legende value: sum(Lager.Belegung), // Wert, der die Größe des Segments bestimmt color: "#3e6fff", // Farbe, in der das Segment dargestellt werden soll (sowie der Dot in der Legende) }, { title: "Gesamtkapazität", value: sum (Lager.Frei+Lager.Belegung), color: "#d3d5de", }] ``` ```javascript items: list_Lager.[{ title: Lagername, value: sum_lagerbestand, fontSize: "12px", color: helper_hex_code, } ``` **🧠 Wichtig:** - Alle Werte zusammen ergeben die Gesamtfläche (`value` wird relativ zum Gesamtwert berechnet). - Farben sollten kontrastreich gewählt werden – vor allem, wenn kein `gap` gesetzt ist. - Die Reihenfolge der Items entspricht der Reihenfolge im Chart (beginnend bei 12 Uhr, im Uhrzeigersinn).