> ## Documentation Index > Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt > Use this file to discover all available pages before exploring further. # Donut Charts > A donut chart shows how a total is divided among categories, with each slice representing a category’s proportion of the whole. They are best for illustrating part-to-whole relationships, but they are less effective for making precise comparisons between categories. export const DoDont = ({text, type, children}) => { return <> {type === "do" &&
{children &&
{children}
}

Do {text && {text}}

} {type === "dont" &&
{children &&
{children}
}

Don't {text && {text}}

} {type === "caution" &&
{children &&
{children}
}

Caution {text && {text}}

} ; }; There is no practical difference between placing legends labels on the left or right. Placement should be chosen based on what fits best with the surrounding UI and layout. Example of a donut chart using 4px spacing and direct labeling: A donut chart with direct labeling (#1)
  1. Headline
  2. Spacing: The space (1.4px) between donut sections
  3. Direct labeling
  4. Legend label
 ## 1. Show parts of a whole Donut charts illustrate proportions of a total and work best for showing how each slice contributes to the whole, not for making detailed comparisons between categories. donut chart using 4 variables for each slice, each representing a quarter donut chart using 4 variables for each slice, each representing a month ## 2. Total must equal 100% Ensure all slices together represent the full dataset and form a meaningful whole. Donut charts should only be used when all parts add up to 100% and clearly show how each category contributes to the total. donut chart using 4 variables for each slice, each representing a quarter donut chart using 4 variables for each slice, each representing a month ## 3. Group small slices Combine minor categories into an "Other" slice, and sort the remaining slices logically — either clockwise from largest to smallest, or in a meaningful order like time or category flow. Always place "Other" at the end to keep the chart organized and easy to interpret. donut chart using 8 variables with an 'Other' slice donut chart with too many small slices ## 4. Use color wisely Use color wisely in donut charts-apply the extended palette to differentiate categories when more than 5 are required, always ensuring clarity and accessibility. donut chart using 5 variables with contrasting colors donut chart using 5 variables with similar colors ## 5. Donut vs. Pie Donut charts are often preferred over pie charts in dashboards, as they provide a cleaner, more streamlined layout, allow for central labeling of key metrics, and help users interpret data proportions more easily at a glance. donut chart using 3 variables pie chart using 3 variables Contact the Visual Design team on the #ask-vizd channel