RadarChart

Charts

SVG radar / spider web chart, zero dependencies.

Props

Prop	Type	Default	Description
`data`	`DsRadarChartAxis[]`	`[]`	Axes { label, value (0-100) }.
`color`	`string`	`"#7f00ff"`	Main chart color.
`size`	`number`	`280`	SVG size in pixels.
`showLabels`	`boolean`	`true`	Show axis labels.
`showGrid`	`boolean`	`true`	Show the background grid.

Examples

Performance radar

vue

<DsRadarChart
  :data="[
    { label: 'Speed', value: 82 },
    { label: 'Reliability', value: 95 },
    { label: 'Security', value: 78 },
    { label: 'Scalability', value: 88 },
    { label: 'DX', value: 92 },
    { label: 'Performance', value: 85 },
  ]"
  color="#7f00ff"
  :size="260"
  :show-labels="true"
  :show-grid="true"
/>

Skeleton

Use DsRadarChartSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsRadarChartSkeleton />

Accessibility

SVG with aria-hidden="true" and role="img".
Provide a description via aria-label or aria-labelledby on the parent container.

LineChart

Sparkline