Pie

Pie renders value-color pairs as a centered SVG plot layer. It is useful for background summaries, proportional overlays, and donut-style annotations that should share a plot container with other layers. Enable interactive when slices should emit pointer events.

Import

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

Example

Hover a slice

<template>
    <div class="plot" :style="{ height: `${size.height}px`, width: `${size.width}px` }">
        <Pie
            :data="data"
            :inner-radius="34"
            :size="size"
            interactive
            @mouse-enter="hoveredIndex = $event.index"
            @mouse-leave="hoveredIndex = undefined"
        />
    </div>
    <p>{{ hoveredLabel }}</p>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Pie } from '@putianyi888/vue3-plots'
import type { PlotSize } from '@putianyi888/vue3-plots'

const data = [
    { label: 'Research', value: 42, color: '#2563eb' },
    { label: 'Design', value: 24, color: '#16a34a' },
    { label: 'Engineering', value: 28, color: '#dc2626' },
    { label: 'Review', value: 12, color: '#9333ea' },
]
const size: PlotSize = { width: 360, height: 260 }
const hoveredIndex = ref<number>()
const hoveredLabel = computed(() => {
    if (hoveredIndex.value === undefined) return 'Hover a slice'

    const item = data[hoveredIndex.value]
    return `${item.label}: ${item.value}`
})
</script>

<style scoped>
.plot {
  position: relative;
}
</style>

Props

Prop	Type	Default	Description
size	PlotSize		Outer SVG size in pixels. Default provided by TransformGroup.
padding	PlotPadding		Insets used to calculate the plot area. Default provided by TransformGroup.
strokeWidth	MaybeArray<number>	1	Slice outline width in SVG units.
strokeColor	MaybeArray<string>	'none'	Slice outline color.
total	number		Total value used to normalize segments. Defaults to the sum of data values.
startAngle	number	0	Start angle in degrees. Zero degrees points right.
interactive	boolean		Whether slices emit pointer events and use interactive pointer styling.
innerRadius	MaybeArray<number>	0	Inner radius for each slice in SVG units. Pass a non-negative value.
outerRadius	MaybeArray<number>		Outer radius for each slice in SVG units. Pass a positive value. Defaults to a half of the smaller plot-area dimension.
data	PieDatum[]	Required	Pie segments in drawing order.

Events

Event	Payload	Description
click	PiePiece
mouseEnter	PiePiece
mouseLeave	PiePiece

Types

Type	Description
PieDatum	Data item rendered as one Pie or MiniPie slice.
PiePiece	Event payload emitted by interactive Pie slices.

Notes

Pie is a full SVG layer centered in the plot area after padding is applied. When outerRadius is omitted, it defaults to half of the smaller plot-area dimension.

Pie does not validate data values or radius values. Pass finite values, a positive total when overriding automatic totals, non-negative innerRadius values, and positive outerRadius values. Invalid SVG radius values are passed through to the generated path data and may not render.

When interactive is enabled, hovered slices receive a visual floating effect. click, mouse-enter, and mouse-leave emit the slice index, source datum, and generated sector geometry.

Use MiniPie instead when you need an inline DOM-sized pie marker that participates in text flow or can be placed inside another SVG element.