Skip to main content

Radar Chart Component

1. Introduction​

The Radar Chart component is a data visualization tool used to display multivariate data in a two-dimensional chart. It is particularly useful for comparing multiple datasets across several variables, represented as axes radiating from a central point. This component is ideal for applications that require users to analyze performance, skills, or other metrics across multiple categories.

image

Purpose and Use Cases​

  • Purpose: The Radar Chart component is used to visualize and compare data across multiple variables in a single chart.
  • Primary Use Cases:
    • Comparing performance metrics (e.g., Strength, Speed, Stamina).
    • Visualizing skill sets or attributes for individuals or groups.
    • Analyzing data trends across multiple categories.

Benefits​

  • Comprehensive Visualization: Displays multiple variables in a single chart for easy comparison.
  • Customizable: Offers extensive styling options for axes, datasets, and chart positioning.
  • Responsive Design: Adapts seamlessly to different screen sizes and devices.
  • User-Friendly: Enhances the user experience by presenting data in a visually appealing and intuitive format.

2. Properties​

The Radar Chart component comes with several configurable properties to suit different use cases. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

Title​

  • Description: The title displayed above the chart.
  • Purpose: Provides context for the chart's data.
  • Required/Optional: Optional

Indicators​

  • Description: An array of semicolon-separated values that determine the axes of the radar chart.
  • Purpose: Defines the variables or categories represented on the chart.
  • Default: Strength;Agility;Speed;Stamina
  • Required/Optional: Optional

Data Sources​

  • Description: Represents the datasets to be displayed on the radar chart.
  • Purpose: Each dataset adds a line to the chart, representing a unique set of data.
  • Attributes for Each Dataset:
    • Code: A unique identifier for the dataset.
    • Name: The name of the dataset (e.g., "Player 1", "Team A").
    • Values: A semicolon-separated array of numbers, where the length matches the number of indicators.
    • Cross: A button to delete the dataset from the chart.
  • Additional Configuration:
    • + Add Dataset Button: Allows users to add extra datasets to the chart.

3. Style​

The Radar Chart component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the dimensions of the chart.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the chart (default: 0).
  • Fixed Position: Locks the chart's position on the screen (default: OFF).
  • Hidden: Hides the chart from view (default: OFF).

Legend​

  • Visible:
    • Description: Determines whether the legend is displayed.
    • Default: ON
  • Orientation:
    • Description: Defines the layout of the legend.
    • Options: Horizontal (default), Vertical.
  • Position:
    • Left: Auto, left, center, right.
    • Top: Auto, top, middle, bottom.

Radar​

  • Center X:
    • Description: The horizontal position of the radar chart's center.
    • Default: 50 (0 is left, 100 is right).
  • Center Y:
    • Description: The vertical position of the radar chart's center.
    • Default: 50 (0 is bottom, 100 is top).
  • Radius:
    • Description: The radius of the radar chart.
    • Default: 80

For Each Dataset​

  • Line Color:
    • Description: The color of the line, defined using a hexadecimal color code.
    • Picker: Allows users to select a color visually.
  • Fill Area:
    • Description: Determines whether the area under the line is filled.
    • Default: OFF

4. Actions​

The Radar Chart component does not currently support any actions, as it is a static visualization tool.

5. Best Practices for UI/UX​

When and Why to Use​

  • Use the Radar Chart component to compare multiple datasets across several variables.
  • Ideal for applications that require users to analyze performance, skills, or other metrics.

Effective Scenarios​

  • Desktop: Use for dashboards or reports where detailed data visualization is required.
  • Tablet/Smartphone: Ensure the chart is responsive and legible on smaller screens.

Tips for Optimal Use​

  • Limit the number of datasets to avoid cluttering the chart.
  • Use contrasting colors for datasets to improve readability.
  • Position the legend effectively to avoid overlapping with the chart.
  • Ensure the number of values in each dataset matches the number of indicators.

6. Security Considerations​

Potential Risks​

  • External Resources: If the chart's data or styling is loaded from external sources, ensure they are trustworthy.

Best Practices​

  • Use secure HTTPS connections for any external resources.
  • Validate and sanitize all input data to prevent injection attacks.
  • Test the chart's responsiveness and behavior across different devices and screen sizes.