| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720" |
| 2 | font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" |
| 3 | font-size="12"> |
| 4 | <!-- |
| 5 | Bar of Pie Chart Template |
| 6 | Purpose: Expand small pie slices into a stacked bar |
| 7 | Use cases: long-tail composition, category share decomposition, expense detail |
| 8 | Feature: Native bar-of-pie marker with fallback split bar detail |
| 9 | --> |
| 10 | |
| 11 | <rect width="1280" height="720" fill="#FFFFFF"/> |
| 12 | <g id="header" data-pptx-bounds="40 15 1200 125"> |
| 13 | <text x="60" y="78" |
| 14 | font-size="34" font-weight="800" fill="#0F172A"><tspan>Category Share with Bar Detail</tspan></text> |
| 15 | <text x="60" y="112" |
| 16 | font-size="14" font-weight="700" fill="#64748B" letter-spacing="1"><tspan>BAR OF PIE · STACKED DETAIL FOR SMALL SEGMENTS</tspan></text> |
| 17 | </g> |
| 18 | <g id="bar_of_pie_chart" data-pptx-bounds="0 115 1062 510" data-pptx-replace-with="chart"> |
| 19 | <metadata type="application/json"> |
| 20 | { |
| 21 | "name": "bar_of_pie_chart", |
| 22 | "x": 80, |
| 23 | "y": 145, |
| 24 | "width": 900, |
| 25 | "height": 450, |
| 26 | "type": "barOfPie", |
| 27 | "categories": ["Product A", "Product B", "Product C", "Tail D", "Tail E", "Tail F"], |
| 28 | "series": [ |
| 29 | {"name": "Share", "values": [45, 25, 12, 8, 6, 4]} |
| 30 | ], |
| 31 | "style": {"colors": ["#2563EB", "#10B981", "#F59E0B", "#8B5CF6", "#EC4899", "#94A3B8"]} |
| 32 | } |
| 33 | </metadata> |
| 34 | <g id="chartArea"> |
| 35 | <rect x="80" y="145" width="900" height="450" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 36 | <!-- chart-plot-area: bar-of-pie | pie-center: 360,370 | radius: 170 | bar: 720,240,900,500 --> |
| 37 | <g id="mainPie"> |
| 38 | <circle cx="360" cy="370" r="170" fill="#EFF6FF"/> |
| 39 | <path d="M 360,370 L 360,200 A 170,170 0 1,1 307.5,531.7 Z" fill="#2563EB" stroke="#FFFFFF" stroke-width="4" stroke-linejoin="round"/> |
| 40 | <path d="M 360,370 L 307.5,531.7 A 170,170 0 0,1 198.3,317.5 Z" fill="#10B981" stroke="#FFFFFF" stroke-width="4" stroke-linejoin="round"/> |
| 41 | <path d="M 360,370 L 198.3,317.5 A 170,170 0 0,1 360,200 Z" fill="#F59E0B" stroke="#FFFFFF" stroke-width="4" stroke-linejoin="round"/> |
| 42 | <text x="360" y="374" font-size="28" font-weight="800" fill="#FFFFFF" text-anchor="middle"><tspan>82%</tspan></text> |
| 43 | <text x="360" y="570" font-size="13" font-weight="700" fill="#475569" text-anchor="middle"><tspan>Primary slices</tspan></text> |
| 44 | </g> |
| 45 | <g id="connectorLines"> |
| 46 | <line x1="515" y1="300" x2="720" y2="240" stroke="#CBD5E1" stroke-width="2"/> |
| 47 | <line x1="515" y1="440" x2="720" y2="500" stroke="#CBD5E1" stroke-width="2"/> |
| 48 | </g> |
| 49 | <g id="tailBar"> |
| 50 | <rect x="720" y="240" width="180" height="116" fill="#8B5CF6"/> |
| 51 | <rect x="720" y="356" width="180" height="87" fill="#EC4899"/> |
| 52 | <rect x="720" y="443" width="180" height="57" fill="#94A3B8"/> |
| 53 | <rect x="720" y="240" width="180" height="260" fill="none" stroke="#FFFFFF" stroke-width="4"/> |
| 54 | <text x="810" y="306" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle"><tspan>Tail D · 8%</tspan></text> |
| 55 | <text x="810" y="407" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle"><tspan>Tail E · 6%</tspan></text> |
| 56 | <text x="810" y="478" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle"><tspan>Tail F · 4%</tspan></text> |
| 57 | <text x="810" y="570" font-size="13" font-weight="700" fill="#475569" text-anchor="middle"><tspan>Stacked tail detail</tspan></text> |
| 58 | </g> |
| 59 | </g> |
| 60 | </g> |
| 61 | <g id="splitPanel" data-pptx-bounds="981 146 278 408" transform="translate(1010, 170)"> |
| 62 | <rect x="0" y="0" width="220" height="360" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 63 | <text x="24" y="38" font-size="16" font-weight="800" fill="#0F172A"><tspan>Split Logic</tspan></text> |
| 64 | <line x1="24" y1="58" x2="196" y2="58" stroke="#E2E8F0"/> |
| 65 | <text x="24" y="95" font-size="13" font-weight="700" fill="#64748B"><tspan>Main pie</tspan></text> |
| 66 | <text x="24" y="124" font-size="28" font-weight="800" fill="#2563EB"><tspan>82%</tspan></text> |
| 67 | <text x="24" y="165" font-size="13" font-weight="700" fill="#64748B"><tspan>Stacked detail</tspan></text> |
| 68 | <text x="24" y="194" font-size="28" font-weight="800" fill="#8B5CF6"><tspan>18%</tspan></text> |
| 69 | <rect x="24" y="235" width="172" height="78" rx="8" fill="#F5F3FF" stroke="#DDD6FE"/> |
| 70 | <text x="42" y="263" font-size="13" font-weight="800" fill="#6D28D9"><tspan>Best when</tspan></text> |
| 71 | <text x="42" y="286" font-weight="600" fill="#475569"><tspan>tail slices need</tspan></text> |
| 72 | <text x="42" y="304" font-weight="600" fill="#475569"><tspan>ranked comparison.</tspan></text> |
| 73 | </g> |
| 74 | <g id="source" data-pptx-bounds="40 670 1200 40"> |
| 75 | <text x="60" y="695" |
| 76 | font-size="14" font-weight="600" fill="#94A3B8"><tspan>Data Source: Product Analytics</tspan></text> |
| 77 | </g> |
| 78 | </svg> |
| 79 |