MiniPie

MiniPie renders a small inline SVG pie chart. Unlike plot layers, it behaves like a regular DOM element: pass class, style, or other SVG attributes to tune its size, alignment, and surrounding layout.

Import

import { MiniPie } from '@putianyi888/vue3-plots'

Example

<MiniPie
  class="summary-icon"
  :data="[
    { value: 2, color: '#2563eb' },
    { value: 1, color: '#dc2626' },
  ]"
  :radius="8"
  stroke-color="#ffffff"
  :stroke-width="1"
  style="width: 1rem; vertical-align: middle;"
/>

Props

Prop	Type	Default	Description
strokeWidth	number	1	Slice outline width in SVG units.
strokeColor	string	'none'	Slice outline color.
radius	number	8	Circle radius in SVG units. Pass a positive value.
total	number		Total value used to normalize segments. Defaults to the sum of positive finite values.
startAngle	number	0	Start angle in degrees. Zero degrees points right.
data	PieDatum[]	Required	Pie segments in drawing order.

Notes

Use CSS when you want the rendered element to occupy a different layout size than its intrinsic SVG size.

MiniPie does not validate radius values. Pass a positive finite radius; invalid SVG radius values are passed through to the generated path data and may not render.