BlogPlaygroundOne

VPie API

ads via vuetify

Props
name
type
default
animation
  | boolean
  | {
      duration: number
      easing:
        | 'linear'
        | 'easeInQuad'
        | 'easeOutQuad'
        | 'easeInOutQuad'
        | 'easeInCubic'
        | 'easeOutCubic'
        | 'easeInOutCubic'
        | 'easeInQuart'
        | 'easeOutQuart'
        | 'easeInOutQuart'
        | 'easeInQuint'
        | 'easeOutQuint'
        | 'easeInOutQuint'
        | 'instant'
    }

false

Controls duration and easing of the expand/collapse and hover effect. Defaults to easeInOutCubic over 400ms.

bg-color
string

undefined

Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without bg- prefix (for example success, purple or bg-purple) or CSS color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page.

density
'default' | 'comfortable' | 'compact'

'default'

Adjusts the vertical height used by the component.

gap
string | number

undefined

Reduces segment size by a specified angle. Recommended to in range (0-10).

gauge-cut
string | number

undefined

Allows removing bottom part of the chart to make it into a gauge. Expects angle (0-180).

hide-slice
boolean

false

Makes inner slice invisible instead of semi-transparent.

hover-scale
string | number

0.05

Enables interactive behavior by reducing segment size until it gets hovered. Expects fraction value (0-0.25).

inner-cut
string | number

undefined

Specifies inner radius for a donut-style chart as a percent (0-100). Without hide-slice, inner slice is visible with translucent color matching the item.

item-key
string

'key'

MISSING DESCRIPTION (edit in github)

items
Record<string, any> | { color: string; pattern: string }[]

[]

Data items expected to contain key, title and value.

item-title
string

'title'

MISSING DESCRIPTION (edit in github)

item-value
string

'value'

MISSING DESCRIPTION (edit in github)

legend
  | boolean
  | {
      position: 'top' | 'left' | 'right' | 'bottom'
      textFormat:
        | string
        | ((v: {
            key: string | number | symbol
            color: string
            value: number
            title: string
            pattern: string
            isActive: boolean
            raw: Record<string, any>
          }) => string)
    }

false

Controls legend visibility, position and text format.

palette
(string | { color: string; pattern: string })[]

[]

Defines colors and patterns to be applied based on the data items order. Data items can also define their colors.

reveal
boolean | { duration: number }

false

Enables and controls duration for initial reveal animation. Easing function is shared with animation prop.

rotate
string | number

undefined

Rotates the chart segments clockwise.

rounded
string | number

undefined

Number passed as corner radius relative to 100x100 SVG viewport

size
string | number

250

Sets the height and width of the chart (excluding title and legend).

title
string

undefined

Specify a title text for the component.

tooltip
  | boolean
  | {
      titleFormat:
        | string
        | ((v: {
            key: string | number | symbol
            color: string
            value: number
            title: string
            pattern: string
            isActive: boolean
            raw: Record<string, any>
          }) => string)
      subtitleFormat:
        | string
        | ((v: {
            key: string | number | symbol
            color: string
            value: number
            title: string
            pattern: string
            isActive: boolean
            raw: Record<string, any>
          }) => string)
      avatarSize: number
      transition: string | false | true | TransitionProps
      offset: number
    }

false

Controls tooltip visibility, transition, offset from the cursor and formats of title and subtitle.

Slots
{ total: number }
{ isActive: (item: { key: string | number | symbol color: string value: number title: string pattern: string isActive: boolean raw: Record<string, any> }) => boolean toggle: (item: { key: string | number | symbol color: string value: number title: string pattern: string isActive: boolean raw: Record<string, any> }) => void items: PieItem[] total: number }
{ item: { key: string | number | symbol color: string value: number title: string pattern: string isActive: boolean raw: Record<string, any> } total: number }
never
{ item: { key: string | number | symbol color: string value: number title: string pattern: string isActive: boolean raw: Record<string, any> } total: number }
center

Slot used to put custom content in the center of the chart

legend

Slot used to override how legend is being displayed

legend-text

Slot used to customize as text content of single legend item

title

Slot used to customize the title above the chart

tooltip

Slot used to customize tooltip content