arcCustomChartCircle

The widget arcCustomChartCircle enables the visualization of pie charts (Pie and Donut Charts) directly in your Ninox database. Whether as an overview of inventory levels, distributions, utilizations or project shares – this widget brings your data to the surface in an appealing, interactive form.

Thanks to flexible parameters, the design of the chart can be precisely adjusted: colors, sizes, legends, central labeling, spacing between segments, and much more. You can display multiple charts simultaneously – each with its own configuration, without them affecting each other.

Use Cases:

• Visualize inventory capacities & utilizations

• Show project shares or order distributions

• Comparison of target/actual values in graphic form

• Build dynamic dashboards with multiple pie charts

The widget works both embedded in other components and as a standalone element. Thanks to the uniqueId, each instance remains clearly distinguishable.

uniqueId

The uniqueId is a required field and ensures that each chart is uniquely recognized on your surface. This is particularly important when displaying multiple arcCustomChartCircle widgets simultaneously – this way, layout and colors remain separate and do not overwrite each other.

💡 Tip: Use a combination of static text and a unique field (e.g. Nr) to automatically generate the ID per record.

uniqueId: Nr, // Ninox-Feld
uniqueId: "Aufgabe Beschreibung", // Text in ""

embedded

The embedded parameter controls whether the widget is embedded within another widget or stands independently on the page. Generally, you won’t need to change anything, as embedded is set to true by default.

embedded: false // wenn das Widget NICHT eingebettet in andere Widgets ist
embedded: true // default

width

With width, you determine the width of the outer container of the chart. This container encloses the donut or pie chart and possibly the legend.

You can specify any valid CSS width:

• Percentage values ("100%")

• Fixed pixel values ("300px")

• Automatic size ("auto")

Default value: If no value is specified, "100%" is used automatically.

width: "auto" // passt sich automatisch an
width: "100%" // in px oder Prozent

height

With height, you set the height of the widget container. This value not only influences the area in which the chart is rendered, but also the vertical alignment (e.g., of the legend).

You can use all common CSS height values:

• "auto" → automatic height based on content (default)

• "300px" → fixed height

• "100%" → full height of the parent element

Default value: If no value is specified, "auto" is set.

height: "auto" // passt sich automatisch an
height: "200px" // in px oder Prozent

⚠️ If you set height to a fixed value, make sure that your chart (and possibly the legend) has enough space to display.

type

With the type parameter, you determine whether your chart is displayed as a donut or as a classic pie chart.

Options:

• "donut" → Ring-shaped display with optional center label

• "pie" → Solid pie chart with no hole in the middle

type: "donut" // stellt das Chart als Donut dar
type: "pie" // stellt das Chart als Pie dar
type: "" // default: pie

💡 Note: Only with type: "donut" are the parameters thickness and center considered.
A pie chart ignores these settings and shows a simple circle.

size

The size parameter defines the overall size of the chart (width and height of the SVG circle combined). This directly affects the representation of the circle or donut – regardless of the outer width/height container.

• You can use all common CSS sizes (e.g., "160px" or "100%"), with pixel values being recommended.

• Default value: If no value is specified, "160px" is used automatically.

size: "160px"
size: "" // default: 160px

thickness

The thickness parameter defines the thickness of the ring in a donut chart (type: "donut").
The higher the value, the narrower the hole in the center.

This parameter only has an effect with type: "donut" – with type: "pie", it is ignored.

• Unit: specify in px, e.g., "30px" or "50px"

• Default behavior: If no value is set, the widget automatically calculates the ring thickness based on size.

thickness: "30px"
thickness: "" // default: 120px

⚠️ Values that are too large can make the ring visually too thin or even invisible – ideal values are between 20–60 px.

gap

With gap, you determine the spacing between individual segments in the chart – for both pie and donut.

A larger value creates more visual separation between the areas. The gap is specified in pixels but is internally converted to angles (depending on the radius).

• Unit: Only numeric values in px, e.g., "2px" or "8px"

• Default value: If no value is set, the gap is 0px, meaning no visible gap.

gap: "5px"
gap: "" // default: 0px

💡 Tip: A small gap (2–6px) can help make segments more distinguishable – especially with similar colors.

legend settings

With the legend group, you can control whether and how the legend is displayed, as well as set its position, font, colors, and spacing. The legend displays small color dots and text (depending on the setting title, value or 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
}

Individual Settings:

center Settings

With the center group, you can display a title and subtitle in the middle of the donut chart. This display is only visible with type: "donut", as there is no space in the middle with pie.

Ideal for values such as totals, percentages, status indications, etc.

Individual Settings:

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

The items list contains all individual segments of your pie chart. Each item defines:

• Title for the legend

• Value that determines the segment size

• Color in which the segment is displayed (and the dot in the legend)

The items can either be defined statically, individually as items, or you can refer to a dynamic list (table in Ninox) from which the values you specify are drawn.

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

🧠 Important:

• All values together result in the total area (value is calculated relative to the total value).

• Colors should be chosen with contrast in mind – especially if no gap is set.

• The order of the items corresponds to the order in the chart (starting at 12 o'clock, clockwise).