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.