DocumentationNuxt Charts v3
Radial Bar Chart
Learn how to implement and customize Radial Bar Charts in your Nuxt application.
The RadialBarChart component renders each value as a concentric arc, a compact and eye-catching alternative to a bar chart for comparing a handful of categories. New in v3.
Basic Usage
<script lang="ts" setup>
// RadialBarChart takes a positional number[] aligned with `categories`.
const radialBarData = [1200, 940, 720, 410];
const categories: Record<string, BulletLegendItemInterface> = {
chrome: { name: "Chrome", color: "var(--color-blue-400)" },
safari: { name: "Safari", color: "var(--color-green-400)" },
firefox: { name: "Firefox", color: "var(--color-orange-400)" },
edge: { name: "Edge", color: "var(--color-purple-400)" },
};
</script>
<template>
<RadialBarChart
:data="radialBarData"
:categories="categories"
:height="320"
:corner-radius="4"
:legend-position="LegendPosition.BottomCenter"
/>
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | Required | Segment values, in the same order as categories. |
categories | Record<string, BulletLegendItemInterface> | Required | Maps each segment to its name and color. |
height | number | Required | Height of the chart in pixels. |
innerRadius | number | string | '30%' | Inner radius in pixels or percent string. |
outerRadius | number | string | '100%' | Outer radius in pixels or percent string. |
startAngle | number | 90 | Start angle in degrees. |
endAngle | number | -270 | End angle in degrees (full turn by default). |
cornerRadius | number | undefined | Corner radius of each bar in pixels. |
background | boolean | true | Draw the faint background track behind each bar. |
hideLegend | boolean | false | If true, hides the chart legend. |
legendPosition | LegendPosition | undefined | Position of the legend. |
legendStyle | Record<string, string> | undefined | Optional inline CSS styles for the legend container. |
hideTooltip | boolean | false | If true, hides the tooltip. |
tooltipTitleFormatter | (data: T) => string | number | undefined | Custom formatter for tooltip titles. |
tooltip | TooltipConfig | undefined | Tooltip configuration. |
duration | number | undefined | Animation duration in milliseconds. |
Data Format
Like the Donut chart, data is a positional array of numbers. Each value maps by index to the matching entry in categories.
types.ts
const data: number[] = [1200, 940, 720, 410];