Tailwind CSS Pie & Radial Charts Blocks

All Blocks
Application UI
Data Display
Pie & Radial Charts

Pie & Radial Charts

Tailwind CSS pie, doughnut, radial bar, gauge, and bubble chart blocks for dashboards, analytics, reporting, and KPI widgets.

Radial Chart Card with Legend List Pro

A radial plot sits above a short legend list, with each segment called out below the chart.

Create a responsive UI block named "Radial Chart Card with Legend List" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/pie-radial-charts/#radial-chart-card-with-legend-list. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: data-display/pie-radial-charts
- Block ID: radial-chart-card-with-legend-list
- Source description: A radial plot sits above a short legend list, with each segment called out below the chart.
- Preview iframe: https://preline.co/blocks/data-display/pie-radial-charts/iframes/pro/radial-chart-card-with-legend-list.html (repo path: blocks/data-display/pie-radial-charts/iframes/pro/radial-chart-card-with-legend-list.html)
- Source markup reference:
  - partials/pro/analytics-dashboard/cards/survey-data-with-radial-bar.html
  - partials/pro/css/third-party/charts.html
  - scripts/plugins/apexcharts.html
  - partials/pro/analytics-dashboard/js/survey-data-with-radial-bar.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="p-5 flex flex-col bg-card border border-card-line shadow-xs rounded-xl overflow-hidden">
      
      <div class="flex gap-3">
        <div class="mt-0.5 flex shrink-0 justify-center items-center size-8 bg-surface text-surface-foreground rounded-md">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="6" height="6" rx="1"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/></svg>
        </div>

<div class="grow">
          <h2 class="font-medium text-sm sm:text-base text-foreground">
            Which CSS framework do you use the most?
          </h2>
      
          
          <ul class="flex flex-wrap items-center whitespace-nowrap gap-1.5">
            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
              <p class="text-xs text-muted-foreground-1">
                Multiple choice
              </p>
            </li>
            <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
              <p class="text-xs text-muted-foreground-1">
                75 responses
              </p>
            </li>
          </ul>
          
        </div>
      </div>

<div class="flex flex-col gap-3 sm:gap-5">
          
          <div class="flex gap-2">
            <span class="shrink-0 size-2.5 inline-block bg-chart-primary rounded-full mt-2"></span>
            <div class="grow">
              <div>
                <span class="font-semibold text-sm text-foreground">
                  60%
                </span>
                <span class="text-sm text-foreground">
                  - Tailwind CSS
                </span>
              </div>
              <p class="text-xs text-muted-foreground-1">
                39 response
              </p>
            </div>
          </div>

<div class="flex gap-2">
            <span class="shrink-0 size-2.5 inline-block bg-chart-6 rounded-full mt-2"></span>
            <div class="grow">
              <div>
                <span class="font-semibold text-sm text-foreground">
                  30%
                </span>
                <span class="text-sm text-foreground">
                  - Bootstrap
                </span>
              </div>
              <p class="text-xs text-muted-foreground-1">
                27 response
              </p>
            </div>
          </div>

<div class="flex gap-2">
            <span class="shrink-0 size-2.5 inline-block bg-chart-9 rounded-full mt-2"></span>
            <div class="grow">
              <div>
                <span class="font-semibold text-sm text-foreground">
                  10%
                </span>
                <span class="text-sm text-foreground">
                  - Other
                </span>
              </div>
              <p class="text-xs text-muted-foreground-1">
                9 response
              </p>
            </div>
          </div>
          
        </div>
      </div>
    </div>

html.classList.toggle("dark", resolvedAppearance === "dark");
        html.setAttribute("data-theme", `theme-${colorTheme}`);
        if (brand) html.setAttribute("data-brand", brand);
        if (font) html.setAttribute("data-font", font);
      })();
    </script>

if (!data.type) return false;
        if (data.type === "hs:color-theme-change") {
          window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
            detail: {
              target: document.documentElement,
              value: data.value
            }
          }));
        }
      });
    </script>

Open related analytics survey page

Total expenses head a pie chart and a color-keyed category list that expands to show every remaining category.

Create a responsive UI block named "Expense Breakdown Card with Pie Chart and Category List" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/pie-radial-charts/#expense-breakdown-card-with-pie-chart-and-category-list. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/pie-radial-charts
- Block ID: expense-breakdown-card-with-pie-chart-and-category-list
- Source description: Total expenses head a pie chart and a color-keyed category list that expands to show every remaining category.
- Preview iframe: https://preline.co/blocks/data-display/pie-radial-charts/iframes/pro/expense-breakdown-card-with-pie-chart-and-category-list.html (repo path: blocks/data-display/pie-radial-charts/iframes/pro/expense-breakdown-card-with-pie-chart-and-category-list.html)
- Source markup reference:
  - partials/pro/finance-tracker/cards/expenses-breakdown.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/finance-tracker/css/chart-outside-labels.html
  - scripts/plugins/apexcharts.html
  - partials/pro/finance-tracker/js/expenses-pie-chart.html

Block-specific fidelity rules:
- Preserve chart/data behavior when present: axes, scale, legends, tooltip rows, colored keys, empty states, responsive height, and the original chart library/data-binding pattern.
- Do not replace charts, maps, sparklines, or data widgets with static SVG or decorative approximations.
- Source content inventory (from the source markup):
  - Header row pairs an `h2` reading `Expenses` with an `Add expense` button carrying a plus icon.
  - Metric block reads `Total expenses`, a red down-arrow delta `4.2%`, the qualifier `vs last month`, then `$3,020` at `text-2xl sm:text-3xl tabular-nums`.
  - The chart is an empty `div` with `class="hs-chart-outside-labels w-full"` and `role="img"`. Its `id` is only a binding target for the init script - rename it freely, but keep the `hs-chart-outside-labels` class, which is what the stylesheet hooks on.
  - Six categories are always visible, in order with emoji, label, and amount: `🏠 Housing $850.00`, `🍜 Food $620.00`, `🚗 Transport $420.00`, `⚡ Utilities $265.00`, `🏥 Healthcare $210.00`, `🎬 Entertainment $180.00`. Each row leads with a `size-2.5` color dot using `bg-primary`, `bg-chart-6`, `bg-chart-7`, `bg-chart-5`, `bg-chart-4`, `bg-chart-3` in that order.
  - Six more categories sit inside a Preline `hs-collapse` region `#hs-finance-expenses-rest`, all keyed `bg-chart-10`: `🛍️ Shopping $165.00`, `📱 Subscriptions $95.00`, `🏋️ Fitness $75.00`, `🎓 Education $60.00`, `🐾 Pets $45.00`, `🎁 Gifts $35.00`. The toggle swaps `Show all 12 categories` for `Show fewer categories`.
  - Cents are always rendered in the muted foreground next to a `tabular-nums` whole amount.
  - ApexCharts pie chart, height 268, `plotOptions.pie.customScale: 0.70`, `expandOnClick: false`, data labels and legend off, and animations disabled so a late `updateOptions()` from the theme/brand/font initialisers cannot strand the slices.
  - The chart plots only the seven largest categories; everything below that is merged into one slice labelled `Other (n)` with the `📦` emoji so the merge is obvious rather than looking like missing data.
  - ApexCharts has no outside pie labels, so the script draws them itself as an SVG group `hs-pie-outside-labels` with elbow leader lines, re-rendered on `mounted`, `updated`, and `animationEnd`, and pulled back inside the viewport when horizontal space runs short. the accompanying stylesheet sets `overflow: visible` on `.hs-chart-outside-labels .apexcharts-canvas` and `.apexcharts-svg` so those labels are not clipped, and styles the generated `.hs-pie-outside-label-name` / `.hs-pie-outside-label-value` text. Port those as class rules; do not re-key them to an id.
  - In the source page this article is the right half of a two-column grid, so it carries `2xl:ps-5 2xl:pt-0` - re-map that padding when the destination places the card on its own.

<article class="pt-5 min-w-0 flex flex-col 2xl:ps-5 2xl:pt-0" aria-labelledby="expenses-heading">
      <div class="flex items-center justify-between gap-3">
        <h2 id="expenses-heading" class="font-medium text-foreground">Expenses</h2>

<button type="button" class="py-2 px-2.5 shrink-0 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ft-add-expense" data-hs-overlay="#hs-ft-add-expense">
          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
          Add expense
        </button>
      </div>

<div class="mt-4">
        <div class="flex items-center gap-x-2">
          <p class="text-sm text-muted-foreground-1">Total expenses</p>
          <span id="hs-finance-expenses-change" class="inline-flex items-center gap-x-1 text-sm text-red-600 dark:text-red-500">
            <svg class="size-4 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 12-7 7-7-7"/><path d="M12 5v14"/></svg>
            <span id="hs-finance-expenses-change-label" class="tabular-nums">4.2%</span>
          </span>

<span class="text-sm text-muted-foreground-1">vs last month</span>
        </div>

<ul class="mt-2 border-t border-line-2 divide-y divide-line-2" aria-label="Top expense categories">
          <li class="py-3 flex items-center gap-x-3">
            <span class="shrink-0 size-2.5 bg-primary rounded-full" aria-hidden="true"></span>
            <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">🏠</span> Housing</span>
            <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$850<span class="text-muted-foreground">.00</span></span>
          </li>
          <li class="py-3 flex items-center gap-x-3">
            <span class="shrink-0 size-2.5 bg-chart-6 rounded-full" aria-hidden="true"></span>
            <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">🍜</span> Food</span>
            <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$620<span class="text-muted-foreground">.00</span></span>
          </li>
          <li class="py-3 flex items-center gap-x-3">
            <span class="shrink-0 size-2.5 bg-chart-7 rounded-full" aria-hidden="true"></span>
            <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">🚗</span> Transport</span>
            <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$420<span class="text-muted-foreground">.00</span></span>
          </li>
          <li class="py-3 flex items-center gap-x-3">
            <span class="shrink-0 size-2.5 bg-chart-5 rounded-full" aria-hidden="true"></span>
            <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">⚡</span> Utilities</span>
            <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$265<span class="text-muted-foreground">.00</span></span>
          </li>
          <li class="py-3 flex items-center gap-x-3">
            <span class="shrink-0 size-2.5 bg-chart-4 rounded-full" aria-hidden="true"></span>
            <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">🏥</span> Healthcare</span>
            <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$210<span class="text-muted-foreground">.00</span></span>
          </li>
          <li class="py-3 flex items-center gap-x-3">
            <span class="shrink-0 size-2.5 bg-chart-3 rounded-full" aria-hidden="true"></span>
            <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">🎬</span> Entertainment</span>
            <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$180<span class="text-muted-foreground">.00</span></span>
          </li>
        </ul>

<div id="hs-finance-expenses-rest" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-finance-expenses-rest-toggle" role="region">
          <ul class="border-t border-line-2 divide-y divide-line-2" aria-label="Remaining expense categories">
            <li class="py-3 flex items-center gap-x-3">
              <span class="shrink-0 size-2.5 bg-chart-2 rounded-full" aria-hidden="true"></span>
              <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">🛍️</span> Shopping</span>
              <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$165<span class="text-muted-foreground">.00</span></span>
            </li>
            <li class="py-3 flex items-center gap-x-3">
              <span class="shrink-0 size-2.5 bg-chart-10 rounded-full" aria-hidden="true"></span>
              <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">📱</span> Subscriptions</span>
              <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$95<span class="text-muted-foreground">.00</span></span>
            </li>
            <li class="py-3 flex items-center gap-x-3">
              <span class="shrink-0 size-2.5 bg-chart-10 rounded-full" aria-hidden="true"></span>
              <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">🏋️</span> Fitness</span>
              <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$75<span class="text-muted-foreground">.00</span></span>
            </li>
            <li class="py-3 flex items-center gap-x-3">
              <span class="shrink-0 size-2.5 bg-chart-10 rounded-full" aria-hidden="true"></span>
              <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">🎓</span> Education</span>
              <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$60<span class="text-muted-foreground">.00</span></span>
            </li>
            <li class="py-3 flex items-center gap-x-3">
              <span class="shrink-0 size-2.5 bg-chart-10 rounded-full" aria-hidden="true"></span>
              <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">🐾</span> Pets</span>
              <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$45<span class="text-muted-foreground">.00</span></span>
            </li>
            <li class="py-3 flex items-center gap-x-3">
              <span class="shrink-0 size-2.5 bg-chart-10 rounded-full" aria-hidden="true"></span>
              <span class="min-w-0 grow text-sm text-foreground"><span aria-hidden="true">🎁</span> Gifts</span>
              <span class="shrink-0 text-sm font-medium text-foreground tabular-nums">$35<span class="text-muted-foreground">.00</span></span>
            </li>
          </ul>
        </div>

<div class="pt-3 2xl:mt-auto">
          <button type="button" id="hs-finance-expenses-rest-toggle" class="hs-collapse-toggle py-2 px-2.5 w-full inline-flex justify-center items-center gap-x-1.5 text-xs font-medium rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" aria-expanded="false" aria-controls="hs-finance-expenses-rest" data-hs-collapse="#hs-finance-expenses-rest">
            <span class="hs-collapse-open:hidden">Show all 12 categories</span>
            <span class="hidden hs-collapse-open:block">Show fewer categories</span>
            <svg class="shrink-0 size-3.5 transition-transform duration-300 hs-collapse-open:rotate-180" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
          </button>
        </div>
      </div>
    </article>

.apexcharts-xaxistooltip {    
        background: var(--color-primary-600) !important; 
        border-color: var(--color-primary-600) !important; 
      }

.apexcharts-xaxistooltip:after,
      .apexcharts-xaxistooltip:before {
        border-bottom-color: var(--color-primary-600) !important;
      }
    </style>

.hs-chart-outside-labels .hs-pie-outside-labels {
        pointer-events: none;
      }

.hs-chart-outside-labels .hs-pie-outside-label {
        font-family: var(--font-sans);
        font-size: 12px;
      }

.hs-chart-outside-labels .hs-pie-outside-label-name {
        font-weight: 500;
        fill: var(--foreground);
      }

.hs-chart-outside-labels .hs-pie-outside-label-value {
        font-weight: 400;
        fill: var(--muted-foreground);
      }

@media (max-width: 479px) {
        .hs-chart-outside-labels .hs-pie-outside-label {
          font-size: 11px;
        }
      }
    </style>

if (!chartElement) return;

const expenseCategories = [
          { label: 'Housing', emoji: '🏠', amount: 850 },
          { label: 'Food', emoji: '🍜', amount: 620 },
          { label: 'Transport', emoji: '🚗', amount: 420 },
          { label: 'Utilities', emoji: '⚡', amount: 265 },
          { label: 'Healthcare', emoji: '🏥', amount: 210 },
          { label: 'Entertainment', emoji: '🎬', amount: 180 },
          { label: 'Shopping', emoji: '🛍️', amount: 165 },
          { label: 'Subscriptions', emoji: '📱', amount: 95 },
          { label: 'Fitness', emoji: '🏋️', amount: 75 },
          { label: 'Education', emoji: '🎓', amount: 60 },
          { label: 'Pets', emoji: '🐾', amount: 45 },
          { label: 'Gifts', emoji: '🎁', amount: 35 }
        ];
        const totalExpenses = expenseCategories.reduce((sum, category) => sum + category.amount, 0);

// Too many slices make the pie and its outside labels unreadable, so only the
        // biggest categories get their own slice and the rest are merged into "Other".
        const CHART_SLICE_LIMIT = 7;
        const rankedCategories = [...expenseCategories].sort((a, b) => b.amount - a.amount);
        const chartCategories = rankedCategories.slice(0, CHART_SLICE_LIMIT);
        const mergedAmount = rankedCategories.slice(CHART_SLICE_LIMIT).reduce((sum, category) => sum + category.amount, 0);

const mergedCount = rankedCategories.length - CHART_SLICE_LIMIT;

// Named as a group so the slice is obviously a merge, not a missing row.
        if (mergedAmount > 0) chartCategories.push({ label: `Other (${mergedCount})`, emoji: '📦', amount: mergedAmount, isMerged: true });

const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
        const LABELS_CLASS = 'hs-pie-outside-labels';
        const ELBOW_LENGTH = 14;
        const STEM_LENGTH = 12;
        const TEXT_GAP = 6;
        const LINE_HEIGHT = 14;
        const MIN_LABEL_GAP = 34;
        // One entry per chart slice, in the same order as chartCategories.
        const SLICE_COLOR_VARS = [
          '--chart-colors-primary',
          '--chart-colors-chart-6',
          '--chart-colors-chart-7',
          '--chart-colors-chart-5',
          '--chart-colors-chart-4',
          '--chart-colors-chart-3',
          '--chart-colors-chart-2',
          '--chart-colors-chart-10'
        ];

// ApexCharts has no built-in outside pie labels, so they are drawn on top of the rendered pie.
        const renderOutsideLabels = () => {
          const svg = chartElement.querySelector('.apexcharts-svg');
          const pie = chartElement.querySelector('.apexcharts-pie');

if (!svg || !pie) return;

const previousLabels = pie.querySelector(`.${LABELS_CLASS}`);

if (previousLabels) previousLabels.remove();

const slices = pie.querySelectorAll('.apexcharts-pie-area');

if (slices.length !== chartCategories.length) return;

const pieBox = pie.getBBox();

if (!pieBox.width || !pieBox.height) return;

const centerX = pieBox.x + pieBox.width / 2;
          const centerY = pieBox.y + pieBox.height / 2;
          const radius = Math.min(pieBox.width, pieBox.height) / 2;

// Chart viewport bounds, expressed in the pie group's own coordinate system.
          const matrix = pie.getScreenCTM();
          const svgBox = svg.getBoundingClientRect();
          let minX = -Infinity;
          let maxX = Infinity;
          let minY = -Infinity;
          let maxY = Infinity;

if (matrix && svg.createSVGPoint) {
            const inverseMatrix = matrix.inverse();
            const point = svg.createSVGPoint();

point.y = svgBox.top;
            point.x = svgBox.left;
            const topLeft = point.matrixTransform(inverseMatrix);
            point.y = svgBox.bottom;
            point.x = svgBox.right;
            const bottomRight = point.matrixTransform(inverseMatrix);

minX = topLeft.x + 2;
            maxX = bottomRight.x - 2;
            minY = topLeft.y + LINE_HEIGHT;
            maxY = bottomRight.y - LINE_HEIGHT;
          }

const items = [];
          let sweptAngle = 0;

chartCategories.forEach((category, index) => {
            const share = category.amount / totalExpenses;
            const midAngle = sweptAngle + (share * 360) / 2;
            const angle = ((midAngle - 90) * Math.PI) / 180;
            const cos = Math.cos(angle);
            const sin = Math.sin(angle);

sweptAngle += share * 360;

items.push({
              category,
              percent: share * 100,
              side: cos < 0 ? -1 : 1,
              color: slices[index].getAttribute('fill'),
              startX: centerX + cos * radius,
              startY: centerY + sin * radius,
              elbowX: centerX + cos * (radius + ELBOW_LENGTH),
              elbowY: centerY + sin * (radius + ELBOW_LENGTH)
            });
          });

// Keep labels sharing a side from stacking on top of each other, without
          // letting the column spill past the top or bottom of the chart.
          const spreadDown = (column, from) => {
            for (let index = Math.max(from, 1); index < column.length; index++) {
              const gap = column[index].elbowY - column[index - 1].elbowY;

if (gap < MIN_LABEL_GAP) column[index].elbowY = column[index - 1].elbowY + MIN_LABEL_GAP;
            }
          };
          const spreadUp = (column, from) => {
            for (let index = from; index >= 0; index--) {
              const gap = column[index + 1].elbowY - column[index].elbowY;

if (gap < MIN_LABEL_GAP) column[index].elbowY = column[index + 1].elbowY - MIN_LABEL_GAP;
            }
          };

[-1, 1].forEach((side) => {
            const column = items.filter((item) => item.side === side).sort((a, b) => a.elbowY - b.elbowY);

if (!column.length) return;

spreadDown(column, 1);

const last = column[column.length - 1];

if (last.elbowY > maxY) {
              last.elbowY = maxY;
              spreadUp(column, column.length - 2);
            }

if (column[0].elbowY < minY) {
              column[0].elbowY = minY;
              spreadDown(column, 1);
            }
          });

const labelsGroup = document.createElementNS(SVG_NAMESPACE, 'g');
          labelsGroup.setAttribute('class', LABELS_CLASS);
          labelsGroup.setAttribute('aria-hidden', 'true');

items.forEach((item) => {
            item.endX = item.elbowX + item.side * STEM_LENGTH;
            item.textX = item.endX + item.side * TEXT_GAP;

item.line = document.createElementNS(SVG_NAMESPACE, 'polyline');
            item.line.setAttribute('fill', 'none');
            item.line.setAttribute('stroke', item.color);
            item.line.setAttribute('stroke-width', '1');
            item.line.setAttribute('stroke-linecap', 'round');
            item.line.setAttribute('stroke-linejoin', 'round');

item.text = document.createElementNS(SVG_NAMESPACE, 'text');
            item.text.setAttribute('class', 'hs-pie-outside-label');
            item.text.setAttribute('text-anchor', item.side === 1 ? 'start' : 'end');

item.name = document.createElementNS(SVG_NAMESPACE, 'tspan');
            item.name.setAttribute('class', 'hs-pie-outside-label-name');
            item.name.setAttribute('y', item.elbowY - 2);
            item.name.textContent = `${item.category.emoji} ${item.category.label}`;

item.value = document.createElementNS(SVG_NAMESPACE, 'tspan');
            item.value.setAttribute('class', 'hs-pie-outside-label-value');
            item.value.setAttribute('y', item.elbowY - 2 + LINE_HEIGHT);
            item.value.textContent = `${item.percent.toFixed(1)}%`;

item.text.append(item.name, item.value);
            labelsGroup.append(item.line, item.text);
            positionItem(item);
          });

pie.appendChild(labelsGroup);

// Pull labels back inside the chart viewport when horizontal space runs short.
          items.forEach((item) => {
            const textBox = item.text.getBBox();
            const overflowStart = minX - textBox.x;
            const overflowEnd = textBox.x + textBox.width - maxX;
            const shift = overflowStart > 0 ? overflowStart : (overflowEnd > 0 ? -overflowEnd : 0);

if (!shift) return;

item.textX += shift;
            item.endX = item.side === 1
              ? Math.max(Math.min(item.endX, item.textX - TEXT_GAP), item.elbowX)
              : Math.min(Math.max(item.endX, item.textX + TEXT_GAP), item.elbowX);

positionItem(item);
          });
        };

const expensesPieChart = buildChart('#hs-finance-expenses-pie-chart', (mode) => ({
          chart: {
            height: 268,
            type: 'pie',
            fontFamily: cssVarToValue('--font-sans'),
            toolbar: {
              show: false
            },
            zoom: {
              enabled: false
            },
            // The theme, brand and font initialisers fire updateOptions() moments after
            // load. An updateOptions() landing mid-animation strands every pie slice at
            // "M0 0" for good, so the pie renders at its final geometry straight away.
            animations: {
              enabled: false
            },
            events: {
              mounted: () => renderOutsideLabels(),
              updated: () => renderOutsideLabels(),
              animationEnd: () => renderOutsideLabels()
            }
          },
          series: chartCategories.map((item) => item.amount),
          labels: chartCategories.map((item) => item.label),
          colors: SLICE_COLOR_VARS.map((name) => (mode === 'dark' ? varToColor(`${name}-inverse`) : varToColor(name))),
          dataLabels: {
            enabled: false
          },
          plotOptions: {
            pie: {
              customScale: 0.70,
              expandOnClick: false
            }
          },
          legend: {
            show: false
          },
          stroke: {
            width: 2,
            colors: [mode === 'dark' ? varToColor('--chart-colors-background-inverse') : varToColor('--chart-colors-background')]
          },
          grid: {
            padding: {
              top: 0,
              bottom: 0,
              left: 0,
              right: 0
            }
          },
          tooltip: {
            enabled: false
          },
          states: {
            hover: {
              filter: {
                type: 'none'
              }
            }
          },
          responsive: [{
            breakpoint: 480,
            options: {
              chart: {
                height: 300
              },
              plotOptions: {
                pie: {
                  customScale: 0.52
                }
              }
            }
          }]
        }), () => ({
          colors: SLICE_COLOR_VARS.map((name) => varToColor(name)),
          stroke: {
            colors: [varToColor('--chart-colors-background')]
          }
        }), () => ({
          colors: SLICE_COLOR_VARS.map((name) => varToColor(`${name}-inverse`)),
          stroke: {
            colors: [varToColor('--chart-colors-background-inverse')]
          }
        }));

Open related finance tracker template

Radial Progress Chart Card with Legend Grid Pro

A radial progress plot sits above a legend grid, so totals and labels stay inside one card.

Create a responsive UI block named "Radial Progress Chart Card with Legend Grid" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/pie-radial-charts/#radial-progress-chart-card-with-legend-grid. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/pie-radial-charts
- Block ID: radial-progress-chart-card-with-legend-grid
- Source description: A radial progress plot sits above a legend grid, so totals and labels stay inside one card.
- Preview iframe: https://preline.co/blocks/data-display/pie-radial-charts/iframes/pro/radial-progress-chart-card-with-legend-grid.html (repo path: blocks/data-display/pie-radial-charts/iframes/pro/radial-progress-chart-card-with-legend-grid.html)
- Source markup reference:
  - partials/pro/crm-dashboard/cards/donut-chart.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/crm-dashboard/sources/more-dropdown.html
  - partials/pro/admin-dashboard/sources/simple-empty-state-with-illustration.html
  - scripts/plugins/apexcharts.html
  - partials/pro/crm-dashboard/js/donut-chart.html

<div class="py-4 px-5 h-full flex flex-col bg-card border border-card-line shadow-xs rounded-xl">
      
      <div class="mb-1 flex justify-between items-center">
        <h2 class="font-medium text-foreground">
          Lead nurturing & filtering
        </h2>

<div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
          <button id="hs-pro-deplqmd" type="button" class="size-9.5 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-44 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-deplqmd">
            <div class="p-1">
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                Share reports
              </button>
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
                View in fullscreen
              </button>
              <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h6l6 18h6"/><path d="M14 3h7"/></svg>
                Connect other apps
              </button>

<button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" x2="15" y1="10" y2="10"/><line x1="12" x2="12" y1="7" y2="13"/></svg>
                Submit Feedback
              </button>
            </div>
          </div>
          
        </div>
        
      </div>

<div class="flex gap-2">
        <span class="block font-semibold text-2xl text-foreground">
          44%
        </span>

<div id="hs-pro-crbch" class="min-h-59 -mx-2"></div>

<div class="mt-auto grid grid-cols-2 gap-2">
        
        <div class="flex flex-col">
          <div class="flex items-center gap-2">
            <span class="shrink-0 size-2 inline-block bg-chart-4 rounded-full"></span>
            <span class="block font-medium text-lg text-foreground">
              47
            </span>
          </div>
          <span class="block text-sm text-muted-foreground-1">
            Nurtured successfully
          </span>
        </div>

<div class="flex flex-col">
          <div class="flex items-center gap-2">
            <span class="shrink-0 size-2 inline-block bg-chart-primary rounded-full"></span>
            <span class="block font-medium text-lg text-foreground">
              23
            </span>
          </div>
          <span class="block text-sm text-muted-foreground-1">
            Sent to sales review
          </span>
        </div>

<div class="flex flex-col">
          <div class="flex items-center gap-2">
            <span class="shrink-0 size-2 inline-block bg-chart-2 rounded-full"></span>
            <span class="block font-medium text-lg text-foreground">
              30
            </span>
          </div>
          <span class="block text-sm text-muted-foreground-1">
            Blocked
          </span>
        </div>

<div class="flex flex-col">
          <div class="flex items-center gap-2">
            <span class="shrink-0 size-2 inline-block bg-chart-10 rounded-full"></span>
            <span class="block font-medium text-lg text-foreground">
              30
            </span>
          </div>
          <span class="block text-sm text-muted-foreground-1">
            Disqualified by team
          </span>
        </div>
        
      </div>
      
    </div>

Open related CRM dashboard page

Doughnut Chart Card with Title Bar and Legends Pro

Header controls frame the doughnut, while legends and totals stay grouped beneath the chart.

Create a responsive UI block named "Doughnut Chart Card with Title Bar and Legends" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/pie-radial-charts/#doughnut-chart-card-with-title-bar-and-legends. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/pie-radial-charts
- Block ID: doughnut-chart-card-with-title-bar-and-legends
- Source description: Header controls frame the doughnut, while legends and totals stay grouped beneath the chart.
- Preview iframe: https://preline.co/blocks/data-display/pie-radial-charts/iframes/pro/doughnut-chart-card-with-title-bar-and-legends.html (repo path: blocks/data-display/pie-radial-charts/iframes/pro/doughnut-chart-card-with-title-bar-and-legends.html)
- Source markup reference:
  - partials/pro/analytics-dashboard/cards/doughnut-chart-title-bar-and-legends.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/admin-dashboard/dropdowns/button-with-select-options.html
  - partials/pro/admin-dashboard/dropdowns/simple-with-divider.html
  - partials/pro/admin-dashboard/sources/simple-empty-state-with-illustration.html
  - scripts/plugins/apexcharts.html

<div class="flex flex-col bg-card border border-card-line shadow-xs rounded-xl">
      
      <div class="p-5 pb-4 grid grid-cols-2 items-center gap-x-4">
        <div>
          <h2 class="inline-block font-semibold text-lg text-foreground">
            Market Share
          </h2>
        </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ddnmshchddts">
              <div class="p-1">
                <div class="py-2 px-3">
                  <span class="block font-semibold text-foreground">
                    Download Report
                  </span>
                  <span class="block text-xs text-muted-foreground-1">
                    Select Options
                  </span>
                </div>

<div class="py-1 px-2">
                  <div class="flex items-center bg-surface rounded-xl p-1">
                    <label for="hs-pro-ddnmshchddtsts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                      <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" class="fill-foreground" fill="currentColor"/><path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                      <input type="radio" name="hs-pro-ddnmshchddtsts" class="hidden" id="hs-pro-ddnmshchddtsts1" checked >
                    </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-ddnmshchddtss1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>Section name
                  </label>
                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-ddnmshchddtss1" checked >
                </div>
                <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-ddnmshchddtss2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 22h2a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3"/><polyline points="14 2 14 8 20 8"/><path d="M4.04 11.71a5.84 5.84 0 1 0 8.2 8.29"/><path d="M13.83 16A5.83 5.83 0 0 0 8 10.17V16h5.83Z"/></svg>Comparison stats
                  </label>
                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-ddnmshchddtss2" checked >
                </div>
                <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-ddnmshchddtss3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></svg>Legend indicator
                  </label>
                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-ddnmshchddtss3" checked >
                </div>

<button type="button" class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                  Download
                </button>
              </div>
            </div>
            
          </div>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
            <button id="hs-pro-ddnmshchmd" type="button" class="size-8.5 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ddnmshchmd">
              <div class="p-1">
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                  Share reports
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
                  View in fullscreen
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h6l6 18h6"/><path d="M14 3h7"/></svg>
                  Connect other apps
                </button>

<button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" x2="15" y1="10" y2="10"/><line x1="12" x2="12" y1="7" y2="13"/></svg>
                  Submit Feedback
                </button>
              </div>
            </div>
            
          </div>
          
        </div>
        
      </div>

<div class="h-full p-5 pt-0 space-y-4">
        <div class="h-full flex flex-col justify-between space-y-4">
          <div class="size-full flex justify-center">
            
            <div id="hs-market-share-donut-chart"></div>
          </div>

<div class="flex justify-center items-center gap-x-4 mb-6">
            <div class="inline-flex items-center">
              <span class="shrink-0 size-2.5 inline-block bg-chart-primary rounded-xs me-2.5"></span>
              <span class="text-sm text-foreground">
                Tailwind CSS
              </span>
            </div>
            <div class="inline-flex items-center">
              <span class="shrink-0 size-2.5 inline-block bg-chart-6 rounded-xs me-2.5"></span>
              <span class="text-sm text-foreground">
                Preline UI
              </span>
            </div>
            <div class="inline-flex items-center">
              <span class="shrink-0 size-2.5 inline-block bg-chart-9 rounded-xs me-2.5"></span>
              <span class="text-sm text-foreground">
                Others
              </span>
            </div>
          </div>
          
        </div>
      </div>

<div class="text-center border-t border-card-footer">
        <a class="p-3 flex justify-center items-center gap-x-2 text-sm text-primary rounded-b-lg hover:text-primary-hover focus:outline-hidden focus:decoration-2 focus:underline focus:text-primary-focus" href="#">
          View full reports
        </a>
      </div>
      
    </div>

Open related analytics dashboard page

Bubble Chart Card with Title Bar and Legends Pro

A bubble plot takes the main panel, with controls and supporting legend rows wrapped into the same card.

Create an analytics dashboard card/component named "Bubble Chart Card with Title Bar and Legends" that visually matches the reference as closely as possible. Use the current project's existing framework, styling conventions, tokens, components, chart utilities, icons, menus, and dark-mode strategy. Do not add external UI dependencies just to recreate buttons, menus, or layout. The bubble plot itself is source-library output, so it must be delivered as a real chart, not as a placeholder or decorative approximation.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/pie-radial-charts/#bubble-chart-card-with-title-bar-and-legends. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Baseline fidelity gates:
- Preserve exact visible copy, data values, order, hierarchy, and default state unless the user explicitly asks to change them.
- Map semantic token roles to one coherent destination token vocabulary. Every source primary role must use the destination project's primary token/config, never Preline blue or fixed blue palette values unless the destination primary is explicitly blue.
- Verify every emitted utility or component class exists in the destination. Map or define a missing semantic token before use; do not leave any undefined source class in generated markup.
- Use exact source assets, image URLs, inline SVGs, avatars, logos, and brand marks when supplied; do not replace them with placeholders, initials, emojis, generic icons, or alternate stock media.
- Final QA: compare the implementation with the exact anchored Preview and HTML source at mobile and desktop widths, including open/alternate states, assets, layering, focus behavior, and dark mode.

Behavior runtime rule:
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.

The details below are derived from the actual source block. Do not infer this block from the page category name, from generic pie/radial chart examples, or from a different analytics card. The source is a compact bubble-chart card with a title bar, optional header controls, a large bubble plot, legend rows, and a footer link.

Keep the implementation Tailwind-first in Tailwind projects. Use utility classes directly in markup and reuse existing project component classes only when they already exist. Do not create new one-off classes such as `.chart-card`, `.legend-row`, `.export-button`, or `@layer components` rules just to style this block.

Preserve source scale/layout utilities where the destination Tailwind setup supports them, and map missing custom scale values to the closest existing project scale or to a reusable theme token. Do not replace source scale with scattered arbitrary bracket utilities. Source scale/layout examples for this block include `max-w-md`, `mx-auto`, `flex`, `flex-col`, `rounded-xl`, `shadow-xs`, `p-5`, `pb-4`, `grid`, `grid-cols-2`, `gap-x-4`, `relative`, `z-10`, `justify-end`, `items-center`, `gap-x-1`, `size-8.5`, `size-4`, `size-3.5`, `h-85`, `-mt-10`, `-mb-1`, `space-y-4`, `py-3`, `last:border-b-0`, `size-2.5`, `rounded-xs`, `rounded-sm`, `me-2.5`, `me-2`, `gap-x-1.5`, `p-3`, `rounded-b-lg`, `text-lg`, `text-sm`, and `text-[13px]` where the source uses that exact size.

Separate Tailwind scale from token class names. Source token classes such as `bg-card`, `border-card-line`, `text-foreground`, `text-muted-foreground-1`, `border-line-2`, `bg-chart-primary`, `bg-chart-6`, `bg-chart-9`, `border-card-footer`, `text-primary`, `text-primary-hover`, `text-primary-focus`, and `text-destructive` describe roles. Map those roles to the destination project's actual token vocabulary. Do not copy Preline-only tokens like `text-muted-foreground-1`, `border-card-line`, `border-line-2`, `bg-chart-6`, `bg-chart-9`, `border-card-footer`, `text-primary-hover`, or `text-primary-focus` unless those exact classes already exist in the destination project.

Use one token vocabulary consistently. In common Tailwind/shadcn-style projects, use the project's native tokens such as `bg-card`, `border-border`, `text-foreground`, `text-muted-foreground`, `bg-primary`, `text-primary`, `text-primary-foreground`, `text-destructive`, `ring-ring`, and chart tokens such as `--chart-1`, `--chart-2`, and `--chart-3` when available. In tokenized Tailwind projects, combine structural utilities with semantic token utilities; do not use raw palette classes like `text-gray-900`, `text-gray-500`, `bg-white`, `bg-gray-50`, `dark:bg-gray-950`, `border-gray-200`, `bg-blue-600`, or `ring-indigo-600` for colors, surfaces, borders, focus rings, or chart roles when semantic tokens exist. In Bootstrap projects, use native Bootstrap components/classes and theme variables such as `.card`, `.dropdown-menu`, `.btn`, `.btn-primary`, `.form-check-input`, `.text-primary`, `.text-body`, `.text-muted`, `.border`, `--bs-primary`, and `--bs-primary-rgb`, including any app override such as a green/teal primary. In Preline-style projects, use the project's existing Preline tokens if they are already configured. Do not mix Preline token names, shadcn token names, Bootstrap classes, raw Tailwind palette colors, inline styles, and newly invented token classes in the same output.

Build only this analytics card and the source-included menu content. Do not append unrelated Tailwind UI sample sections, testimonials, marketing CTAs, page headers, footers, or extra demo blocks around it.

Overall card:
- Standalone card width in the source preview is `w-full max-w-md mx-auto`.
- Card wrapper scale/layout: `flex flex-col rounded-xl`.
- Card token roles: card/surface background, subtle card border, and very soft shadow.
- The card is compact and vertical. Do not stretch it into a full dashboard row.
- Preserve the rounded outer card corners and the quiet one-pixel border.
- Implement dark mode for card background, card border, row borders, footer border, foreground text, muted text, chart colors, and menu surfaces.

Header:
- Header layout: `p-5 pb-4 grid grid-cols-2 items-center gap-x-4 relative z-10`.
- Left side title text: `Devices`.
- Title element: semantic heading, source scale `inline-block font-semibold text-lg`.
- Title token role: foreground.
- Right side controls are aligned to the right with `flex justify-end items-center gap-x-1`.
- Include two compact icon buttons when implementing the full interactive version:
  - Download Report menu button with a download icon.
  - More/options menu button with a vertical ellipsis icon.
- Source icon-button scale: `size-8.5 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent`.
- Icon-button token roles: muted/control foreground, transparent default background, subtle muted hover/focus background. Do not turn these into large filled buttons.
- Download icon scale: `shrink-0 size-4`.
- More icon scale: `shrink-0 size-4`.
- Use the destination project's existing icon set for ordinary interface icons such as download, ellipsis, check, edit/pencil, document chart, circle, share, fullscreen, connected-apps, and message-plus icons.
- Use the exact source file-type SVGs below for Excel and Word unless the destination project already has these exact brand assets. Do not replace file-type identity marks with generic document icons when the menu is visible.

Excel file-type label:
```html
<svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" class="fill-foreground" fill="currentColor"/><path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
```

Word file-type label:
```html
<svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.6141 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 12.3359L31.9364 8.86395V3.24228C31.9364 2.89158 31.797 2.55523 31.549 2.30725C31.3011 2.05926 30.9647 1.91994 30.6141 1.91994Z" fill="#41A5EE"/><path d="M31.9364 8.86395H8.12839V15.8079L20.0324 19.2799L31.9364 15.8079V8.86395Z" fill="#2B7CD3"/><path d="M31.9364 15.8079H8.12839V22.7519L20.0324 26.2239L31.9364 22.7519V15.8079Z" fill="#185ABD"/><path d="M31.9364 22.752H8.12839V28.3736C8.12839 28.7244 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.696 9.45071 29.696H30.6141C30.9647 29.696 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7244 31.9364 28.3736V22.752Z" fill="#103F91"/><path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" class="fill-foreground" fill="currentColor"/><path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16401 23.7439 0.827669 23.6047 0.579687 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579687 8.25922C0.827669 8.01122 1.16401 7.87194 1.51472 7.87194Z" fill="#185ABD"/><path d="M12.0468 20.7679H10.2612L8.17801 13.9231L5.99558 20.7679H4.20998L2.22598 10.8479H4.01158L5.40038 17.7919L7.48358 11.0463H8.97161L10.9556 17.7919L12.3444 10.8479H14.0308L12.0468 20.7679Z" fill="white"/></svg><span class="relative z-10 align-middle">Word</span>
```

Download Report dropdown:
- The download icon opens a dedicated Download Report dropdown, not a generic "Format / Display" list.
- Source dropdown wrapper: `hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex`.
- Source dropdown panel scale/layout: `w-60 bg-dropdown border border-dropdown-line rounded-xl shadow-xl`, with `p-1` inside.
- Panel token roles: dropdown surface, dropdown border, dropdown divider, foreground text, muted subtitle text, hover/focus dropdown-item background, primary action background, primary foreground.
- Primary action means the destination project's primary color, not Preline blue. In Bootstrap projects, use the existing `.btn-primary`, checked input styling, or `--bs-primary`/`--bs-primary-rgb` values so the Download button and checked boxes match the app primary color.
- Header block: `py-2 px-3`.
- Header title text: `Download Report`, `block font-semibold`, foreground token.
- Header subtitle text: `Select Options`, `block text-xs`, muted token.
- Divider after header: `m-2 border-t`, divider token.
- Format selector is a segmented radio control, not a vertical list:
  - Wrapper: `py-1 px-2`.
  - Segment surface: `flex items-center bg-surface rounded-xl p-1`.
  - Two equal-width labels with `relative py-1.5 px-3 w-full cursor-pointer text-center text-sm rounded-lg`.
  - Checked label gets the selected surface and a tiny shadow, source roles `has-checked:bg-layer has-checked:shadow-2xs`.
  - Excel is checked by default.
  - Word is unchecked by default.
  - Each label shows the file-type icon before the text using `relative z-10 me-1.5 inline-block align-middle shrink-0 size-4`, then the text in a `relative z-10 align-middle` span.
- Divider after the segmented control: `m-2 border-t`, divider token.
- Display options are three checkbox rows:
  - Row scale/layout: `flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg`.
  - Row hover token role: dropdown item hover.
  - Label scale/layout: `flex flex-1 items-center gap-x-3 cursor-pointer text-sm`.
  - Each row label starts with a `shrink-0 size-4` icon, then text.
  - Right side is a real checkbox using `shrink-0 size-4 rounded-sm`, checked state mapped to the destination primary checked token. In Bootstrap, this should follow the project's `.form-check-input:checked` / `--bs-primary` styling instead of Preline blue.
  - All three checkboxes are checked by default.
  - Row 1 icon: edit/pencil; text `Section name`.
  - Row 2 icon: document/report with small chart; text `Comparison stats`.
  - Row 3 icon: circle; text `Legend indicator`.
- Divider before action: `my-1 border-t`, divider token.
- Bottom action button:
  - Text: `Download`.
  - Scale/layout/state: `w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg`.
  - Token roles: primary background, primary border, primary foreground, primary hover, primary focus.
- Do not generate a simplified menu with headings `Format` and `Display`.
- Do not render Excel and Word as plain vertical menu items.
- Do not use left-side checkmarks for the display options; the source uses right-aligned checkbox controls.
- Do not omit the title, subtitle, segmented selector, dividers, or bottom Download button.

More/options dropdown:
- The vertical ellipsis button opens a separate simple menu, not an edit/delete card menu.
- Source dropdown wrapper: `hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex`.
- Source dropdown panel scale/layout: `w-48 bg-dropdown border border-dropdown-line rounded-xl shadow-xl`, with `p-1` inside.
- Menu item scale/layout: `w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px]`.
- Menu item token roles: dropdown item foreground, hover background, focus background.
- Items, in exact order:
  - `Share reports`, share-network icon, `size-3.5`.
  - `View in fullscreen`, fullscreen-corners icon, `size-3.5`.
  - `Connect other apps`, connected-apps/path icon, `size-3.5`.
  - Divider: `my-1 border-t`, divider token.
  - `Submit Feedback`, message-plus icon, `size-3.5`.
- Do not generate `Edit card`, `Duplicate`, `Delete report`, or any destructive item for this menu.
- Menus should use the project menu/popover component if it exists.
- Support pointer and keyboard interaction, focus-visible states, escape-to-close, outside-click close, and correct `aria-expanded` / `aria-controls` state.
- Do not add a new dropdown library unless the destination project already uses it.

Body and chart:
- Body layout: `h-full p-5 pt-0 space-y-4`.
- Chart wrapper scale: `h-85 -mb-1 -mt-10`.
- Keep the chart visually high in the body so the bubbles sit behind/near the header area, matching the reference.
- Chart container should fill the wrapper height.
- Source chart library: ApexCharts. Preline renders this block with ApexCharts configuration, chart CSS, and theme-aware chart colors, but the delivered implementation should use the destination project's native chart stack when it can match the output.
- Dependency decision path:
  - First inspect the destination project's dependencies, imports, chart components, UI primitives, and theme tokens. Use the chart library already present in that project when it can faithfully render this bubble/scatter chart.
  - Prefer the native/installed stack for the framework: shadcn/ui React should use the shadcn chart wrapper/Recharts; React projects that already use Recharts, Chart.js, ECharts, Nivo, Victory, Tremor, or another chart layer should use that installed layer when it can match; Vue/Nuxt and Angular projects should use their existing chart wrapper/library when capable; Bootstrap/static projects should use the chart library already present in the page/app.
  - Do not install ApexCharts merely because the source block uses ApexCharts if the destination project already has a capable charting library.
  - If the destination project already uses ApexCharts for comparable charts, or has no capable chart library and ApexCharts is the lightest/most accurate fit for that stack, ApexCharts is acceptable.
  - If no equivalent charting library exists, add the lightest appropriate chart dependency for the destination framework and keep it consistent with that project's patterns. The chosen library must support a true bubble/scatter chart with variable bubble radius, hidden axes/grid/tooltips, per-point data labels, and theme-aware colors.
- Do not replace the chart with a pie, radial, donut, line, bar, static screenshot, placeholder graphic, hand-drawn SVG, or absolutely positioned div circles. The output must be a functional chart-rendered bubble plot unless the destination project explicitly forbids chart libraries.

Bubble chart data and config:
- Chart type: bubble.
- Height: `100%` of the chart wrapper.
- Toolbar: hidden.
- Zoom: disabled.
- Series data:
  - First bubble: `[5, 6, 70]`.
  - Second bubble: `[8, 4, 45]`.
  - Third bubble: `[10, 9, 90]`.
- Data label formatter: show the z value as a percentage, so the bubbles read `70%`, `45%`, and `90%`.
- Data label typography: 20px, normal weight, Inter or the project's sans font.
- Fill opacity: 1.
- Legend: hidden in the chart itself because the custom legend rows below provide labels.
- Bubble plot options: `zScaling: false` and `minBubbleRadius: 40`.
- Grid: hidden, with all grid padding set to 0.
- X axis: min 0, max 15, labels hidden, axis border hidden, ticks hidden.
- Y axis: min 0, max 15, labels hidden.
- Tooltip: disabled.
- Hover state: no chart filter effect.

Chart colors:
- Use the destination project's chart color tokens, not hardcoded inline colors.
- Light mode source roles:
  - Bubble color 1: chart accent 6, cyan-like in the default theme.
  - Bubble color 2: chart accent 10, neutral gray in the default theme.
  - Bubble color 3: destination primary chart color. It is blue in the default Preline theme, but it must become the destination primary color in other frameworks, such as green/teal in a Bootstrap project whose `.btn-primary` is green/teal.
  - Bubble stroke: chart/background surface.
  - Data label colors: inverse foreground for the first and third labels, foreground for the second label.
- Dark mode source roles:
  - Use inverse/dark-aware chart colors for all three bubbles.
  - Bubble stroke: dark/inverse chart background.
  - Data labels: inverse foreground.
- If using ApexCharts, update or rebuild chart colors when the project theme changes so dark mode does not keep stale light-mode colors.
- Do not invent a new palette for this card. The visible pattern is destination primary color, cyan/chart accent, and neutral gray. Do not force Preline blue when the destination primary is another color; the Tablets legend marker is light neutral gray, not orange, purple, circular, or destructive red.

Legend/list rows:
- Render one custom list below the chart. Do not use the built-in chart legend.
- List starts with a header row, then exactly three data rows.
- Row scale/layout: `py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0`.
- Row border token role: subtle divider/border.
- Header row:
  - Left label: `Devices`.
  - Right label: `Users`, right aligned.
  - Source header typography: `font-medium`, foreground.
- Data row 1:
  - Dot marker role: destination primary chart color. In Bootstrap, match `--bs-primary` or the app's primary chart token.
  - Dot scale: `shrink-0 size-2.5 inline-block rounded-xs me-2.5`.
  - Label: `Desktop`.
  - Users: `41,624`.
  - Change: `+453`, success/teal token.
- Data row 2:
  - Dot marker role: chart accent 6.
  - Dot scale: `shrink-0 size-2.5 inline-block rounded-xs me-2.5`.
  - Label: `Mobile`.
  - Users: `7,390`.
  - Change: `+2`, success/teal token.
- Data row 3:
  - Dot marker role: chart accent 9, light neutral gray in the default theme.
  - Dot scale: `shrink-0 size-2.5 inline-block rounded-xs me-2`.
  - The Tablets marker uses the same `rounded-xs` corner radius as Desktop and Mobile. Do not make it circular and do not use `rounded-sm`.
  - Label: `Tablets`.
  - Users: `3,128`.
  - Change: `-157`, destructive/down token.
- Device labels use foreground text at `text-sm`.
- User counts use muted text at `text-sm`.
- Change values use `text-sm` with success or destructive semantic color.
- Keep numbers, commas, plus/minus signs, row order, and labels exact.

Footer:
- Footer wrapper: centered text with a top border.
- Footer border token role: card/footer divider.
- Link text: `View full reports`.
- Source footer link scale/layout/state: `p-3 flex justify-center items-center gap-x-2 text-sm rounded-b-lg`.
- Link token role: primary text, primary hover, primary focus.
- In Bootstrap projects, use the project's primary link color or `.text-primary`/`--bs-primary` equivalent; do not hardcode Preline blue.
- Add an accessible focus state. If the project uses underline-on-focus, match that behavior.
- Do not turn the footer into a filled primary button.
- Do not append a trailing arrow icon to the footer link unless the destination product explicitly requires one. The source text is only `View full reports`.

Responsive behavior:
- The source preview is a compact card and does not change into a multi-column layout.
- The card remains `w-full` and centered within a `max-w-md` container.
- Preserve card padding, row spacing, and chart height across common mobile and desktop widths unless the destination project has a specific compact-card pattern.
- If the chart library needs resize handling, ensure it resizes with the card width without distorting bubble positions or clipping labels.

Empty state:
- The source component has an optional empty-state branch, but this block preview uses the populated state.
- Implement the populated state by default.
- Do not show the empty state unless the destination project explicitly needs a data-empty mode.

Accessibility:
- Use semantic heading markup for the title.
- Give the chart region an accessible label or description, such as "Device usage bubble chart".
- Mark decorative chart dots and ordinary decorative icons as `aria-hidden="true"`.
- Menu buttons need accessible names, keyboard support, focus-visible treatment, and synchronized expanded state.
- Footer link should be a real link or a button only if the destination action is not navigation.

Final QA checklist:
- The result is a compact `max-w-md` analytics card, not a full-width chart section.
- Header title reads `Devices`; controls sit at the top right and do not change header height.
- The bubble plot is rendered by the destination project's native/installed chart stack chosen by the dependency path, such as shadcn/Recharts, Recharts, Chart.js, ECharts, Nivo, Victory, Tremor, ApexCharts when already used or best lightweight fit, or another equivalent library; it is not a fake SVG/div placeholder.
- Bubble chart shows three bubbles labeled `70%`, `45%`, and `90%`; axes, grid, tooltip, and built-in legend are hidden.
- Chart wrapper keeps the source relationship `h-85 -mt-10 -mb-1` or the destination project's closest equivalent without scattered arbitrary bracket values.
- Legend rows and values match exactly: Desktop `41,624` `+453`, Mobile `7,390` `+2`, Tablets `3,128` `-157`.
- The Tablets marker is `size-2.5 rounded-xs` and uses the chart-9/light-neutral role, not a circle, not `rounded-sm`, and not a random orange or purple token.
- Download Report dropdown matches the source: title `Download Report`, subtitle `Select Options`, segmented Excel/Word selector, three right-checkbox rows, dividers, and full-width `Download` button.
- More/options dropdown matches the source: Share reports, View in fullscreen, Connect other apps, divider, Submit Feedback. It does not show Edit card, Duplicate, or Delete report.
- Footer is a text link reading `View full reports`, not a filled button.
- Footer link does not add a trailing arrow icon.
- In Bootstrap projects, the primary bubble, Desktop legend dot, Download button, checked checkboxes, focus states, and footer link match the project `.btn-primary` / `--bs-primary` color, such as green/teal when that is the Bootstrap theme primary. They do not stay Preline blue unless the destination primary is blue.
- Dark mode changes surfaces, borders, text, and chart colors intentionally.
- Generated Tailwind code preserves source scale/layout utilities where available, maps token roles to the destination token vocabulary, and does not mix Preline-only token names with another design system.
- In tokenized Tailwind projects, generated code uses semantic token classes for semantic color roles and does not mix in raw palette classes such as `text-gray-900`, `bg-white`, `dark:bg-gray-950`, `border-gray-200`, `bg-blue-600`, or `ring-indigo-600`.
- No unrelated Tailwind UI sample sections, testimonials, CTAs, page headers, footers, or additional demo blocks are added.
- There are no one-off component classes created only for this block, no scattered raw hex/rgb values, and no inline styles except where a chart library strictly requires runtime configuration.

<div class="flex flex-col bg-card border border-card-line shadow-xs rounded-xl">
      
      <div class="p-5 pb-4 grid grid-cols-2 items-center gap-x-4 relative z-10">
        <div>
          <h2 class="inline-block font-semibold text-lg text-foreground">
            Devices
          </h2>
        </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dbbdchddts">
              <div class="p-1">
                <div class="py-2 px-3">
                  <span class="block font-semibold text-foreground">
                    Download Report
                  </span>
                  <span class="block text-xs text-muted-foreground-1">
                    Select Options
                  </span>
                </div>

<div class="py-1 px-2">
                  <div class="flex items-center bg-surface rounded-xl p-1">
                    <label for="hs-pro-dbbdchddtsts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                      <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" class="fill-foreground" fill="currentColor"/><path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                      <input type="radio" name="hs-pro-dbbdchddtsts" class="hidden" id="hs-pro-dbbdchddtsts1" checked >
                    </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dbbdchddtss1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>Section name
                  </label>
                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dbbdchddtss1" checked >
                </div>
                <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dbbdchddtss2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 22h2a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3"/><polyline points="14 2 14 8 20 8"/><path d="M4.04 11.71a5.84 5.84 0 1 0 8.2 8.29"/><path d="M13.83 16A5.83 5.83 0 0 0 8 10.17V16h5.83Z"/></svg>Comparison stats
                  </label>
                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dbbdchddtss2" checked >
                </div>
                <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dbbdchddtss3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></svg>Legend indicator
                  </label>
                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dbbdchddtss3" checked >
                </div>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
            <button id="hs-pro-dbbdchmd" type="button" class="size-8.5 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dbbdchmd">
              <div class="p-1">
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                  Share reports
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
                  View in fullscreen
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h6l6 18h6"/><path d="M14 3h7"/></svg>
                  Connect other apps
                </button>

<div class="h-full p-5 pt-0 space-y-4">
        <div class=" h-85 -mb-1 -mt-10">
          
          <div id="hs-devices-bubble-chart"></div>
        </div>

<ul>
          
          <li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
            <div>
              <p class="font-medium text-foreground">
                Devices
              </p>
            </div>
            <div class="text-end">
              <p class="font-medium text-foreground">
                Users
              </p>
            </div>
          </li>

<li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
            <div class="flex items-center">
              <span class="shrink-0 size-2.5 inline-block bg-chart-primary rounded-xs me-2.5"></span>
              <span class="text-sm text-foreground">
                Desktop
              </span>
            </div>
            <div class="flex justify-end items-center gap-x-1.5">
              <span class="text-sm text-muted-foreground-1">
                41,624
              </span>
              <span class="text-sm text-teal-500 dark:text-teal-400">
                +453
              </span>
            </div>
          </li>

<li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
            <div class="flex items-center">
              <span class="shrink-0 size-2.5 inline-block bg-chart-6 rounded-xs me-2.5"></span>
              <span class="text-sm text-foreground">
                Mobile
              </span>
            </div>
            <div class="flex justify-end items-center gap-x-1.5">
              <span class="text-sm text-muted-foreground-1">
                7,390
              </span>
              <span class="text-sm text-teal-500 dark:text-teal-400">
                +2
              </span>
            </div>
          </li>

<li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
            <div class="flex items-center">
              <span class="shrink-0 size-2.5 inline-block bg-chart-9 rounded-xs me-2"></span>
              <span class="text-sm text-foreground">
                Tablets
              </span>
            </div>
            <div class="flex justify-end items-center gap-x-1.5">
              <span class="text-sm text-muted-foreground-1">
                3,128
              </span>
              <span class="text-sm text-destructive">
                -157
              </span>
            </div>
          </li>
          
        </ul>
        
      </div>

Open related analytics dashboard page

Pie Chart Card with Title Bar and Legends Pro

The pie chart sits above a stacked breakdown list, keeping share and category labels in one view.

Create a responsive UI block named "Pie Chart Card with Title Bar and Legends" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/data-display/pie-radial-charts/#pie-chart-card-with-title-bar-and-legends. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: data-display/pie-radial-charts
- Block ID: pie-chart-card-with-title-bar-and-legends
- Source description: The pie chart sits above a stacked breakdown list, keeping share and category labels in one view.
- Preview iframe: https://preline.co/blocks/data-display/pie-radial-charts/iframes/pro/pie-chart-card-with-title-bar-and-legends.html (repo path: blocks/data-display/pie-radial-charts/iframes/pro/pie-chart-card-with-title-bar-and-legends.html)
- Source markup reference:
  - partials/pro/analytics-dashboard/cards/pie-chart-title-bar-and-legends.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/admin-dashboard/dropdowns/button-with-select-options.html
  - partials/pro/admin-dashboard/dropdowns/simple-with-divider.html
  - partials/pro/admin-dashboard/sources/simple-empty-state-with-illustration.html
  - scripts/plugins/apexcharts.html

Block-specific fidelity rules:
- Preserve chart/data behavior when present: axes, scale, legends, tooltip rows, colored keys, empty states, responsive height, and the original chart library/data-binding pattern.
- Do not replace charts, maps, sparklines, or data widgets with static SVG or decorative approximations.
- Source content inventory (from the source markup):
  - Card wrapper is `flex flex-col bg-card border border-card-line shadow-xs rounded-xl`; the header is `p-5 pb-4 grid grid-cols-2 items-center gap-x-4` with the `h2` heading `Acquisition` on the left.
  - Header right holds two `size-8.5` icon-only Preline HSDropdown triggers: a download-arrow trigger whose menu is titled `Download Report` with an `Excel` (checked) / `Word` radio pair, a `Select Options` label, three checked rows `Section name`, `Comparison stats`, `Legend indicator`, and a `Download` button; then a three-dot trigger listing `Share reports`, `View in fullscreen`, `Connect other apps`, a divider, and `Submit Feedback`. Both are closed on load.
  - The chart is an ApexCharts pie mounted on the empty `<div id="hs-acquisition-pie-chart">` inside an `h-75 flex justify-center w-full` box, with `height: "100%"`, `series: [70, 18, 12]`, and `labels: ["Direct", "Organic search", "Referral"]`.
  - Below the chart is a `<ul>` breakdown, not the ApexCharts legend: a header row with `Channels` on the left and `Users` right-aligned, then 3 data rows; every row is `py-3 grid grid-cols-2 items-center gap-x-4 border-b last:border-b-0 border-line-2`.
  - Data rows in order: `Direct` / `11,932` / `-417%`, `Organic search` / `8,740` / `-4.1%`, `Referral` / `5,128` / `+243%` - keep those exact values including the two negative deltas.
  - Each data row starts with a `size-2.5` color swatch; the first two are `rounded-xs me-2.5` and the third is `rounded-sm me-2`, and the two negative deltas are red while `+243%` is teal.
  - The card footer is a full-width bordered centered link reading `View full reports`.
  - The block renders the populated chart state on first load; an alternate `No data` empty state exists in the source partial but is not what this block shows.

<div class="flex flex-col bg-card border border-card-line shadow-xs rounded-xl">
      
      <div class="p-5 pb-4 grid grid-cols-2 items-center gap-x-4">
        <div>
          <h2 class="inline-block font-semibold text-lg text-foreground">
            Acquisition
          </h2>
        </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dpeachddts">
              <div class="p-1">
                <div class="py-2 px-3">
                  <span class="block font-semibold text-foreground">
                    Download Report
                  </span>
                  <span class="block text-xs text-muted-foreground-1">
                    Select Options
                  </span>
                </div>

<div class="py-1 px-2">
                  <div class="flex items-center bg-surface rounded-xl p-1">
                    <label for="hs-pro-dpeachddtsts1" class="relative py-1.5 px-3 w-full cursor-pointer text-center text-sm text-foreground rounded-lg has-checked:bg-layer has-checked:shadow-2xs">
                      <svg class="relative z-10 me-1.5 inline-block align-middle shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.0324 1.91994H9.45071C9.09999 1.91994 8.76367 2.05926 8.51567 2.30725C8.26767 2.55523 8.12839 2.89158 8.12839 3.24228V8.86395L20.0324 15.8079L25.9844 18.3197L31.9364 15.8079V8.86395L20.0324 1.91994Z" fill="#21A366"/><path d="M8.12839 8.86395H20.0324V15.8079H8.12839V8.86395Z" fill="#107C41"/><path d="M30.614 1.91994H20.0324V8.86395H31.9364V3.24228C31.9364 2.89158 31.7971 2.55523 31.5491 2.30725C31.3011 2.05926 30.9647 1.91994 30.614 1.91994Z" fill="#33C481"/><path d="M20.0324 15.8079H8.12839V28.3736C8.12839 28.7243 8.26767 29.0607 8.51567 29.3087C8.76367 29.5567 9.09999 29.6959 9.45071 29.6959H30.6141C30.9647 29.6959 31.3011 29.5567 31.549 29.3087C31.797 29.0607 31.9364 28.7243 31.9364 28.3736V22.7519L20.0324 15.8079Z" fill="#185C37"/><path d="M20.0324 15.8079H31.9364V22.7519H20.0324V15.8079Z" fill="#107C41"/><path opacity="0.1" d="M16.7261 6.87994H8.12839V25.7279H16.7261C17.0764 25.7269 17.4121 25.5872 17.6599 25.3395C17.9077 25.0917 18.0473 24.756 18.0484 24.4056V8.20226C18.0473 7.8519 17.9077 7.51616 17.6599 7.2684C17.4121 7.02064 17.0764 6.88099 16.7261 6.87994Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V26.7199H15.7341C16.0844 26.7189 16.4201 26.5792 16.6679 26.3315C16.9157 26.0837 17.0553 25.748 17.0564 25.3976V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M15.7341 7.87194H8.12839V24.7359H15.7341C16.0844 24.7349 16.4201 24.5952 16.6679 24.3475C16.9157 24.0997 17.0553 23.764 17.0564 23.4136V9.19426C17.0553 8.84386 16.9157 8.50818 16.6679 8.26042C16.4201 8.01266 16.0844 7.87299 15.7341 7.87194Z" class="fill-foreground" fill="currentColor"/><path opacity="0.2" d="M14.7421 7.87194H8.12839V24.7359H14.7421C15.0924 24.7349 15.4281 24.5952 15.6759 24.3475C15.9237 24.0997 16.0633 23.764 16.0644 23.4136V9.19426C16.0633 8.84386 15.9237 8.50818 15.6759 8.26042C15.4281 8.01266 15.0924 7.87299 14.7421 7.87194Z" class="fill-foreground" fill="currentColor"/><path d="M1.51472 7.87194H14.7421C15.0927 7.87194 15.4291 8.01122 15.6771 8.25922C15.925 8.50722 16.0644 8.84354 16.0644 9.19426V22.4216C16.0644 22.7723 15.925 23.1087 15.6771 23.3567C15.4291 23.6047 15.0927 23.7439 14.7421 23.7439H1.51472C1.16402 23.7439 0.827672 23.6047 0.579686 23.3567C0.3317 23.1087 0.192383 22.7723 0.192383 22.4216V9.19426C0.192383 8.84354 0.3317 8.50722 0.579686 8.25922C0.827672 8.01122 1.16402 7.87194 1.51472 7.87194Z" fill="#107C41"/><path d="M3.69711 20.7679L6.90722 15.794L3.96694 10.8479H6.33286L7.93791 14.0095C8.08536 14.3091 8.18688 14.5326 8.24248 14.68H8.26328C8.36912 14.4407 8.47984 14.2079 8.5956 13.9817L10.3108 10.8479H12.4822L9.46656 15.7663L12.5586 20.7679H10.2473L8.3932 17.2959C8.30592 17.148 8.23184 16.9927 8.172 16.8317H8.14424C8.09016 16.9891 8.01824 17.1399 7.92998 17.2811L6.02236 20.7679H3.69711Z" fill="white"/></svg><span class="relative z-10 align-middle">Excel</span>
                      <input type="radio" name="hs-pro-dpeachddtsts" class="hidden" id="hs-pro-dpeachddtsts1" checked >
                    </label>

<div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dpeachddtss1" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>Section name
                  </label>
                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dpeachddtss1" checked >
                </div>
                <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dpeachddtss2" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 22h2a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3"/><polyline points="14 2 14 8 20 8"/><path d="M4.04 11.71a5.84 5.84 0 1 0 8.2 8.29"/><path d="M13.83 16A5.83 5.83 0 0 0 8 10.17V16h5.83Z"/></svg>Comparison stats
                  </label>
                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dpeachddtss2" checked >
                </div>
                <div class="flex justify-between items-center py-2 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover">
                  <label for="hs-pro-dpeachddtss3" class="flex flex-1 items-center gap-x-3 cursor-pointer text-sm text-foreground">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></svg>Legend indicator
                  </label>
                  <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-dpeachddtss3" checked >
                </div>

<div class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
            <button id="hs-pro-dpeachmd" type="button" class="size-8.5 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
            </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dpeachmd">
              <div class="p-1">
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                  Share reports
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
                  View in fullscreen
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:outline-hidden focus:bg-dropdown-item-focus disabled:opacity-50 disabled:pointer-events-none">
                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h6l6 18h6"/><path d="M14 3h7"/></svg>
                  Connect other apps
                </button>

<div class="h-full p-5 pt-0 space-y-4">
        <div class="h-75 flex justify-center w-full">
          
          <div id="hs-acquisition-pie-chart"></div>
        </div>

<ul>
          
          <li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
            <div>
              <p class="font-medium text-foreground">
                Channels
              </p>
            </div>
            <div class="text-end">
              <p class="font-medium text-foreground">
                Users
              </p>
            </div>
          </li>

<li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
            <div class="flex items-center">
              <span class="shrink-0 size-2.5 inline-block bg-chart-primary rounded-xs me-2.5"></span>
              <span class="text-sm text-foreground">
                Direct
              </span>
            </div>
            <div class="flex justify-end items-center gap-x-1.5">
              <span class="text-sm text-muted-foreground-1">
                11,932
              </span>
              <span class="text-sm text-destructive">
                -417%
              </span>
            </div>
          </li>

<li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
            <div class="flex items-center">
              <span class="shrink-0 size-2.5 inline-block bg-chart-6 rounded-xs me-2.5"></span>
              <span class="text-sm text-foreground">
                Organic search
              </span>
            </div>
            <div class="flex justify-end items-center gap-x-1.5">
              <span class="text-sm text-muted-foreground-1">
                8,740
              </span>
              <span class="text-sm text-red-500 dark:text-red-400">
                -4.1%
              </span>
            </div>
          </li>

<li class="py-3 grid grid-cols-2 justify-between items-center gap-x-4 border-b last:border-b-0 border-line-2">
            <div class="flex items-center">
              <span class="shrink-0 size-2.5 inline-block bg-chart-9 rounded-sm me-2"></span>
              <span class="text-sm text-foreground">
                Referral
              </span>
            </div>
            <div class="flex justify-end items-center gap-x-1.5">
              <span class="text-sm text-muted-foreground-1">
                5,128
              </span>
              <span class="text-sm text-teal-500 dark:text-teal-400">
                +243%
              </span>
            </div>
          </li>
          
        </ul>
        
      </div>

</script>

Open related analytics dashboard page

Pie & Radial Charts

Radial Chart Card with Legend List Pro

Expense Breakdown Card with Pie Chart and Category List New Pro

Radial Progress Chart Card with Legend Grid Pro

Doughnut Chart Card with Title Bar and Legends Pro

Bubble Chart Card with Title Bar and Legends Pro

Pie Chart Card with Title Bar and Legends Pro