vue-charts Polar Axes and Grid
Polar charts (RadarChart, RadialBarChart, PieChart) place data by angle and distance from the center. Three components draw their frame:
<PolarAngleAxis>maps data to angles around the circle and draws the outer ring with labels.<PolarRadiusAxis>maps data to the distance from the center and draws one radial line with ticks.<PolarGrid>draws the rings and the spokes behind the series.
Radar frame
<RadarChart :data="data" :height="300">
<PolarGrid />
<PolarAngleAxis data-key="subject" />
<PolarRadiusAxis :angle="90" :domain="[0, 150]" />
<Radar data-key="score" stroke="#f97316" fill="#f97316" :fill-opacity="0.5" />
</RadarChart>
Set grid-type="circle" for round rings:
Number angle axis
A type="number" angle axis with a fixed domain turns a radial bar into a gauge: the bar length is the value's share of the domain.
PolarAngleAxis props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | string | number | (row) => unknown | — | Field with the category of each angle |
type | 'category' | 'number' | 'category' | Category axis (one angle per row) or number axis |
domain | AxisDomain | from the data | Domain of a number axis, for example [0, 100] |
tick-count | number | — | Number of ticks on a number axis |
ticks | AxisTick[] | — | Exact tick values |
tick | boolean | true | Show the tick labels |
tick-line | boolean | true | Show the tick lines |
tick-size | number | 8 | Length of the tick lines in px |
tick-formatter | (value, index) => string | — | Formats the tick labels |
axis-line | boolean | true | Show the outer ring |
axis-line-type | 'polygon' | 'circle' | 'polygon' | Shape of the outer ring |
orientation | 'outer' | 'inner' | 'outer' | Draw ticks and labels outside or inside the ring |
stroke | string | — | Color of the ring, tick lines and labels |
angle-axis-id | string | number | 0 | Axis id, for charts with more than one angle axis |
The angle axis has no angle prop: the chart's start-angle and end-angle set the range. On a full circle, the last tick is dropped when it lands on the first.
PolarRadiusAxis props
| Prop | Type | Default | Description |
|---|---|---|---|
angle | number | 0 | Angle of the axis line in degrees. 0 points right, 90 points up |
data-key | string | number | (row) => unknown | — | Field for a category radius axis |
type | 'number' | 'category' | 'auto' | 'auto' | Axis type. auto picks from the chart |
domain | AxisDomain | from the data | Domain, for example [0, 150] |
tick-count | number | 5 | Number of ticks |
ticks | AxisTick[] | — | Exact tick values |
allow-decimals | boolean | false | Allow decimal tick values |
tick | boolean | true | Show the tick labels |
tick-formatter | (value, index) => string | — | Formats the tick labels |
axis-line | boolean | true | Show the axis line |
orientation | 'left' | 'right' | 'middle' | 'right' | Side of the tick where the label text sits. Labels turn with the axis angle |
stroke | string | — | Color of the axis line and labels. Without it, the line uses --v-charts-grid and the labels --v-charts-text |
radius-axis-id | string | number | 0 | Axis id, for charts with more than one radius axis |
A <Label> inside <PolarRadiusAxis> is placed in the polar box of the chart; see Labels.
PolarGrid props
| Prop | Type | Default | Description |
|---|---|---|---|
grid-type | 'polygon' | 'circle' | 'polygon' | Shape of the rings |
radial-lines | boolean | true | Draw the spokes from the center to each angle tick |
polar-radius | number[] | radius axis ticks | Radii of the rings in px |
stroke | string | var(--v-charts-grid, #ccc) | Line color |
stroke-width | number | — | Line width |
fill | string | 'none' | Background fill inside the outer ring |
angle-axis-id | string | number | 0 | Angle axis that sets the spokes |
radius-axis-id | string | number | 0 | Radius axis that sets the rings |
The rings follow the ticks of the radius axis, and the spokes follow the ticks of the angle axis. A chart without a PolarRadiusAxis still has an implicit radius axis, so the grid has rings.
Slots
| Component | Slot | Props | Description |
|---|---|---|---|
PolarAngleAxis | #tick | { x, y, value, index, textAnchor, payload, cx, cy } | Replaces each tick label. value is already formatted |
PolarRadiusAxis | #tick | { x, y, value, index, textAnchor, payload } | Replaces each tick label |
PolarRadiusAxis | default | — | Place a <Label> here |
<PolarAngleAxis data-key="subject">
<template #tick="{ x, y, value, textAnchor }">
<text :x="x" :y="y" :text-anchor="textAnchor" dominant-baseline="central" class="fill-(--color-muted) text-xs">
{{ value }}
</text>
</template>
</PolarAngleAxis>
Styling
The grid has data-slot="grid" and the class v-charts-polar-grid. The axes have data-slot="angle-axis" and data-slot="radius-axis", with the classes v-charts-polar-angle-axis and v-charts-polar-radius-axis.
Related
- Radar Chart and Radial Bar Chart
- Axes: the cartesian
XAxisandYAxis - Coordinate Systems: polar and cartesian coordinates