# Aggregate Charts

Another family of charts, the aggreate charts accumulate the value at a data point across the multiple datasets.

# Pie Chart

Perhaps the most well-known representation of data slices are Pie charts:

<v-frappe-chart
  type="pie"
  :labels="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
  :data="[{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]"
/>
Expand Copy

# Donut Charts

Donut chart is a variant for Pie charts:

<v-frappe-chart
  type="donut"
  :labels="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
  :data="[{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]"
/>
Expand Copy

# Percentage Charts

Pies have received criticism for data perception; we are much better at parsing sizes in a single dimension rather than an area. That's why, the much leaner percentage chart can come in handy:

<v-frappe-chart
  type="percentage"
  :labels="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
  :data="[{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]"
/>
Expand Copy

# Limiting Slices

When there are too many data values to show visually, it makes sense to bundle up the least of the values as a cumulated data point, rather than showing tiny slices. This can be done by defining the maximum number of slices to be shown.

:max-slices="5"

<v-frappe-chart
  type="pie"
  :labels="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
  :data="[{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]"
  :max-slices="5"
/>
Expand Copy

← Modify Data →