Spider Chart

The Spider Chart (also known as a Radar Chart) is a two-dimensional chart type used to plot values of each category along axes that radiate outward from a central point, resembling spokes of a wheel. Each axis represents a category, and data values are connected to form a polygon shape.

Spider charts are particularly useful for multivariate comparisons, allowing users to see strengths and weaknesses across categories at a glance.

Best Situations to Use

Use a Spider chart when:

  • You need to analyze performance areas in an organization.

  • Comparing allocated vs. actual spending across multiple departments.

  • Evaluating strengths and weaknesses across multiple metrics.

  • Displaying survey results, KPIs, or assessment outcomes.

Examples:

  • Comparing departmental budget vs. actual expenses.

  • Evaluating employee skill ratings across competencies.

  • Showing customer satisfaction ratings across service categories.

Variations

Spider charts can be configured in different styles:

  • Polygon Web with Fill – A polygon-shaped web filled with data values.

  • Circle Web with Stroke – A circular web with outlined series.

⚠️ Tip: Set series opacity to around 0.5 for clearer plotting when multiple series overlap.

Properties

General

  • Component Name – Auto-generated unique identifier.

  • Position (Left, Top) – Placement on the canvas.

  • Height / Width – Define chart dimensions.

  • Initial Visibility – Show/hide chart on load.

  • Max Button – Enable maximize option.

  • Color From Drill – Inherit colors from drill-down.

  • Points – Toggle visibility of data point markers.

  • Chart Type – Choose Polygon or Circle.

  • Web Type – Choose between Fill or Stroke style.

  • Axis Color – Set axis line colors.

  • Actions – Enable interactions like sorting, exporting, or showing tabular data.

  • Animation – Enable animated transitions.

Tooltip

  • Supported types: None, Default.

  • Customize tooltip background, opacity, border, font size, box width, and precision.

  • Enable highlighter to emphasize data points on hover.

Background & Styling

  • Gradient rotation, opacity, and multiple colors.

  • Borders (color, width, radius).

  • Shadows with configurable color and transparency.

Title & Subtitle

  • Show/hide title and subtitle.

  • Customize text (font color, size, style, weight, family, alignment, decoration).

  • Option to show dataset description dynamically.

Legend

  • Show/hide chart legend.

  • Customize legend font (color, size, style, weight, decoration).

  • Option to hide legend on load.

Formatter

  • Units (%, $, count).

  • Precision (decimal places).

  • Currency formatting.

  • Number formatting (Indian or International).

  • Value positioning (Prefix/Suffix).

Axis Labels

  • Customize font (color, size, style, weight, family).

  • Apply decorations (underline/overline).

Export Options

  • Enable context menu for exporting.

  • Supported formats: Excel, CSV, JPEG, PNG, PPT, PDF, Print.

  • Customize export heading, subheading, and file name.

  • Define global export type (Screenshot or Tabular).

Example Use Cases

  • Business: Compare budgets vs. expenses across departments.

  • Education: Display student performance across subjects.

  • Healthcare: Analyze patient health indicators.

  • Sports: Compare player strengths across skills.

Sample Data Setup:

  • Category Field: Department (categories to compare).

  • Series Fields: Allocated_Budget and Actual_Spending.

⚠️ Note: Both series fields must be numeric for proper plotting.