Skip to content

feat(radar): add possibility to display all spoke labels #2014

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(radar): add possibility to display all spoke labels #2014

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a9f6d2a
feat(radar): add possibility to display all spoke labels
max-jonas Jul 17, 2025
a94187f
feat(radar): add demo
max-jonas Jul 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/core/src/components/graphs/radar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,10 +489,11 @@ export class Radar extends Component {
.style('fill-opacity', 0)
.attr('transform', (key: any) => `rotate(${radToDeg(xScale(key))}, ${c.x}, ${c.y})`)

// y labels (show only the min and the max labels)
// y labels
const showAllLabels = getProperty(options, 'radar', 'showAllLabels')
const { code: localeCode, number: numberFormatter } = getProperty(options, 'locale')
const yLabels = DOMUtils.appendOrSelect(svg, 'g.y-labels').attr('role', Roles.GROUP)
const yLabelUpdate = yLabels.selectAll('text').data(extent(yTicks))
const yLabelUpdate = yLabels.selectAll('text').data(showAllLabels ? yTicks : extent(yTicks))
yLabelUpdate.join(
(enter: any) =>
enter
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/interfaces/charts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,10 @@ export interface RadarChartOptions extends BaseChartOptions {
value: string
}
alignment?: Alignments | string
/**
* whether to show all axis labels or only min and max
*/
showAllLabels?: boolean
}
}

Expand Down
39 changes: 39 additions & 0 deletions packages/docs/src/lib/radar/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,21 @@ const radarDenseOptions: RadarChartOptions = {
height: '400px'
}

const radarShowAllLabelsOptions: RadarChartOptions = {
title: 'Radar - Display all labels',
radar: {
axes: {
angle: 'category',
value: 'value'
},
showAllLabels: true
},
data: {
groupMapsTo: 'group'
},
height: '400px'
}

const radarData: ChartTabularData = [
{ product: 'Product 1', feature: 'Price', score: 60 },
{ product: 'Product 1', feature: 'Usability', score: 92 },
Expand Down Expand Up @@ -135,6 +150,25 @@ const radarDenseData: ChartTabularData = [
{ month: 'May', activity: 'Swimming', hoursAvg: 1 }
]

const radarShowAllLabelsData: ChartTabularData = [
{ group: 'Group 1', category: 'Mathematics', value: 4 },
{ group: 'Group 1', category: 'Reading', value: 5 },
{ group: 'Group 1', category: 'Writing', value: 3 },
{ group: 'Group 1', category: 'Science', value: 4 },
{ group: 'Group 1', category: 'Critical Thinking', value: 3 },
{ group: 'Group 1', category: 'Creativity', value: 4 },
{ group: 'Group 1', category: 'Teamwork', value: 5 },
{ group: 'Group 1', category: 'Communication', value: 4 },
{ group: 'Group 2', category: 'Mathematics', value: 3 },
{ group: 'Group 2', category: 'Reading', value: 4 },
{ group: 'Group 2', category: 'Writing', value: 4 },
{ group: 'Group 2', category: 'Science', value: 2 },
{ group: 'Group 2', category: 'Critical Thinking', value: 4 },
{ group: 'Group 2', category: 'Creativity', value: 3 },
{ group: 'Group 2', category: 'Teamwork', value: 3 },
{ group: 'Group 2', category: 'Communication', value: 4 }
]

export const examples: Example[] = [
{
data: radarData,
Expand All @@ -155,5 +189,10 @@ export const examples: Example[] = [
data: radarDenseData,
options: radarDenseOptions,
tags: ['test']
},
{
data: radarShowAllLabelsData,
options: radarShowAllLabelsOptions,
tags: ['test']
}
]
8 changes: 7 additions & 1 deletion packages/docs/src/searchIndex.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,7 +468,13 @@ export default [
path: 'radar',
title: 'Radar Charts',
text: 'Radar Charts, also known as spider or Kiviat charts, are graphical representations of multivariate data on a two-dimensional plane. They feature a circular shape with multiple spokes extending from a central point, each representing a different variable or category. Data points are plotted along these spokes and connected to form a polygon, allowing for the comparison of multiple variables across different categories simultaneously. Radar charts are particularly useful for visualizing patterns, trends, and relationships in data with multiple dimensions. They are commonly employed in fields such as performance evaluation, market analysis, and sports analytics to assess strengths and weaknesses across various attributes or criteria. Radar charts offer a holistic view of complex data sets, enabling users to identify patterns and make informed decisions based on the relationships between different variables. Details on Radar Chart options can be found here.',
charts: ['Radar', 'Radar (centered)', 'Radar - Missing datapoints', 'Radar - Dense']
charts: [
'Radar',
'Radar (centered)',
'Radar - Missing datapoints',
'Radar - Dense',
'Radar - Display all labels'
]
},
{
path: 'scatter',
Expand Down