Interactive radar

Aligned multidimensional profiles for comparing broad shapes over the same bounded indicators.

Purpose: Compare repeated observations over the same bounded dimensions.
Use when: A few dimensions share stable maxima and the profile shape matters more than precise pairwise ranking.
Avoid when: Exact ranking, many dimensions, incompatible scales, or small differences are the goal; use bars, parallel coordinates, or a table.
Equivalent data: Every chart is followed by a keyboard-accessible exact-value table with the city, day, and six pollutant values.

Twenty-one daily observations across six pollutant dimensions.

Exact radar values

Series	Observation	AQI	PM2.5	PM10	CO	NO2	SO2
Beijing	Day 1	55	9	56	0.46	18	6
Beijing	Day 2	25	11	21	0.65	34	9
Beijing	Day 3	56	7	63	0.3	14	5
Beijing	Day 4	33	7	29	0.33	16	6
Beijing	Day 5	42	24	44	0.76	40	16
Beijing	Day 6	82	58	90	1.77	68	33
Beijing	Day 7	74	49	77	1.46	48	27
Beijing	Day 8	78	55	80	1.29	59	29
Beijing	Day 9	267	216	280	4.8	108	64
Beijing	Day 10	185	127	216	2.52	61	27
Beijing	Day 11	39	19	38	0.57	31	15
Beijing	Day 12	41	11	40	0.43	21	7
Beijing	Day 13	64	38	74	1.04	46	22
Beijing	Day 14	108	79	120	1.7	75	41
Beijing	Day 15	108	63	116	1.48	44	26
Beijing	Day 16	33	6	29	0.34	13	5
Beijing	Day 17	94	66	110	1.54	62	31
Beijing	Day 18	186	142	192	3.88	93	79
Beijing	Day 19	57	31	54	0.96	32	14
Beijing	Day 20	22	8	17	0.48	23	10
Beijing	Day 21	39	15	36	0.61	29	13

Usage Example

@interactiveradar.Radar(interactiveradar.Config{
  Label: "Daily Beijing air quality",
  Indicators: pollutantIndicators,
  Series: []interactiveradar.Series{{Name: "Beijing", Data: dailyBeijingValues}},
  Coordinate: interactiveradar.CoordinateOptions{
    SplitArea: chart.Bool(true),
    SplitLine: &interactiveradar.SplitLineOptions{Show: chart.Bool(true)},
  },
})

Circular style

Shape, split count, split-line treatment, line opacity, and area opacity remain typed options on the same Radar component.

The Beijing observations use a circular coordinate with five subtle rings.

Exact radar values

Series	Observation	AQI	PM2.5	PM10	CO	NO2	SO2
Beijing	Day 1	55	9	56	0.46	18	6
Beijing	Day 2	25	11	21	0.65	34	9
Beijing	Day 3	56	7	63	0.3	14	5
Beijing	Day 4	33	7	29	0.33	16	6
Beijing	Day 5	42	24	44	0.76	40	16
Beijing	Day 6	82	58	90	1.77	68	33
Beijing	Day 7	74	49	77	1.46	48	27
Beijing	Day 8	78	55	80	1.29	59	29
Beijing	Day 9	267	216	280	4.8	108	64
Beijing	Day 10	185	127	216	2.52	61	27
Beijing	Day 11	39	19	38	0.57	31	15
Beijing	Day 12	41	11	40	0.43	21	7
Beijing	Day 13	64	38	74	1.04	46	22
Beijing	Day 14	108	79	120	1.7	75	41
Beijing	Day 15	108	63	116	1.48	44	26
Beijing	Day 16	33	6	29	0.34	13	5
Beijing	Day 17	94	66	110	1.54	62	31
Beijing	Day 18	186	142	192	3.88	93	79
Beijing	Day 19	57	31	54	0.96	32	14
Beijing	Day 20	22	8	17	0.48	23	10
Beijing	Day 21	39	15	36	0.61	29	13

Circular style

Coordinate: interactiveradar.CoordinateOptions{
  Shape: interactiveradar.ShapeCircle,
  SplitNumber: 5,
  SplitLine: &interactiveradar.SplitLineOptions{
    Show: chart.Bool(true),
    Style: &chart.LineStyle{Width: 1, Opacity: chart.Float(.1)},
  },
},
SeriesOptions: chart.SeriesOptions{
  LineStyle: &chart.LineStyle{Width: 1, Opacity: chart.Float(.5)},
  AreaStyle: &chart.AreaStyle{Opacity: chart.Float(.1)},
}

Multiple-series legend

All three city profiles may remain visible or be toggled independently.

Toggle any combination of Beijing, Guangzhou, and Shanghai.

Exact radar values

Series	Observation	AQI	PM2.5	PM10	CO	NO2	SO2
Beijing	Day 1	55	9	56	0.46	18	6
Beijing	Day 2	25	11	21	0.65	34	9
Beijing	Day 3	56	7	63	0.3	14	5
Beijing	Day 4	33	7	29	0.33	16	6
Beijing	Day 5	42	24	44	0.76	40	16
Beijing	Day 6	82	58	90	1.77	68	33
Beijing	Day 7	74	49	77	1.46	48	27
Beijing	Day 8	78	55	80	1.29	59	29
Beijing	Day 9	267	216	280	4.8	108	64
Beijing	Day 10	185	127	216	2.52	61	27
Beijing	Day 11	39	19	38	0.57	31	15
Beijing	Day 12	41	11	40	0.43	21	7
Beijing	Day 13	64	38	74	1.04	46	22
Beijing	Day 14	108	79	120	1.7	75	41
Beijing	Day 15	108	63	116	1.48	44	26
Beijing	Day 16	33	6	29	0.34	13	5
Beijing	Day 17	94	66	110	1.54	62	31
Beijing	Day 18	186	142	192	3.88	93	79
Beijing	Day 19	57	31	54	0.96	32	14
Beijing	Day 20	22	8	17	0.48	23	10
Beijing	Day 21	39	15	36	0.61	29	13
Guangzhou	Day 1	26	37	27	1.163	27	13
Guangzhou	Day 2	85	62	71	1.195	60	8
Guangzhou	Day 3	78	38	74	1.363	37	7
Guangzhou	Day 4	21	21	36	0.634	40	9
Guangzhou	Day 5	41	42	46	0.915	81	13
Guangzhou	Day 6	56	52	69	1.067	92	16
Guangzhou	Day 7	64	30	28	0.924	51	2
Guangzhou	Day 8	55	48	74	1.236	75	26
Guangzhou	Day 9	76	85	113	1.237	114	27
Guangzhou	Day 10	91	81	104	1.041	56	40
Guangzhou	Day 11	84	39	60	0.964	25	11
Guangzhou	Day 12	64	51	101	0.862	58	23
Guangzhou	Day 13	70	69	120	1.198	65	36
Guangzhou	Day 14	77	105	178	2.549	64	16
Guangzhou	Day 15	109	68	87	0.996	74	29
Guangzhou	Day 16	73	68	97	0.905	51	34
Guangzhou	Day 17	54	27	47	0.592	53	12
Guangzhou	Day 18	51	61	97	0.811	65	19
Guangzhou	Day 19	91	71	121	1.374	43	18
Guangzhou	Day 20	73	102	182	2.787	44	19
Guangzhou	Day 21	73	50	76	0.717	31	20
Shanghai	Day 1	91	45	125	0.82	34	23
Shanghai	Day 2	65	27	78	0.86	45	29
Shanghai	Day 3	83	60	84	1.09	73	27
Shanghai	Day 4	109	81	121	1.28	68	51
Shanghai	Day 5	106	77	114	1.07	55	51
Shanghai	Day 6	109	81	121	1.28	68	51
Shanghai	Day 7	106	77	114	1.07	55	51
Shanghai	Day 8	89	65	78	0.86	51	26
Shanghai	Day 9	53	33	47	0.64	50	17
Shanghai	Day 10	80	55	80	1.01	75	24
Shanghai	Day 11	117	81	124	1.03	45	24
Shanghai	Day 12	99	71	142	1.1	62	42
Shanghai	Day 13	95	69	130	1.28	74	50
Shanghai	Day 14	116	87	131	1.47	84	40
Shanghai	Day 15	108	80	121	1.3	85	37
Shanghai	Day 16	134	83	167	1.16	57	43
Shanghai	Day 17	79	43	107	1.05	59	37
Shanghai	Day 18	71	46	89	0.86	64	25
Shanghai	Day 19	97	71	113	1.17	88	31
Shanghai	Day 20	84	57	91	0.85	55	31
Shanghai	Day 21	87	63	101	0.9	56	41

Multiple-series legend

Series: []interactiveradar.Series{beijing, guangzhou, shanghai},
Options: chart.ChartOptions{
  Legend: &chart.LegendOptions{SelectionMode: chart.LegendSelectionMultiple},
}

Single-series legend

Exclusive legend selection reduces overlap while retaining all source observations in the exact-value table.

Select one city's twenty-one daily profiles at a time.

Exact radar values

Series	Observation	AQI	PM2.5	PM10	CO	NO2	SO2
Beijing	Day 1	55	9	56	0.46	18	6
Beijing	Day 2	25	11	21	0.65	34	9
Beijing	Day 3	56	7	63	0.3	14	5
Beijing	Day 4	33	7	29	0.33	16	6
Beijing	Day 5	42	24	44	0.76	40	16
Beijing	Day 6	82	58	90	1.77	68	33
Beijing	Day 7	74	49	77	1.46	48	27
Beijing	Day 8	78	55	80	1.29	59	29
Beijing	Day 9	267	216	280	4.8	108	64
Beijing	Day 10	185	127	216	2.52	61	27
Beijing	Day 11	39	19	38	0.57	31	15
Beijing	Day 12	41	11	40	0.43	21	7
Beijing	Day 13	64	38	74	1.04	46	22
Beijing	Day 14	108	79	120	1.7	75	41
Beijing	Day 15	108	63	116	1.48	44	26
Beijing	Day 16	33	6	29	0.34	13	5
Beijing	Day 17	94	66	110	1.54	62	31
Beijing	Day 18	186	142	192	3.88	93	79
Beijing	Day 19	57	31	54	0.96	32	14
Beijing	Day 20	22	8	17	0.48	23	10
Beijing	Day 21	39	15	36	0.61	29	13
Guangzhou	Day 1	26	37	27	1.163	27	13
Guangzhou	Day 2	85	62	71	1.195	60	8
Guangzhou	Day 3	78	38	74	1.363	37	7
Guangzhou	Day 4	21	21	36	0.634	40	9
Guangzhou	Day 5	41	42	46	0.915	81	13
Guangzhou	Day 6	56	52	69	1.067	92	16
Guangzhou	Day 7	64	30	28	0.924	51	2
Guangzhou	Day 8	55	48	74	1.236	75	26
Guangzhou	Day 9	76	85	113	1.237	114	27
Guangzhou	Day 10	91	81	104	1.041	56	40
Guangzhou	Day 11	84	39	60	0.964	25	11
Guangzhou	Day 12	64	51	101	0.862	58	23
Guangzhou	Day 13	70	69	120	1.198	65	36
Guangzhou	Day 14	77	105	178	2.549	64	16
Guangzhou	Day 15	109	68	87	0.996	74	29
Guangzhou	Day 16	73	68	97	0.905	51	34
Guangzhou	Day 17	54	27	47	0.592	53	12
Guangzhou	Day 18	51	61	97	0.811	65	19
Guangzhou	Day 19	91	71	121	1.374	43	18
Guangzhou	Day 20	73	102	182	2.787	44	19
Guangzhou	Day 21	73	50	76	0.717	31	20
Shanghai	Day 1	91	45	125	0.82	34	23
Shanghai	Day 2	65	27	78	0.86	45	29
Shanghai	Day 3	83	60	84	1.09	73	27
Shanghai	Day 4	109	81	121	1.28	68	51
Shanghai	Day 5	106	77	114	1.07	55	51
Shanghai	Day 6	109	81	121	1.28	68	51
Shanghai	Day 7	106	77	114	1.07	55	51
Shanghai	Day 8	89	65	78	0.86	51	26
Shanghai	Day 9	53	33	47	0.64	50	17
Shanghai	Day 10	80	55	80	1.01	75	24
Shanghai	Day 11	117	81	124	1.03	45	24
Shanghai	Day 12	99	71	142	1.1	62	42
Shanghai	Day 13	95	69	130	1.28	74	50
Shanghai	Day 14	116	87	131	1.47	84	40
Shanghai	Day 15	108	80	121	1.3	85	37
Shanghai	Day 16	134	83	167	1.16	57	43
Shanghai	Day 17	79	43	107	1.05	59	37
Shanghai	Day 18	71	46	89	0.86	64	25
Shanghai	Day 19	97	71	113	1.17	88	31
Shanghai	Day 20	84	57	91	0.85	55	31
Shanghai	Day 21	87	63	101	0.9	56	41

Single-series legend

Series: []interactiveradar.Series{beijing, guangzhou, shanghai},
Options: chart.ChartOptions{
  Legend: &chart.LegendOptions{SelectionMode: chart.LegendSelectionSingle},
}

When radar works

Use a small, stable set of bounded indicators when the broad profile shape is meaningful. Polygon and circular coordinates change presentation, not values.

When radar fails

Overplotting, many dimensions, unequal scales, and close values make radar charts hard to compare. Prefer bars, parallel coordinates, or the exact-value table in those cases.

Accessibility

Hover and color are exploratory aids. Each example includes an exact radar values disclosure with every city, day, indicator, and value.

Shared controls and modes

Expand, fullscreen, PNG export, hidden/disabled/unwrapped lifecycle modes, resize events, and HTMX replacement behavior come from the shared chart wrapper. See chart controls and static/vector and interactive capabilities below.

Go API

v0.0.1

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso-charts/components/interactive/radar

Enabled, disabled, hidden, and omitted wrapper behavior, controls, export, and client transitions are shared by every chart. Review chart controls, then compare static/vector and interactive capabilities.

Open v0.0.1 API