Pie Chart
The v-pie component is design to display either pie or a donut chart with integrated tooltips and legend.
Installation
Labs components require manual import and registration with the Vuetify instance.
import { VPie } from 'vuetify/labs/VPie'
export default createVuetify({
components: {
VPie,
},
})
Usage
<v-pie
title="Basic pie"
:palette="['#048BA8', '#99C24D', '#F18F01']"
:items="items"
/><script setup>
const items = [
{ key: 1, title: "Yes", value: 45 },
{ key: 2, title: "No", value: 40 },
{ key: 3, title: "Maybe", value: 15 },
]
</script>API
| Component | Description |
|---|---|
| v-pie | Primary Component |
| v-pie-segment | Sub-component used to display a single segment |
| v-pie-tooltip | Chart tooltip component based on v-list-item |
Guide
v-pie does not have any opinionated way to use. You may start by providing an array of items (data) and then customize, hide or replace elements to make it behave as you wish to fit your project.
There are some notable features that are not common in other Vuetify components:
- each item is expected to have a
keyfield (name can be changed withitem-key) tooltipaccept object and lets you customize transition, offset and the text. Notably, thetitleFormatandsubtitleFormatcan be functions or simple string templates that support[title]and[value]macros.animationsprop lets you control duration and easing
Props
The v-pie supports various stylistic props to customize the appearance and hover transitions.
Size
Charts are more like drawings then regular HTML elements and their size needs to be controlled externally. hover-scale will reserve some space to enlarge segments on hover.
size: 150px20% reserved
size: 200px10% reserved
size: 250pxno zoom on hover
Palette
Colors can be conveniently passed to a dedicated palette prop.
Legend position
The legend can be moved to any side or hidden entirely. With little effort you can also control legend’s and tooltip’s text.
Item text overrides
Single item representation can be easily customized with string templates.
Examples
The following are a collection of examples that demonstrate some more advanced capabilities of v-pie component.
Custom Legend
Legend does not need to be a list of chips. You can fully override it to match the expected design.
Overlay patterns
The following example demonstrates how to provide overlay patterns to support users with vision impairments.