JavaScript Static Spider Chart - Editor

Also known as Radar Chart, Web Chart, Polar Chart, Star Series

This example shows the creation and API of Spider Chart, which is generally used to compare multivariate quantitative data set. Each quantitative variable is represented on a categorical axis starting from the same center point.

Typical usage of the Radar (Spider) chart is to compare various products over a range of characteristics.

Spider Charts are created in a very straight-forward manner:

// Add a Spider Chart.
const spiderChart = Spider()

Spider Series provides an ability to specify styles for both markers and lines individually.

const spiderSeries = spiderChart
    .addSeries(PointShape.Circle)
    .setName('Positive feedback distribution')
    .setFillStyle(fillStyle)
    .setPointFillStyle(pointFillStyle)
// etc ...

Actual data is added with the format: { axis: string, value: number }, where 'axis' refers to the name of a category.

spiderSeries.addPoints(
    // Any number of { axis, value } pairs can be passed.
    { axis: 'Team spirit', value: 55 },
    { axis: 'Premises', value: 27 },
    { axis: 'Salary', value: 25 },
)

Adding points with unique tags will automatically create new categorical axes for the Spider Chart in the order of adding (the first axis will always point directly up and following ones will traverse clock-wise). Adding more points to the same category tag in one series will override any previous values.