| 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 | Dual-Axis Line Chart Template |
| 6 | Usage: Display time-series changes of two metrics with different dimensions |
| 7 | Scenarios: Temperature/humidity monitoring, sales/profit ratio, traffic/conversion analysis, etc. |
| 8 | Example Data: Temperature (°C) + Relative Humidity (%) |
| 9 | Colors: Left axis warm coral (solid line with dots) | Right axis cool blue (dashed line with squares) |
| 10 | Canvas: 1280x720 (16:9) |
| 11 | --> |
| 12 | <defs> |
| 13 | <!-- Temperature curve area gradient --> |
| 14 | <linearGradient id="tempAreaGrad" x1="0%" y1="0%" x2="0%" y2="100%"> |
| 15 | <stop offset="0%" style="stop-color:#E17055;stop-opacity:0.15" /> |
| 16 | <stop offset="100%" style="stop-color:#E17055;stop-opacity:0.02" /> |
| 17 | </linearGradient> |
| 18 | <!-- Humidity curve area gradient --> |
| 19 | <linearGradient id="humidAreaGrad" x1="0%" y1="0%" x2="0%" y2="100%"> |
| 20 | <stop offset="0%" style="stop-color:#0984E3;stop-opacity:0.12" /> |
| 21 | <stop offset="100%" style="stop-color:#0984E3;stop-opacity:0.02" /> |
| 22 | </linearGradient> |
| 23 | </defs> |
| 24 | <!-- Background --> |
| 25 | <rect width="1280" height="720" fill="#F8FAFC"/> |
| 26 | <!-- Title --> |
| 27 | <g id="header" data-pptx-bounds="60 35 720 80"> |
| 28 | <text x="60" y="70" |
| 29 | font-size="34" font-weight="bold" fill="#0F172A">Revenue & Profit Margin Trend Analysis</text> |
| 30 | <text x="60" y="105" |
| 31 | font-size="16" fill="#64748B">Financial Performance · Q1-Q4 FY2025</text> |
| 32 | </g> |
| 33 | <!-- Phase annotation background (alternating color bands) --> |
| 34 | <g id="phase-labels" data-pptx-bounds="120 130 980 40"> |
| 35 | <rect x="140" y="130" width="158" height="40" fill="#E17055" fill-opacity="0.08" rx="6"/> |
| 36 | <rect x="298" y="130" width="237" height="40" fill="#E17055" fill-opacity="0.12" rx="6"/> |
| 37 | <rect x="535" y="130" width="158" height="40" fill="#0984E3" fill-opacity="0.08" rx="6"/> |
| 38 | <rect x="693" y="130" width="237" height="40" fill="#0984E3" fill-opacity="0.12" rx="6"/> |
| 39 | <rect x="930" y="130" width="158" height="40" fill="#6C5CE7" fill-opacity="0.08" rx="6"/> |
| 40 | <!-- Phase text annotations --> |
| 41 | <text x="219" y="155" |
| 42 | font-size="13" font-weight="600" fill="#DC2626" text-anchor="middle">Phase 01: Product Launch</text> |
| 43 | <text x="416.5" y="155" |
| 44 | font-size="13" font-weight="600" fill="#DC2626" text-anchor="middle">Phase 02: Rapid Growth</text> |
| 45 | <text x="614" y="155" |
| 46 | font-size="13" font-weight="600" fill="#2563EB" text-anchor="middle">Phase 03: Market Correction</text> |
| 47 | <text x="811.5" y="155" |
| 48 | font-size="13" font-weight="600" fill="#2563EB" text-anchor="middle">Phase 04: Stabilization</text> |
| 49 | <text x="1009" y="155" |
| 50 | font-size="13" font-weight="600" fill="#6C5CE7" text-anchor="middle">Phase 05: Recovery</text> |
| 51 | </g> |
| 52 | <!-- Chart Area --> |
| 53 | <g id="dual_axis_line_chart" data-pptx-bounds="14 181 1252 465" data-pptx-replace-with="chart"> |
| 54 | <metadata type="application/json"> |
| 55 | { |
| 56 | "name": "dual_axis_line_chart", |
| 57 | "x": 14, |
| 58 | "y": 181, |
| 59 | "width": 1252, |
| 60 | "height": 463, |
| 61 | "type": "combo", |
| 62 | "categories": ["Jan", "Mar", "Jun", "Sep", "Nov", "Dec"], |
| 63 | "plots": [ |
| 64 | { |
| 65 | "type": "line", |
| 66 | "line_style": "lineMarker", |
| 67 | "axis": "primary", |
| 68 | "series": [{"name": "Revenue ($M)", "values": [53, 96, 96, 13, 13, 53]}] |
| 69 | }, |
| 70 | { |
| 71 | "type": "line", |
| 72 | "line_style": "lineMarker", |
| 73 | "axis": "secondary", |
| 74 | "series": [{"name": "Profit Margin (%)", "values": [15, 35, 35, 8, 8, 15]}] |
| 75 | } |
| 76 | ], |
| 77 | "style": {"colors": ["#E17055", "#0984E3"]} |
| 78 | } |
| 79 | </metadata> |
| 80 | <g id="chartArea"> |
| 81 | <!-- Phase separator background color bands (alternating in chart) --> |
| 82 | <rect x="140" y="190" width="158" height="390" fill="#E17055" fill-opacity="0.03"/> |
| 83 | <rect x="298" y="190" width="237" height="390" fill="#E17055" fill-opacity="0.06"/> |
| 84 | <rect x="535" y="190" width="158" height="390" fill="#0984E3" fill-opacity="0.03"/> |
| 85 | <rect x="693" y="190" width="237" height="390" fill="#0984E3" fill-opacity="0.06"/> |
| 86 | <rect x="930" y="190" width="158" height="390" fill="#6C5CE7" fill-opacity="0.03"/> |
| 87 | <!-- Phase separator lines --> |
| 88 | <line x1="298" y1="190" x2="298" y2="580" stroke="#CBD5E1" stroke-width="1" stroke-dasharray="5,5"/> |
| 89 | <line x1="535" y1="190" x2="535" y2="580" stroke="#CBD5E1" stroke-width="1" stroke-dasharray="5,5"/> |
| 90 | <line x1="693" y1="190" x2="693" y2="580" stroke="#CBD5E1" stroke-width="1" stroke-dasharray="5,5"/> |
| 91 | <line x1="930" y1="190" x2="930" y2="580" stroke="#CBD5E1" stroke-width="1" stroke-dasharray="5,5"/> |
| 92 | <!-- Horizontal grid lines (aligned exactly with scale) --> |
| 93 | <line x1="140" y1="580" x2="1088" y2="580" stroke="#CBD5E1" stroke-width="1.5"/> |
| 94 | <line x1="140" y1="502" x2="1088" y2="502" stroke="#E2E8F0" stroke-width="1" stroke-dasharray="4,4"/> |
| 95 | <line x1="140" y1="424" x2="1088" y2="424" stroke="#E2E8F0" stroke-width="1" stroke-dasharray="4,4"/> |
| 96 | <line x1="140" y1="346" x2="1088" y2="346" stroke="#E2E8F0" stroke-width="1" stroke-dasharray="4,4"/> |
| 97 | <line x1="140" y1="268" x2="1088" y2="268" stroke="#E2E8F0" stroke-width="1" stroke-dasharray="4,4"/> |
| 98 | <line x1="140" y1="190" x2="1088" y2="190" stroke="#CBD5E1" stroke-width="1.5"/> |
| 99 | <!-- Left Y-axis - Temperature Scale (°C) --> |
| 100 | <text x="50" y="585" |
| 101 | font-size="14" font-weight="600" fill="#E17055" text-anchor="middle">0</text> |
| 102 | <text x="50" y="507" |
| 103 | font-size="14" fill="#E17055" text-anchor="middle">20</text> |
| 104 | <text x="50" y="429" |
| 105 | font-size="14" fill="#E17055" text-anchor="middle">40</text> |
| 106 | <text x="50" y="351" |
| 107 | font-size="14" fill="#E17055" text-anchor="middle">60</text> |
| 108 | <text x="50" y="273" |
| 109 | font-size="14" fill="#E17055" text-anchor="middle">80</text> |
| 110 | <text x="50" y="195" |
| 111 | font-size="14" font-weight="600" fill="#E17055" text-anchor="middle">100</text> |
| 112 | <!-- Left Y-axis Title --> |
| 113 | <text x="30" y="385" |
| 114 | font-size="16" font-weight="bold" fill="#E17055" text-anchor="middle" transform="rotate(-90, 30, 385)">Revenue ($M)</text> |
| 115 | <!-- Right Y-axis - Humidity Scale (%) --> |
| 116 | <text x="1190" y="585" |
| 117 | font-size="14" font-weight="600" fill="#0984E3" text-anchor="middle">0%</text> |
| 118 | <text x="1190" y="507" |
| 119 | font-size="14" fill="#0984E3" text-anchor="middle">10%</text> |
| 120 | <text x="1190" y="429" |
| 121 | font-size="14" fill="#0984E3" text-anchor="middle">20%</text> |
| 122 | <text x="1190" y="351" |
| 123 | font-size="14" fill="#0984E3" text-anchor="middle">30%</text> |
| 124 | <text x="1190" y="273" |
| 125 | font-size="14" fill="#0984E3" text-anchor="middle">40%</text> |
| 126 | <text x="1190" y="195" |
| 127 | font-size="14" font-weight="600" fill="#0984E3" text-anchor="middle">50%</text> |
| 128 | <!-- Right Y-axis Title --> |
| 129 | <text x="1250" y="385" |
| 130 | font-size="16" font-weight="bold" fill="#0984E3" text-anchor="middle" transform="rotate(90, 1250, 385)">Profit Margin (%)</text> |
| 131 | <!-- Axes --> |
| 132 | <line x1="140" y1="190" x2="140" y2="580" stroke="#94A3B8" stroke-width="2"/> |
| 133 | <line x1="140" y1="580" x2="1088" y2="580" stroke="#94A3B8" stroke-width="2"/> |
| 134 | <line x1="1088" y1="190" x2="1088" y2="580" stroke="#94A3B8" stroke-width="2"/> |
| 135 | <!-- chart-plot-area: 140,190,1088,580 --> |
| 136 | <!-- X-axis time labels --> |
| 137 | <text x="140" y="610" |
| 138 | font-size="13" fill="#475569" text-anchor="middle">Jan</text> |
| 139 | <text x="298" y="610" |
| 140 | font-size="13" fill="#475569" text-anchor="middle">Mar</text> |
| 141 | <text x="535" y="610" |
| 142 | font-size="13" fill="#475569" text-anchor="middle">Jun</text> |
| 143 | <text x="693" y="610" |
| 144 | font-size="13" fill="#475569" text-anchor="middle">Sep</text> |
| 145 | <text x="930" y="610" |
| 146 | font-size="13" fill="#475569" text-anchor="middle">Nov</text> |
| 147 | <text x="1088" y="610" |
| 148 | font-size="13" fill="#475569" text-anchor="middle">Dec</text> |
| 149 | <!-- X-axis Title --> |
| 150 | <text x="614" y="640" |
| 151 | font-size="16" font-weight="bold" fill="#475569" text-anchor="middle">Timeline (Months)</text> |
| 152 | <!-- Temperature area fill --> |
| 153 | <polygon points="140,372 298,203 535,203 693,528 930,528 1088,372 1088,580 140,580" |
| 154 | fill="url(#tempAreaGrad)"/> |
| 155 | <!-- Temperature curve (coral solid line + dots) --> |
| 156 | <polyline points="140,372 298,203 535,203 693,528 930,528 1088,372" |
| 157 | fill="none" stroke="#E17055" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> |
| 158 | <!-- Temperature data points (dots) --> |
| 159 | <circle cx="140" cy="372" r="6" fill="#E17055" stroke="#FFFFFF" stroke-width="2.5"/> |
| 160 | <circle cx="298" cy="203" r="6" fill="#E17055" stroke="#FFFFFF" stroke-width="2.5"/> |
| 161 | <circle cx="535" cy="203" r="6" fill="#E17055" stroke="#FFFFFF" stroke-width="2.5"/> |
| 162 | <circle cx="693" cy="528" r="6" fill="#E17055" stroke="#FFFFFF" stroke-width="2.5"/> |
| 163 | <circle cx="930" cy="528" r="6" fill="#E17055" stroke="#FFFFFF" stroke-width="2.5"/> |
| 164 | <circle cx="1088" cy="372" r="6" fill="#E17055" stroke="#FFFFFF" stroke-width="2.5"/> |
| 165 | <!-- Humidity area fill --> |
| 166 | <polygon points="140,327 298,248 535,248 693,463 930,463 1088,327 1088,580 140,580" |
| 167 | fill="url(#humidAreaGrad)"/> |
| 168 | <!-- Humidity curve (blue dashed line + square points) --> |
| 169 | <polyline points="140,327 298,248 535,248 693,463 930,463 1088,327" |
| 170 | fill="none" stroke="#0984E3" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8,5"/> |
| 171 | <!-- Humidity data points (squares) --> |
| 172 | <rect x="134" y="321" width="12" height="12" rx="2" fill="#0984E3" stroke="#FFFFFF" stroke-width="2.5"/> |
| 173 | <rect x="292" y="242" width="12" height="12" rx="2" fill="#0984E3" stroke="#FFFFFF" stroke-width="2.5"/> |
| 174 | <rect x="529" y="242" width="12" height="12" rx="2" fill="#0984E3" stroke="#FFFFFF" stroke-width="2.5"/> |
| 175 | <rect x="687" y="457" width="12" height="12" rx="2" fill="#0984E3" stroke="#FFFFFF" stroke-width="2.5"/> |
| 176 | <rect x="924" y="457" width="12" height="12" rx="2" fill="#0984E3" stroke="#FFFFFF" stroke-width="2.5"/> |
| 177 | <rect x="1082" y="321" width="12" height="12" rx="2" fill="#0984E3" stroke="#FFFFFF" stroke-width="2.5"/> |
| 178 | <!-- Key data annotations (colored labels, consistent with curve colors) --> |
| 179 | <!-- Start point - Temp 20℃ --> |
| 180 | <rect x="148" y="354" width="46" height="22" fill="#E17055" rx="4"/> |
| 181 | <text x="171" y="369" font-weight="600" fill="#FFFFFF" text-anchor="middle">$53M</text> |
| 182 | <!-- Start point - Hum 65% --> |
| 183 | <rect x="148" y="304" width="46" height="22" fill="#0984E3" rx="4"/> |
| 184 | <text x="171" y="319" font-weight="600" fill="#FFFFFF" text-anchor="middle">15%</text> |
| 185 | <!-- High temp point - Temp 85℃ --> |
| 186 | <rect x="306" y="184" width="46" height="22" fill="#E17055" rx="4"/> |
| 187 | <text x="329" y="199" font-weight="600" fill="#FFFFFF" text-anchor="middle">$96M</text> |
| 188 | <!-- High hum point - Hum 85% --> |
| 189 | <rect x="395" y="229" width="46" height="22" fill="#0984E3" rx="4"/> |
| 190 | <text x="418" y="244" font-weight="600" fill="#FFFFFF" text-anchor="middle">35%</text> |
| 191 | <!-- Low temp point - Temp -40℃ --> |
| 192 | <rect x="700" y="510" width="52" height="22" fill="#E17055" rx="4"/> |
| 193 | <text x="726" y="525" font-weight="600" fill="#FFFFFF" text-anchor="middle">$13M</text> |
| 194 | <!-- Low hum point - Hum 30% --> |
| 195 | <rect x="790" y="445" width="46" height="22" fill="#0984E3" rx="4"/> |
| 196 | <text x="813" y="460" font-weight="600" fill="#FFFFFF" text-anchor="middle">8%</text> |
| 197 | <!-- Reset point - Temp 20℃ --> |
| 198 | <rect x="1018" y="354" width="46" height="22" fill="#E17055" rx="4"/> |
| 199 | <text x="1041" y="369" font-weight="600" fill="#FFFFFF" text-anchor="middle">$53M</text> |
| 200 | <!-- Reset point - Hum 65% --> |
| 201 | <rect x="1018" y="304" width="46" height="22" fill="#0984E3" rx="4"/> |
| 202 | <text x="1041" y="319" font-weight="600" fill="#FFFFFF" text-anchor="middle">15%</text> |
| 203 | </g> |
| 204 | </g> |
| 205 | <!-- Legend --> |
| 206 | <g id="legend" data-pptx-bounds="420 660 440 45"> |
| 207 | <rect x="420" y="660" width="440" height="45" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5" rx="10"/> |
| 208 | <!-- Temperature legend (coral solid line + dots) --> |
| 209 | <line x1="450" y1="682" x2="490" y2="682" stroke="#E17055" stroke-width="3"/> |
| 210 | <circle cx="470" cy="682" r="5" fill="#E17055" stroke="#FFFFFF" stroke-width="2"/> |
| 211 | <text x="505" y="687" |
| 212 | font-size="15" font-weight="600" fill="#E17055">Revenue ($M)</text> |
| 213 | <!-- Humidity legend (blue dashed line + squares) --> |
| 214 | <line x1="650" y1="682" x2="690" y2="682" stroke="#0984E3" stroke-width="2.5" stroke-dasharray="8,5"/> |
| 215 | <rect x="664" y="676" width="12" height="12" rx="2" fill="#0984E3" stroke="#FFFFFF" stroke-width="2"/> |
| 216 | <text x="705" y="687" |
| 217 | font-size="15" font-weight="600" fill="#0984E3">Profit Margin (%)</text> |
| 218 | </g> |
| 219 | </svg> |
| 220 |