Create Radar chart

Everything you need to know to create the chart you want.

Overview

Radar (spider) charts plot multiple metrics on radial axes, connecting them to form a polygon. They make it easy to compare profiles or performance across qualitative dimensions.

When to use it

  • Comparing feature completeness across products.

  • Visualising skill assessments or survey results across categories.

  • Highlighting strengths and weaknesses in a balanced scorecard.

Avoid radar charts when you have many categories (>8) or when values vary drasticallyβ€”interpretation becomes difficult.

Data requirements

  • Multiple metrics (axes) arranged radially.

  • Each series delivers a value for every metric.

  • Normalise scales beforehand to keep axes comparable.

Style options available

Group
Control
Input type
Options
Description

Colors

Color palette

palette

β€”

Palette applied to series; sets the default colours for the chart.

General β†’ Radar

Type

select

line, spline, area, areaspline

Sets the rendering of radar chart series (area vs. line).

General β†’ Radar

Area fill opacity

number

β€”

Controls how transparent the filled area is; lower values show more of the background and overlapping series.

General β†’ Radar

Line width

number

β€”

Default line thickness for series that inherit from this setting.

General β†’ Radar

Show dots

boolean

β€”

Shows markers for the default series configuration (affects multiple chart types).

General β†’ Radar

Radius of dots

number

β€”

Radius of default series markers when enabled.

General β†’ Radar

Point start

number

β€”

Starting category index or angle for plotting circular data.

General β†’ Radar

Point interval (deg)

number

β€”

Interval between points (in degrees for circular charts or numeric units for linear series).

General β†’ Data labels

Show data labels

boolean

β€”

Shows numeric labels directly on data points.

General β†’ Data labels

Allow labels to overlap

boolean

β€”

Allows labels to render even if they collide instead of hiding them automatically.

General β†’ Data labels

Font name

text

β€”

Font family used for titles, labels, or legend text.

General β†’ Data labels

Font style

text

β€”

Font weight or style (e.g., bold, italic).

General β†’ Data labels

Font size

number

β€”

Font size in pixels for the selected text element.

General β†’ Data labels

Font color

color

β€”

Colour of the text shown for this element.

Axes β†’ X Axis

Show X Axis

boolean

β€”

Shows or hides the X axis line, ticks, and labels.

Axes β†’ X Axis

Base line width

number

β€”

Thickness of the axis baseline line in pixels.

Axes β†’ X Axis

Grid line width

number

β€”

Thickness of gridlines in pixels.

Axes β†’ X Axis

Base line color

color

β€”

Colour of the axis baseline line.

Axes β†’ X Axis

Grid line color

color

β€”

Colour for gridlines drawn across the chart background.

Axes β†’ X Axis

Grid line style

select

Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot

Line pattern used for gridlines (solid, dashed, dotted, etc.).

Axes β†’ X Axis

Tick width

number

β€”

Thickness of tick marks in pixels.

Axes β†’ X Axis

Tick length

number

β€”

Length of the tick marks in pixels.

Axes β†’ X Axis

Tick color

color

β€”

Colour of the axis tick marks.

Axes β†’ X Axis

Type

select

category, linear

Sets the horizontal axis scale (category, numeric, logarithmic, or datetime).

Axes β†’ X Axis

Min

number

β€”

Minimum value allowed on this axis or gauge.

Axes β†’ X Axis

Max

number

β€”

Maximum value allowed on this axis or gauge.

Axes β†’ X Axis

Tick interval

number

β€”

Distance between tick marks on the axis (numeric interval).

Axes β†’ X Axis

Allow labels to overlap

boolean

β€”

Allows labels to render even if they collide instead of hiding them automatically.

Axes β†’ X Axis

Show every n'th label

number

β€”

Skips labels so only every nth label is drawn.

Axes β†’ X Axis

Rotation of labels

number

β€”

Rotation angle applied to axis or data labels in degrees.

Axes β†’ X Axis

Tick placement

select

on, between

Whether ticks sit on category positions or between them.

Axes β†’ X Axis

Point placement

select

on, between

Positions points inside their category slot (on the tick or between ticks).

Axes β†’ X Axis

Opposite side

boolean

β€”

Positions the axis on the opposite side of the chart (top/right).

Axes β†’ X Axis

Margin for title

number

β€”

Space between the axis title and the axis labels/ticks.

Axes β†’ Y Axis

Show Y Axis

boolean

β€”

Shows or hides the Y axis line, ticks, and labels.

Axes β†’ Y Axis

Base line width

number

β€”

Thickness of the axis baseline line in pixels.

Axes β†’ Y Axis

Grid line width

number

β€”

Thickness of gridlines in pixels.

Axes β†’ Y Axis

Base line color

color

β€”

Colour of the axis baseline line.

Axes β†’ Y Axis

Grid line color

color

β€”

Colour for gridlines drawn across the chart background.

Axes β†’ Y Axis

Grid line style

select

Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot

Line pattern used for gridlines (solid, dashed, dotted, etc.).

Axes β†’ Y Axis

Tick width

number

β€”

Thickness of tick marks in pixels.

Axes β†’ Y Axis

Tick length

number

β€”

Length of the tick marks in pixels.

Axes β†’ Y Axis

Tick color

color

β€”

Colour of the axis tick marks.

Axes β†’ Y Axis

Labels alignment

select

left, center, right

Horizontal alignment of axis labels relative to the tick mark.

Axes β†’ Y Axis

X offset

number

β€”

Horizontal offset applied to axis labels.

Axes β†’ Y Axis

Y offset

number

β€”

Vertical offset applied to axis labels.

Axes β†’ Y Axis

Type

select

category, linear, logarithmic, datetime

Sets the vertical axis scale (category, numeric, logarithmic, or datetime).

Axes β†’ Y Axis

Opposite side

boolean

β€”

Positions the axis on the opposite side of the chart (top/right).

Axes β†’ Y Axis

Margin for title

number

β€”

Space between the axis title and the axis labels/ticks.

Axes β†’ Common

Font name

text

β€”

Font family used for titles, labels, or legend text.

Axes β†’ Common

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Axes β†’ Common

Font size

number

β€”

Font size in pixels for the selected text element.

Axes β†’ Common

Font color

color

β€”

Colour of the text shown for this element.

Axes β†’ Axes titles

Font name

text

β€”

Font family used for titles, labels, or legend text.

Axes β†’ Axes titles

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Axes β†’ Axes titles

Font size

number

β€”

Font size in pixels for the selected text element.

Axes β†’ Axes titles

Font color

color

β€”

Colour of the text shown for this element.

Axes β†’ Axes titles

X Axis margin

number

β€”

Extra padding around the X axis labels for titles.

Axes β†’ Axes titles

Y Axis margin

number

β€”

Extra padding around the Y axis labels for titles.

Legend β†’ Main

Show legend

boolean

β€”

Shows or hides the legend box.

Legend β†’ Main

Horizontal align

select

left, center, right

Horizontal alignment for the legend box (left, centre, right).

Legend β†’ Main

Vertical align

select

top, middle, bottom

Vertical alignment for the legend box (top, middle, bottom).

Legend β†’ Main

Layout

select

horizontal, vertical, proximate

Orientation of the legend items (horizontal row, vertical column, or proximate).

Legend β†’ Additional

Margin for legend

number

β€”

Outer margin around the legend box.

Legend β†’ Additional

Margin top for items

number

β€”

Top padding inside the legend between items.

Legend β†’ Additional

Margin bottom for items

number

β€”

Bottom padding inside the legend between items.

Legend β†’ Additional

Distance between items

number

β€”

Horizontal spacing between legend entries.

Legend β†’ Style

Font name

text

β€”

Font family used for titles, labels, or legend text.

Legend β†’ Style

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Legend β†’ Style

Font size

number

β€”

Font size in pixels for the selected text element.

Legend β†’ Style

Font color

color

β€”

Colour of the text shown for this element.

Title β†’ Chart title

Font name

text

β€”

Font family used for titles, labels, or legend text.

Title β†’ Chart title

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Title β†’ Chart title

Font size

number

β€”

Font size in pixels for the selected text element.

Title β†’ Chart title

Font color

color

β€”

Colour of the text shown for this element.

Title β†’ Chart title

Margin bottom

number

β€”

Extra space below chart titles or subtitles in pixels.

Title β†’ Chart subtitle

Font name

text

β€”

Font family used for titles, labels, or legend text.

Title β†’ Chart subtitle

Font style

text

β€”

Font weight or style (e.g., bold, italic).

Title β†’ Chart subtitle

Font size

number

β€”

Font size in pixels for the selected text element.

Title β†’ Chart subtitle

Font color

color

β€”

Colour of the text shown for this element.

Have problems or want to improve this chart type?

Ping us via [email protected].

Last updated

Was this helpful?