Radar chart

Chart style

A radar chart visually compares multidimensional category data. It uses an angle axis and a radius axis to display categories and values. You can customize the text, graphic, and animation styles.

Configuration panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 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.

• Graphic

  Parameter	Description
  Chart Margin	Click the icon to show or hide the chart margin. If you turn on the switch, you can configure the distance between the radar area and the top, bottom, left, and right borders of the widget. The default unit is px.
  Radar Radius	The radius of the radar area, in percentage.
  Radar Color	The color of the radar area. For more information, see Color mapper. You can configure the mapping color styles for different radar areas.
  Opacity	The opacity of the radar area, in percentage. A larger value indicates higher opacity.
  Radar Outline	The outline style of the radar area, including the outline type and thickness. Note If you set the line type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.
  Marker Symbol	The style of the marker symbols at the border points of the radar, including the shape, size, outline type, and outline thickness. Click the icon to show or hide the marker symbol style. Note If you set the marker outline type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.
  Border Color	Turn on the switch to customize the color of the radar border. If you turn off the switch, the border color follows the radar area color by default.
  Symbol Color	Turn on the switch to customize the color of the marker symbols at the radar border. If you turn off the switch, the marker symbol color follows the radar area color by default.
  Symbol Outline	Turn on the switch to customize the color of the marker symbol outline. If you turn off the switch, the marker symbol outline color follows the radar area color by default.
  Radar Label	The style of the radar labels. Click the icon to show or hide the radar label configurations. Label Field: The content of the label, which must correspond to a field in the data panel. By default, the content of the r field is used. Number Format: The number format for the label. Options include Default, 11 (Integer), 11.1 (Floating-point), 11.11 (Floating-point), 11% (Percentage), 11.1% (Percentage), 1,111 (Thousands separator), and 1,111.1 (Thousands separator). For more information about data display formats, see Data display formats. This parameter is displayed only when you set Label Field to r. Prefix and Suffix: The prefix and suffix for the radar chart label. Relative Offset: The offset of the radar label relative to the radar area, in pixels. Text Style: The text style of the radar label, including the font, weight, size, and color. Text Outline: The text outline style of the radar label, including the outline thickness and color.

• Axes: Specifies the styles of the radius axis and angle axis of the widget.

  • Radius Axis

    • Show Radius Axis: Turn on this switch to show the radius axis. Turn it off to hide the axis.

    • Display Range: The display range of the minimum and maximum data values on the radius axis.

      Parameter	Description
      Minimum	The minimum value of the radius axis. You can enter a custom value or select Data Minimum to use the minimum value from the data.
      Maximum	The maximum value of the radius axis. You can enter a custom value or select Data Maximum to use the maximum value from the data.

      Note

      By default, the minimum and maximum values are determined by the data. If these values do not meet your needs, you can enter custom values.

    • Axis Line: The style of the radius axis line. You can click the icon to show or hide the axis line.

      Note

      If you set the line type to Dashed or Dotted, you can also configure the dash length and dash spacing.

    • Axis Title: The style of the radius axis title. You can click the icon to show or hide the axis title.

      Parameter	Description
      Display Title	The text content of the radius axis title.
      Display Method	The display method of the radius axis title, including the angle and offset.
      Text Style	The font, weight, size, and color of the radius axis title text.

    • Tick Line: The style of the radius axis tick lines, including their length, thickness, and color. You can click the icon to show or hide the tick lines.

    • Axis Label: The style of the radius axis labels. You can click the icon to show or hide the axis labels.

      Parameter	Description
      Display Format	The number display format for the radius axis labels. Options include Default, 11 (Integer), 11.1 (Floating-point), 11.11 (Floating-point), 11% (Percentage), 11.1% (Percentage), 1,111 (Thousands separator), and 1,111.1 (Thousands separator). For more information about data display formats, see Data display formats.
      Label Display	The display style of the labels, including the number of radius axis labels, prefix and suffix, angle, offset, and alignment.
      Text Style	The font, weight, size, and color of the radius axis label text.

    • Gridline: The style of the radius axis gridlines. You can click the icon to show or hide the gridlines.

      Parameter	Description
      Display Form	The display form of the gridlines. Options include Curve and Polyline.
      Grid Background Color	The color of the bottom of the gridline.
      Line Style	The style of the gridlines, including the type, thickness, and color. Note If you set the line type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.

  • Angle Axis

    • Show Angle Axis: Turn on this switch to show the angle axis. Turn it off to hide the axis.

    • Data Type: The data type of the angle axis. The options are Numeric, Category, and Time.

    • Display Range: The minimum and maximum values to display on the angle axis. This parameter is available only when you set Data Type to Numeric.

      Parameter	Description
      Minimum	The minimum value of the angle axis. You can enter a custom value or select Data Minimum to use the minimum value from the data.
      Maximum	The maximum value of the angle axis. You can enter a custom value or select Data Maximum to use the maximum value from the data.

      Note

      By default, the minimum and maximum values are determined by the data. If these values do not meet your needs, you can enter custom values.

    • Angle Range: The range of the start and end angles of the angle axis, in degrees (°). You can click the icon to show or hide the angle range.

    • Axis Line: The style of the angle axis line, including its shape, thickness, and style. You can click the icon to show or hide the angle axis line.

      Note

      If you set the line type to Dashed or Dotted, you can also configure the dash length and the spacing between dashes.

    • Axis Title: The style of the angle axis title. You can click the icon to show or hide the axis title.

      Parameter	Description
      Display Title	The text content of the angle axis title.
      Display Method	The display method of the angle axis title, including the angle and offset.
      Text Style	The font, weight, size, and color of the angle axis title text.

    • Tick Line: The style of the angle axis tick lines, including their length, thickness, and color. You can click the icon to show or hide the tick lines.

    • Axis Label: The style of the angle axis labels. You can click the icon to show or hide the axis labels.

      Parameter	Description
      Display Format	The number display format for the angle axis labels. Options include Default, 11 (Integer), 11.1 (Floating-point), 11.11 (Floating-point), 11% (Percentage), 11.1% (Percentage), 1,111 (Thousands separator), and 1,111.1 (Thousands separator). For more information about data display formats, see Data display formats.
      Label Display	The display style of the labels, including the prefix and suffix, angle, offset, and alignment of the angle axis labels.
      Text Style	The font, weight, size, and color of the angle axis label text.

    • Gridline: The style of the angle axis gridlines, including the line style, thickness, color, length, and spacing. You can click the icon to show or hide the angle axis gridlines.

      • Animation: The animation effect for the widget.

        Parameter	Description
        Enable Animation	Turn on the switch to configure the animation effect for the radar chart.
        Animation Effect	The animation effect type. The system provides multiple common animation effects, such as Fade, Slide In, and Scale In. This parameter is available only after you enable animation.
        Animation Duration	The duration of the animation effect, in milliseconds (ms). This parameter is available only after you enable animation.

• Interaction: The interaction effects for the widget.

  • Tooltip: The style of the tooltip that appears when you move the mouse pointer over or click a radar area on the preview or publish page. You can click the icon to enable or disable the tooltip.

    Parameter	Description
    Mode
    Trigger Method	The method to trigger the tooltip. Options include Hover and Click.
    Display Position	The position of the tooltip. Options include Top, Bottom, Left, and Right. Note When the mouse pointer is close to the chart border, the tooltip position adapts automatically.
    Title Spacing	The spacing between titles in the tooltip, in pixels.
    Title Text	The style of the title text in the tooltip, including the font, weight, size, and color.
    Content Display	Click the or icon on the right to add or delete a content display series for the tooltip. Click the or icon to arrange multiple content display series. Click the icon to copy the configurations of the current series and add a new series with the same configurations. Field Name: The name of the field for the tooltip content. This must match a field in the data panel. Display Name: The display name for the tooltip content. Suffix: The suffix for the tooltip content.
    Content Spacing	The spacing between content text in the tooltip, in pixels.
    Content Text	The style of the content text in the tooltip, including the font, weight, size, and color.
    Popup Background	The background style of the tooltip popup. Background Margin: The horizontal and vertical margin values for the tooltip background. Background Color: The background color of the tooltip. Border Style: The style of the tooltip border, including the border line type, border radius, line width, and border color.
    Axis Pointer	The style of the axis pointer line for the tooltip, including the line type, thickness, and color. Click the icon to enable or disable the axis pointer. Note If you set the line type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.

  • Selected State: The style of a radar area when it is selected. You can click the icon to enable or disable the selected state.

    Parameter	Description
    Trigger Method	The method to trigger the selection of a radar area. Options include Hover and Click.
    Selection Method	The method to select radar areas. Options include Single-select and Multi-select.
    Selected Color	The color of the radar area in the selected state.
    Selected Outline	The style of the outline for the selected radar area, including the line type, thickness, and color. Note If you set the line type to Dashed or Dotted, you can also configure the dash length and the distance between dashes.

• Legend: The style of the widget legend.

  Parameter	Description
  Enable Legend	Turn on the switch to configure the legend style. Turn off the switch to disable it.
  Legend Position	The position of the legend relative to the widget's origin. Options include Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, and Right Bottom.
  Text Style	The font, weight, size, and color of the legend text.
  Chart Spacing	The horizontal and vertical spacing between the legend and the chart.
  Category Legend	The style of the category legend. Legend Marker: The shape and size of the legend markers. Legend Spacing: The horizontal and vertical distance between different category legend items. Maximum Width: The maximum width of the legend, in pixels. Allow Pagination: Turn on the switch to enable legend pagination. You can configure the styles for page numbers and arrows when the number of legend items exceeds the display limit. If you turn off the switch, all legend items are displayed on a single page. Maximum Rows: The maximum number of rows for the legend. If the number of rows exceeds this value, the legend is paginated. Page Number Style: The style of the page numbers for pagination, including the font, weight, size, and color. Arrow Style: The size, default color, and disabled color of the arrows for pagination.

• Conditions: The conditional styles for the chart.

  Conditional Style: You can click the or icon to add or delete a conditional style. You can click the or icon to arrange multiple conditional styles. You can click the icon to copy the configurations of the current conditional style and create a new style with the same configurations. For more information about the configurations, see Use a condition tree.

  • Radar Color: Turn on this switch to configure the color of the radar area for the series that meets the condition. If you turn off the switch, you cannot configure the radar area color for the series.

  • Radar Outline: Turn on this switch to configure the outline style of the radar for the series that meets the condition, including the line type, thickness, and color. If you turn off the switch, you cannot configure the radar outline style for the series.

    Note

    If you set the line type to Dashed or Dotted, you can also configure the dash length and spacing.

  • Marker Symbol: Turn on this switch to configure the style of the marker symbols at the radar border points for the series that meets the condition, including the shape, size, and color. If you turn off the switch, you cannot configure the marker symbol style.

  • Marker Outline: Turn on this switch to configure the outline style of the markers for the series that meets the condition, including the line type, thickness, and color. If you turn off the switch, you cannot configure the marker outline style.

    Note

    If you set the line type to Dashed or Dotted, you can also configure the dash length and the gap between dashes.

Data panel (Default mode)

Field configuration

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Data panel (Analysis mode)

For more information about the operations in the BI analysis data configuration panel, see Features of the data panel in BI analysis mode.

Field configuration

Interaction panel

Interactions

Blueprint editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the blueprint editor configuration page, click the Radar Chart widget in the import node bar. The following figure shows the configuration parameters for the chart.

   • Events

     Event	Description
     When the radar chart API request completes	This event is triggered after a data API request succeeds and the data is processed by a filter, returning the processed data in JSON format. For a data example, see the Data Response section on the Data tab of the configuration panel in the canvas editor.
     When the Radar Chart API Request Fails	This event is triggered when a data API request fails (due to network issues or API errors). It processes the data with a filter and returns the result in JSON format. For a data example, see the Data Response section on the Data tab of the configuration panel in the canvas editor.
     When a Data Item Changes	This event is triggered when the selected data item of the radar chart changes. The event returns the data item that corresponds to the radar area.
     When a Legend Item Is Clicked	This event is triggered when a legend item of the radar chart is clicked. The event returns the data item that corresponds to the legend item.

   • Actions

     Action	Description
     Request radar chart API	Requests server-side data again. Data from input data processing nodes or layer nodes is used as parameters. For example, if the API data source for the radar chart is set to https://api.test and the data passed to the Request radar chart API action is { id: '1'}, the final API request is https://api.test?id=1.
     Import radar chart data	Processes data according to the component's drawing format, then imports the data to redraw the component. This action does not request server-side data again. For a data example, see the Data Response area on the Data tab in the component's configuration panel in the canvas editor.
     Highlight	Highlights the element that corresponds to the data item. The following is a data example. return { "data": { "x": data.x, // The data item to highlight "colorField": data.colorField }, "style": { "fillStyle": "#f00" // Fill color } }
     Remove highlight	Removes the highlight. No parameters are required.
     Update component configuration	Dynamically updates the style configuration of the component. In the component's Configuration panel, click Copy Configuration to Clipboard to get the component configuration data. Then, in the data processing node of the blueprint editor, change the field values for the styles as needed.
     Show	Shows the component. The following is a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. The following is a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the component's visibility. The following is a data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the component to a specified position. The following is a data example. return{ // Movement method. Absolute positioning: to. Relative positioning: by. Default value: to. "positionType": "to", // The specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation curve. Optional values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }