sunburst-charts

Chart style

A sunburst chart displays hierarchical data across multiple levels. Building on the proportional representation of a pie chart, it adds layers to show parent-child relationships. Sunburst charts are not suitable for datasets with too many categories, negative values, or zero values.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis coordinates of the widget. Unit: pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left edge of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the top edge of the canvas.

  • Rotate: the rotation angle of the widget around its center. Unit: degrees.

    • Enter the rotation angle directly in the spin box, or click the plus (+) or minus (-) sign to adjust the value.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Graphics

  Parameter	Description
  Chart Margins	Click the icon to show or hide chart margins. When enabled, you can set the distance between the chart area and the four edges of the widget. Unit: px by default.
  Rising Sun Color	The colors of the sectors in the sunburst chart. For more information, see Color mapper instructions.
  Decreased transparency	The degree to which the transparency of child sectors decreases progressively. Valid values: 0 to 1. A larger value produces lower transparency. Unit: α.
  Rising Sun Radius	Drag the sliders to set the inner and outer radius of the sunburst chart. Unit: %. When Automatically Calculate Parent Weight is turned on, the parent node weight is determined by its child elements. When the switch is turned off, the parent node weight is set independently.
  Stroke Style	The stroke style of the sunburst chart, including line type, line thickness, and line color. Note When the line type is set to dotted line or dotted line, you can also configure the dash length and the spacing between dashes.
  Sunrise	The glow effect of the sunburst chart. Click the icon to show or hide the glow settings. Emitting Color: Includes the following-sector switch and opacity. When following sector is turned off, the glow color can be set separately. Ambiguity Coefficient: the blur intensity of the glow effect. Valid values: 0 to 50. The larger the value, the fuzzier the luminous range between sunburst charts.
  Rising Sun Label	The label style for sectors in the sunburst chart. Click the icon to show or hide label settings. Label Field: The label content corresponds to the data field on the Data tab. Valid values: name, value, and name+value. Default value: value. name: When Label field is set to name, you can customize the prefix and suffix. You can also enable the ellipsis switch to truncate long text. value: When label field is set to value, you can customize the prefix, suffix, and numeric format. Multiple numeric display formats are supported. name+value: When label field is set to name+value, you can customize the prefixes and suffixes of both the name+value fields. You can also set the numeric format and configure multiple numeric display formats. Note When two label values are displayed, you can enable Fold to wrap the labels. Relative Offset: the vertical and horizontal offset of labels. Unit: pixels. Text Style: the label text style, including font style, weight, size, and color. Text Stroke: the text stroke style, including thickness and color.
  Map	The texture fill style for sectors. Click the icon to show or hide texture settings. Note The texture background does not support gradient colors. Type: the texture pattern type. Valid values: Point, Line, Square, and Image. Fill Style: the fill color of the texture. See color picker instructions for details. Stroke Style: the stroke style of the texture. See color picker instructions for details. This parameter is displayed when Type is set to Dot or Square. Extra Style: Additional texture settings, including Graphics Size, Graphics Spacing, Line Spacing, Rotation Angle, and Stagger. When Type is set to Image, you can set Image Address, Tile Width, Tile Height, Tile Spacing, and Rotation Angle.

• Animation: the animation effect of the sunburst chart.

  Parameter	Description
  Animation Switch	Turn on the switch to enable the animation effect for the sunburst chart.
  Animation	The animation type. Options include Horizontal Growth, Vertical Growth, Zoom and Fading, and Flipping. This parameter is available only after you turn on Animation.
  Animation Duration	The duration of the animation effect. Unit: ms. This parameter is available only after you turn on Animation.

• Interactive: the interactive effects of the sunburst chart widget.

  • dialog box: The style of the dialog box that appears when you move the pointer over or click a sunburst tile on the Preview or Publish page. Click the icon to turn the dialog box on or off.

    Parameter	Description
    Trigger	The trigger method for the dialog box. Valid values: Hover and Click.
    Title Spacing	The spacing between the dialog box title and other content. Unit: px.
    dialog box Title	The text content of the dialog box title. Click the icon to show or hide the title.
    Title Style	The title text style, including font style, weight, size, and color.
    Content Display	Click the or icon to add or delete a content series. Click the or icon to reorder content series. Click the icon to duplicate the selected content series. Field Name: the field name in the dialog box. The name must match a field in the data panel. Display Name: the display name of the dialog box content. Pre-Suffix: the prefix and suffix of the dialog box content.
    Numeric Format	The numeric format for dialog box content. This setting applies only to numeric values in the value field.
    Content Spacing	The spacing between content items in the dialog box. Unit: px.
    Content Text	The content text style in the dialog box, including font style, weight, size, and color.
    Pop-up background	The background style of the dialog box popup. Background Margin: the horizontal and vertical margins of the dialog box background. Background Color: The background color of the dialog box. Border Style: the border style of the dialog box, including line type, border radius, line width, and border color.

  • Selected: the selected state of sunburst sectors. Click the icon to enable or disable the selected state.

    Parameter	Description
    Trigger	The trigger method for selecting a sunburst sector. Valid values: Hover and Click.
    Select Method	The selection mode. Valid values: Single and Multiple. In Single mode, the click event emits one data item as an object and only one sector is highlighted. In Multiple mode, the click event emits multiple data items as an array and highlights multiple sectors.
    Transparency	The transparency of the selected sunburst sector. Valid values: 0 to 1.
    Rising Sun Color	The color of the sunburst sector when selected. Click the icon to enable or disable the selected color.
    Rising Sun Stroke	The stroke style of the selected sunburst sector, including line type, thickness, and color. Note When the line type is set to dotted line or dotted line, you can also configure the dash length and the spacing between dashes.

• Condition: the conditional styling for data items.

  Conditional Style: Click the or icon to add or delete a conditional style. Click the or icon to reorder conditional styles. Click the icon to duplicate the current conditional style. For more information, see Use condition trees.

  • Sunburst Color: When the switch is turned on, the sector color for the current conditional style series can be configured. When the switch is turned off, the sector color cannot be configured.

  • Stroke Style: When the switch is turned on, the stroke style for the current conditional style series can be configured. When the switch is turned off, the stroke style cannot be configured.

Data Sources panel

Advanced Panel

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the sunrise chart interface request is completed	Triggered with the processed JSON data after a data interface request is returned and processed by a filter. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.
     When a data item is selected	Triggered when a sector in the sunburst chart is clicked, along with the corresponding data item.

   • Action

     Action	Description
     Import Sunrise Chart	Imports pre-processed data in the widget's drawing format for redrawing without re-requesting the server. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.
     Request a sunrise chart	Re-requests server data, using parameters passed from an upstream data processing node or layer node. For example, if the sunburst chart API data source is https://api.test and the data passed to Request Sunrise Chart Interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Highlight	The data item to highlight. Single highlight { 'name': 'Product' } Bulk Highlight [ { 'name': 'Product' }, { 'name': 'advantage', 'value': 10 } ] style: The highlight style, such as fillStyle, stroke, and opacity. If not specified, the default style is used. Reference data example { "data": {}, "style": {} }
     Reset selections	Clears the selected data of the widget. No parameters are required.
     Move	Moves the widget to a specified location. See the data example below. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Display	Shows or hides the widget. No parameters are required.
     Display	Shows the widget. See the data example below. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hides the widget. See the data example below. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data, then modify the style field for the data processing node in Blueprint Editor.