Input Parameters

1. JSONData (Text)

• Description: Hierarchical JSON structure containing nodes, values, colors (in HEX format), and children.
• Expected Structure:

{
  "name": "string",
  "value": number,
  "color": "#RRGGBB (optional)",
  "children": [
    {
      "name": "string",
      "value": number,
      "color": "#RRGGBB (optional)",
      "children": []
    }
  ]
}

• Example:

{
  "name": "Fruits",
  "value": 100,
  "color": "#FFF",
  "children": [
    {
      "name": "Citrus",
      "value": 40,
      "color": "#FFB74D",
      "children": [
        {
          "name": "Oranges",
          "value": 20,
          "color": "#FFA726",
          "children": [
            { "name": "Valencia", "value": 10 },
            { "name": "Navel", "value": 10, "color": "#FF9800" }
          ]
        },
        { "name": "Lemons", "value": 20, "color": "#FFEB3B" }
      ]
    },
    {
      "name": "Berries",
      "value": 60,
      "color": "#E91E63",
      "children": [
        { "name": "Strawberries", "value": 30, "color": "#D81B60" },
        {
          "name": "Blueberries",
          "value": 30,
          "color": "#3F51B5",
          "children": [
            { "name": "Wild", "value": 15 },
            { "name": "Farmed", "value": 15, "color": "#303F9F" }
          ]
        }
      ]
    }
  ]
}

2. Width (Integer)

Description: Width of the diagram in pixels.

Default: 500

Example: 600

3. Height (Integer)

Description: Height of the diagram in pixels.

Default: 500

Example: 600

4. Margin (Integer)

Description: Margin around the diagram in pixels.

Default: 20

Example: 40

How It Works

Developer passes the JSONData input containing hierarchical values.

The component parses the JSON and constructs the sunburst layout.

Each node’s size is proportional to its value.

Colors must be provided in HEX format. If not provided, the component will automatically map default HEX colors.

The diagram is rendered inside the specified Width, Height, and Margin.

Example Usage

Drag and drop the Sun Burst Diagram component into your screen.

Pass the required inputs:

JSONData → hierarchical data as shown above.

Width → 500

Height → 500

Margin → 20

Publish and preview to see the sunburst visualization.

Notes

color must be provided as a HEX value (e.g., #FF9800).

If color is not provided, the component applies an automatic HEX-based color mapping.

Supports unlimited hierarchy levels, but readability may reduce with very deep nesting.

Works best with datasets where values are proportional and sum up logically.