arcCustomChartCircle

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.

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.

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.

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.

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

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.

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.

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.

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).

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:

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:

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.

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",
}]

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).