BlogPlaygroundOne

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.

src/plugins/vuetify.js
import { VPie } from 'vuetify/labs/VPie'

export default createVuetify({
  components: {
    VPie,
  },
})

Usage

Basic pie
<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

ComponentDescription
v-piePrimary Component
v-pie-segmentSub-component used to display a single segment
v-pie-tooltipChart tooltip component based on v-list-item
Toggle Inline API

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 key field (name can be changed with item-key)
  • tooltip accept object and lets you customize transition, offset and the text. Notably, the titleFormat and subtitleFormat can be functions or simple string templates that support [title] and [value] macros.
  • animations prop 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: 150px
  • 20% reserved
  • size: 200px
  • 10% reserved
  • size: 250px
  • no 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.

Google
75
Bing
20
DuckDuckGo
17
Brave
15
Kagi
5

Item text overrides

Single item representation can be easily customized with string templates.

TypeScript (52.3%)
Elm (11.6%)
CoffeeScript (6.2%)
Civet (3%)
N/A (26.9%)

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.

Expenses
130
Total

Overlay patterns

The following example demonstrates how to provide overlay patterns to support users with vision impairments.

Walnut
Oak
Pine

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.