pbi-cli/assets/visual-types.svg

<svg xmlns="http://www.w3.org/2000/svg" width="850" height="440" viewBox="0 0 850 440">
  <rect width="100%" height="100%" fill="#0d1117" rx="8"/>

  <!-- Title -->
  <text x="425" y="30" font-family="'Segoe UI', Arial, sans-serif" font-size="20" fill="#F2C811" text-anchor="middle" font-weight="bold">32 Visual Types, All from CLI</text>
  <text x="425" y="50" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">pbi visual add --type &lt;alias&gt; -- use friendly names, pbi-cli handles the rest</text>

  <!-- Row 1: Charts (8) -->
  <text x="30" y="80" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#d97757" font-weight="bold">CHARTS</text>

  <!-- bar -->
  <rect x="30" y="90" width="90" height="70" rx="6" fill="#161b22" stroke="#d97757" stroke-width="1"/>
  <g transform="translate(45, 100)">
    <rect x="0" y="22" width="12" height="18" rx="2" fill="#d97757" opacity="0.5"/>
    <rect x="16" y="12" width="12" height="28" rx="2" fill="#d97757" opacity="0.7"/>
    <rect x="32" y="2" width="12" height="38" rx="2" fill="#d97757"/>
  </g>
  <text x="75" y="152" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">bar</text>

  <!-- line -->
  <rect x="130" y="90" width="90" height="70" rx="6" fill="#161b22" stroke="#d97757" stroke-width="1"/>
  <g transform="translate(145, 105)">
    <polyline points="0,28 15,18 30,22 45,5" fill="none" stroke="#d97757" stroke-width="2.5" stroke-linecap="round"/>
    <circle cx="0" cy="28" r="3" fill="#d97757"/>
    <circle cx="15" cy="18" r="3" fill="#d97757"/>
    <circle cx="30" cy="22" r="3" fill="#d97757"/>
    <circle cx="45" cy="5" r="3" fill="#d97757"/>
  </g>
  <text x="175" y="152" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">line</text>

  <!-- column -->
  <rect x="230" y="90" width="90" height="70" rx="6" fill="#161b22" stroke="#d97757" stroke-width="1"/>
  <g transform="translate(247, 98)">
    <rect x="0" y="20" width="14" height="22" rx="2" fill="#d97757" opacity="0.5"/>
    <rect x="18" y="8" width="14" height="34" rx="2" fill="#d97757" opacity="0.7"/>
    <rect x="36" y="0" width="14" height="42" rx="2" fill="#d97757"/>
  </g>
  <text x="275" y="152" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">column</text>

  <!-- area -->
  <rect x="330" y="90" width="90" height="70" rx="6" fill="#161b22" stroke="#d97757" stroke-width="1"/>
  <g transform="translate(345, 105)">
    <polygon points="0,30 15,18 30,22 50,5 50,30" fill="#d97757" fill-opacity="0.2" stroke="#d97757" stroke-width="1.5"/>
  </g>
  <text x="375" y="152" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">area</text>

  <!-- scatter -->
  <rect x="430" y="90" width="90" height="70" rx="6" fill="#161b22" stroke="#d97757" stroke-width="1"/>
  <g transform="translate(448, 100)">
    <circle cx="8" cy="30" r="4" fill="#d97757" opacity="0.4"/>
    <circle cx="20" cy="15" r="5" fill="#d97757" opacity="0.6"/>
    <circle cx="35" cy="22" r="3" fill="#d97757" opacity="0.8"/>
    <circle cx="48" cy="8" r="6" fill="#d97757"/>
    <circle cx="30" cy="35" r="3" fill="#d97757" opacity="0.5"/>
  </g>
  <text x="475" y="152" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">scatter</text>

  <!-- combo -->
  <rect x="530" y="90" width="90" height="70" rx="6" fill="#161b22" stroke="#d97757" stroke-width="1"/>
  <g transform="translate(545, 100)">
    <rect x="0" y="20" width="10" height="20" rx="1" fill="#d97757" opacity="0.5"/>
    <rect x="14" y="10" width="10" height="30" rx="1" fill="#d97757" opacity="0.7"/>
    <rect x="28" y="15" width="10" height="25" rx="1" fill="#d97757" opacity="0.6"/>
    <rect x="42" y="5" width="10" height="35" rx="1" fill="#d97757"/>
    <polyline points="5,18 19,8 33,12 47,3" fill="none" stroke="#58a6ff" stroke-width="2" stroke-linecap="round"/>
  </g>
  <text x="575" y="152" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">combo</text>

  <!-- donut -->
  <rect x="630" y="90" width="90" height="70" rx="6" fill="#161b22" stroke="#d97757" stroke-width="1"/>
  <g transform="translate(660, 105)">
    <circle cx="15" cy="15" r="15" fill="none" stroke="#d97757" stroke-width="6" stroke-dasharray="25 70" stroke-dashoffset="0"/>
    <circle cx="15" cy="15" r="15" fill="none" stroke="#F2C811" stroke-width="6" stroke-dasharray="20 70" stroke-dashoffset="-25"/>
    <circle cx="15" cy="15" r="15" fill="none" stroke="#58a6ff" stroke-width="6" stroke-dasharray="15 70" stroke-dashoffset="-45"/>
  </g>
  <text x="675" y="152" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">donut</text>

  <!-- waterfall -->
  <rect x="730" y="90" width="90" height="70" rx="6" fill="#161b22" stroke="#d97757" stroke-width="1"/>
  <g transform="translate(748, 100)">
    <rect x="0" y="0" width="10" height="35" rx="1" fill="#06d6a0"/>
    <rect x="14" y="10" width="10" height="10" rx="1" fill="#06d6a0"/>
    <rect x="28" y="15" width="10" height="8" rx="1" fill="#ff6b6b"/>
    <rect x="42" y="20" width="10" height="15" rx="1" fill="#06d6a0"/>
  </g>
  <text x="775" y="152" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">waterfall</text>

  <!-- Row 2: Cards & KPIs + Tables (6) -->
  <text x="30" y="182" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#06d6a0" font-weight="bold">CARDS &amp; KPIs</text>

  <!-- card -->
  <rect x="30" y="192" width="90" height="70" rx="6" fill="#161b22" stroke="#06d6a0" stroke-width="1"/>
  <g transform="translate(48, 202)">
    <rect x="0" y="0" width="52" height="35" rx="4" fill="none" stroke="#06d6a0" stroke-width="1.2"/>
    <text x="26" y="24" font-family="'Segoe UI', Arial, sans-serif" font-size="18" fill="#06d6a0" text-anchor="middle" font-weight="bold">42K</text>
  </g>
  <text x="75" y="254" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">card</text>

  <!-- cardVisual -->
  <rect x="130" y="192" width="90" height="70" rx="6" fill="#161b22" stroke="#06d6a0" stroke-width="1"/>
  <g transform="translate(148, 202)">
    <rect x="0" y="0" width="52" height="35" rx="4" fill="#06d6a0" fill-opacity="0.08" stroke="#06d6a0" stroke-width="1.2"/>
    <text x="26" y="16" font-family="'Segoe UI', Arial, sans-serif" font-size="8" fill="#8b949e" text-anchor="middle">Revenue</text>
    <text x="26" y="30" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#06d6a0" text-anchor="middle" font-weight="bold">$1.2M</text>
  </g>
  <text x="175" y="254" font-family="'Courier New', Courier, monospace" font-size="9" fill="#8b949e" text-anchor="middle">card_visual</text>

  <!-- kpi -->
  <rect x="230" y="192" width="90" height="70" rx="6" fill="#161b22" stroke="#06d6a0" stroke-width="1"/>
  <g transform="translate(250, 204)">
    <text x="24" y="14" font-family="'Segoe UI', Arial, sans-serif" font-size="16" fill="#06d6a0" text-anchor="middle" font-weight="bold">85%</text>
    <polyline points="0,28 10,24 20,26 30,20 40,18 50,22" fill="none" stroke="#06d6a0" stroke-width="1.5" stroke-opacity="0.5"/>
    <text x="24" y="38" font-family="'Segoe UI', Arial, sans-serif" font-size="8" fill="#8b949e" text-anchor="middle">Goal: 80%</text>
  </g>
  <text x="275" y="254" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">kpi</text>

  <!-- gauge -->
  <rect x="330" y="192" width="90" height="70" rx="6" fill="#161b22" stroke="#06d6a0" stroke-width="1"/>
  <g transform="translate(355, 204)">
    <path d="M 5,32 A 20,20 0 0,1 45,32" fill="none" stroke="#8b949e" stroke-width="4" stroke-linecap="round"/>
    <path d="M 5,32 A 20,20 0 0,1 35,16" fill="none" stroke="#06d6a0" stroke-width="4" stroke-linecap="round"/>
    <text x="25" y="38" font-family="'Segoe UI', Arial, sans-serif" font-size="10" fill="#06d6a0" text-anchor="middle" font-weight="bold">72%</text>
  </g>
  <text x="375" y="254" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">gauge</text>

  <text x="440" y="182" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#58a6ff" font-weight="bold">TABLES</text>

  <!-- table -->
  <rect x="430" y="192" width="90" height="70" rx="6" fill="#161b22" stroke="#58a6ff" stroke-width="1"/>
  <g transform="translate(442, 202)">
    <rect x="0" y="0" width="66" height="38" rx="3" fill="none" stroke="#58a6ff" stroke-width="1"/>
    <line x1="0" y1="10" x2="66" y2="10" stroke="#58a6ff" stroke-width="0.8"/>
    <line x1="0" y1="20" x2="66" y2="20" stroke="#58a6ff" stroke-width="0.5" stroke-opacity="0.4"/>
    <line x1="0" y1="30" x2="66" y2="30" stroke="#58a6ff" stroke-width="0.5" stroke-opacity="0.4"/>
    <line x1="22" y1="0" x2="22" y2="38" stroke="#58a6ff" stroke-width="0.5" stroke-opacity="0.3"/>
    <line x1="44" y1="0" x2="44" y2="38" stroke="#58a6ff" stroke-width="0.5" stroke-opacity="0.3"/>
  </g>
  <text x="475" y="254" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">table</text>

  <!-- matrix -->
  <rect x="530" y="192" width="90" height="70" rx="6" fill="#161b22" stroke="#58a6ff" stroke-width="1"/>
  <g transform="translate(542, 202)">
    <rect x="0" y="0" width="66" height="38" rx="3" fill="none" stroke="#58a6ff" stroke-width="1"/>
    <rect x="0" y="0" width="18" height="10" rx="2" fill="#58a6ff" fill-opacity="0.15"/>
    <line x1="0" y1="10" x2="66" y2="10" stroke="#58a6ff" stroke-width="0.8"/>
    <line x1="18" y1="0" x2="18" y2="38" stroke="#58a6ff" stroke-width="0.8"/>
    <line x1="0" y1="20" x2="66" y2="20" stroke="#58a6ff" stroke-width="0.5" stroke-opacity="0.4"/>
    <line x1="0" y1="30" x2="66" y2="30" stroke="#58a6ff" stroke-width="0.5" stroke-opacity="0.4"/>
  </g>
  <text x="575" y="254" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">matrix</text>

  <!-- Row 3: Slicers + Maps + Decorative -->
  <text x="30" y="284" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#F2C811" font-weight="bold">SLICERS</text>

  <!-- slicer -->
  <rect x="30" y="294" width="90" height="70" rx="6" fill="#161b22" stroke="#F2C811" stroke-width="1"/>
  <g transform="translate(48, 302)">
    <rect x="0" y="0" width="52" height="40" rx="3" fill="none" stroke="#F2C811" stroke-width="1"/>
    <rect x="4" y="6" width="44" height="8" rx="2" fill="#F2C811" fill-opacity="0.2"/>
    <rect x="4" y="18" width="44" height="8" rx="2" fill="#F2C811" fill-opacity="0.1"/>
    <rect x="4" y="30" width="44" height="8" rx="2" fill="#F2C811" fill-opacity="0.1"/>
    <rect x="6" y="7" width="6" height="6" rx="1" fill="#F2C811"/>
  </g>
  <text x="75" y="356" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">slicer</text>

  <!-- text_slicer -->
  <rect x="130" y="294" width="90" height="70" rx="6" fill="#161b22" stroke="#F2C811" stroke-width="1"/>
  <g transform="translate(148, 306)">
    <rect x="0" y="0" width="52" height="28" rx="3" fill="none" stroke="#F2C811" stroke-width="1"/>
    <text x="8" y="18" font-family="'Courier New', Courier, monospace" font-size="10" fill="#F2C811">Search...</text>
  </g>
  <text x="175" y="356" font-family="'Courier New', Courier, monospace" font-size="9" fill="#8b949e" text-anchor="middle">text_slicer</text>

  <text x="240" y="284" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#7b61ff" font-weight="bold">MAPS</text>

  <!-- azureMap -->
  <rect x="230" y="294" width="90" height="70" rx="6" fill="#161b22" stroke="#7b61ff" stroke-width="1"/>
  <g transform="translate(252, 302)">
    <circle cx="22" cy="20" r="18" fill="none" stroke="#7b61ff" stroke-width="1.2" stroke-opacity="0.3"/>
    <circle cx="14" cy="15" r="4" fill="#7b61ff" opacity="0.5"/>
    <circle cx="28" cy="12" r="6" fill="#7b61ff" opacity="0.7"/>
    <circle cx="20" cy="28" r="3" fill="#7b61ff" opacity="0.4"/>
    <circle cx="34" cy="24" r="5" fill="#7b61ff"/>
  </g>
  <text x="275" y="356" font-family="'Courier New', Courier, monospace" font-size="9" fill="#8b949e" text-anchor="middle">azure_map</text>

  <text x="340" y="284" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#ff6b6b" font-weight="bold">MORE CHARTS</text>

  <!-- funnel -->
  <rect x="330" y="294" width="90" height="70" rx="6" fill="#161b22" stroke="#ff6b6b" stroke-width="1"/>
  <g transform="translate(348, 302)">
    <polygon points="0,0 52,0 40,14 12,14" fill="#ff6b6b" fill-opacity="0.15" stroke="#ff6b6b" stroke-width="1"/>
    <polygon points="12,16 40,16 34,28 18,28" fill="#ff6b6b" fill-opacity="0.25" stroke="#ff6b6b" stroke-width="1"/>
    <polygon points="18,30 34,30 30,40 22,40" fill="#ff6b6b" fill-opacity="0.4" stroke="#ff6b6b" stroke-width="1"/>
  </g>
  <text x="375" y="356" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">funnel</text>

  <!-- treemap -->
  <rect x="430" y="294" width="90" height="70" rx="6" fill="#161b22" stroke="#ff6b6b" stroke-width="1"/>
  <g transform="translate(442, 302)">
    <rect x="0" y="0" width="34" height="24" rx="2" fill="#ff6b6b" opacity="0.4"/>
    <rect x="36" y="0" width="30" height="12" rx="2" fill="#ff6b6b" opacity="0.6"/>
    <rect x="36" y="14" width="30" height="10" rx="2" fill="#ff6b6b" opacity="0.3"/>
    <rect x="0" y="26" width="20" height="16" rx="2" fill="#ff6b6b" opacity="0.7"/>
    <rect x="22" y="26" width="22" height="16" rx="2" fill="#ff6b6b" opacity="0.5"/>
    <rect x="46" y="26" width="20" height="16" rx="2" fill="#ff6b6b" opacity="0.2"/>
  </g>
  <text x="475" y="356" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">treemap</text>

  <!-- ribbon -->
  <rect x="530" y="294" width="90" height="70" rx="6" fill="#161b22" stroke="#ff6b6b" stroke-width="1"/>
  <g transform="translate(545, 305)">
    <path d="M 0,25 Q 15,20 30,22 Q 45,24 60,20" fill="#ff6b6b" fill-opacity="0.3" stroke="#ff6b6b" stroke-width="1.5"/>
    <path d="M 0,18 Q 15,12 30,15 Q 45,18 60,10" fill="#d97757" fill-opacity="0.3" stroke="#d97757" stroke-width="1.5"/>
    <path d="M 0,10 Q 15,5 30,8 Q 45,6 60,2" fill="#F2C811" fill-opacity="0.3" stroke="#F2C811" stroke-width="1.5"/>
  </g>
  <text x="575" y="356" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">ribbon</text>

  <text x="640" y="284" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#a0c4ff" font-weight="bold">DECORATIVE</text>

  <!-- image -->
  <rect x="630" y="294" width="90" height="70" rx="6" fill="#161b22" stroke="#a0c4ff" stroke-width="1"/>
  <g transform="translate(648, 304)">
    <rect x="0" y="0" width="50" height="36" rx="3" fill="none" stroke="#a0c4ff" stroke-width="1"/>
    <circle cx="14" cy="12" r="5" fill="#F2C811" opacity="0.5"/>
    <polygon points="8,30 22,16 34,26 42,20 50,28 50,36 0,36" fill="#a0c4ff" fill-opacity="0.2"/>
  </g>
  <text x="675" y="356" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">image</text>

  <!-- textbox -->
  <rect x="730" y="294" width="90" height="70" rx="6" fill="#161b22" stroke="#a0c4ff" stroke-width="1"/>
  <g transform="translate(748, 306)">
    <rect x="0" y="0" width="50" height="28" rx="3" fill="none" stroke="#a0c4ff" stroke-width="1"/>
    <line x1="6" y1="9" x2="44" y2="9" stroke="#a0c4ff" stroke-width="1" stroke-opacity="0.4"/>
    <line x1="6" y1="17" x2="36" y2="17" stroke="#a0c4ff" stroke-width="1" stroke-opacity="0.3"/>
    <line x1="6" y1="24" x2="26" y2="24" stroke="#a0c4ff" stroke-width="1" stroke-opacity="0.2"/>
  </g>
  <text x="775" y="356" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">textbox</text>

  <!-- Footer: +14 more -->
  <text x="425" y="392" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">+ stacked_bar, clustered_bar, clustered_column, list_slicer, advanced_slicer,</text>
  <text x="425" y="410" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">card_new, multi_row_card, shape, action_button, page_navigator, and more</text>

  <text x="425" y="435" font-family="'Courier New', Courier, monospace" font-size="14" fill="#58a6ff" text-anchor="middle" font-weight="bold">pbi visual add --type bar --page overview --name my_chart</text>
</svg>