Overview

The Three Dimension Donut Chart is a reusable OutSystems component for rendering interactive and customizable 3D donut charts. It allows developers to visualize data using colored segments with extensive parametric control over the chart's geometry and appearance.

Features

• Add multiple data values with specified colors

• Fine-grained configuration of donut geometry (radii and height)

• 3D view controls (camera position)

• Lighting and ambiance settings (colors/intensity for ambient/directional lights)

• Customizable background color

Demo Screen UI Breakdown

1. Data Input

   • Data Value (type: number) - Enter numeric values for each donut chart segment

   • Color - Specify the color code for each data segment

   • Use Add Data to insert the combination into the chart

   • Clear List removes all data points

2. Chart Configuration

   • Inner Radius (type: number, default 1.5) - Controls the central hole's radius

   • Outer Radius (type: number, default 5) - Defines the overall size of the donut

   • Max Height (type: number, default 8) - Sets the thickness of the chart along the Z axis

3. 3D Camera Controls

   • Camera Position X/Y/Z (type: number) - Adjusts the viewing angle of the chart in the 3D space for better inspection and presentation

4. Lighting/Material Settings

   • Ambient Color (value: 16777215) - Set global ambient light color

   • Ambient Intensity (type: number, default 0.5) - Controls ambient light brightness

   • Directional Color (value: 16777215) - Set directional light color

   • Directional Intensity (type: number, default 0.8) - Controls directional light strength

   • Directional Position X/Y/Z (type: number, default 10) - Position the directional light source in 3D space

5. Background Styling

   • Background Color (value: 16777215) - Define the background color of the chart view