Prism · worked guide
A pie chart palette separates parts of a single total, but color alone should never carry the data. Pair high-contrast slice fills with explicit category names, percentages or counts, and a stated denominator so the chart stays readable across screens, printouts and color-vision differences.
Open the pie chart maker →Prism · inspect the actual output
Use distinct colors to separate categories, then provide category names and values so color is not the only way to read the chart. This actual Bold render uses three fictional support channels: Email 40, Chat 35 and Phone 25, for a total of 100 requests. The labels show both the category and its share.
If Email is blue in one view, keep that mapping when presenting the same categories elsewhere. Moving a category to a different position should not make the reader infer that the meaning of its color changed.
In this source table, Email is 40 of 100, Chat is 35 of 100 and Phone is 25 of 100. Keep a visible text equivalent alongside the visual. A palette alone is not an accessibility certification; check labels, contrast, scale and the surrounding page.
Use categories that form the intended total. These three supplied counts sum to 100; the file does not provide a real observation period or explain whether the categories overlap. Negative values, changing denominators and many small slices need a different presentation or clearer source definitions.
The chart maker starts with Bold. Review the result at its intended display size before exporting. Choose colors for this chart's reading task, and keep meaningful labels when using the chart in an article, report or deck.
Use distinct colors to separate categories, then provide category names and values so color is not the only way to read the chart. This actual Bold render uses three fictional support channels: Email 40, Chat 35 and Phone 25, for a total of 100 requests. The labels show both the category and its share. The support counts are fictional supplied inputs, not customer support results. The actual palette is blue, red and green; the adjacent text values carry the meaning independently. Bold remains the product default; this guide changes no saved preferences.
The support counts are fictional supplied inputs, not customer support results. The actual palette is blue, red and green; the adjacent text values carry the meaning independently. Bold remains the product default; this guide changes no saved preferences.
This table lists the exact fictional inputs and slice fills from the deterministic Prism SVG output above.
| Slice | Value, fill and review point |
|---|---|
40 of 100 requests (40%, 144 degrees) rendered in blue (#2563EB) with a matching legend label. | |
| Chat | 35 of 100 requests (35%, 126 degrees) rendered in red (#DC2626) with a matching legend label. |
| Phone | 25 of 100 requests (25%, 90 degrees) rendered in green (#059669) with a matching legend label. |
| Starting theme | Rendered with Prism’s default Bold preset (brand-bold) on a light #F8FAFC card surface. |
| Whole check | The three supplied counts sum to 100 Fictional Requests; verify that categories are mutually exclusive before using a pie. |
When a report shows the same categories in more than one chart, keep each category tied to the same color rather than reassigning colors by rank order alone. If a category has more than five or six slices, or if readers need to compare close values across time periods, switch to a bar or stacked bar chart and keep the source table beside the figure.
Updated
