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.

<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>
    <script>
      (function () {
        buildChart(
          "#hs-pro-asdwrb",
          (mode) => ({
            chart: {
              height: 250,
              width: 250,
              type: "radialBar",
              zoom: {
                enabled: false,
              },
            },
            responsive: [
              {
                breakpoint: 1600,
                options: {
                  chart: {
                    height: 220,
                    width: 220
                  }
                }
              },
              {
                breakpoint: 600,
                options: {
                  chart: {
                    height: 200,
                    width: 200
                  }
                }
              },
            ],
            series: [60, 30, 10],
            plotOptions: {
              radialBar: {
                hollow: {
                  margin: 5,
                  size: '35%'
                },
                track: {
                  background: mode === 'dark' ? varToColor('--chart-colors-chart-8-inverse') : varToColor('--chart-colors-chart-8'),
                  strokeWidth: '97%',
                  margin: 5,
                },
                dataLabels: {
                  show: false
                },
              }
            },
            stroke: {
              lineCap: 'round'
            },
            legend: {
              show: false,
            },
            grid: {
              padding: {
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
              },
            },
            states: {
              hover: {
                filter: {
                  type: "none",
                },
              },
            },
            tooltip: {
              enabled: false,
            },
          }),
          () => ({
            colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-6'), varToColor('--chart-colors-chart-10')],
            stroke: {
              colors: [varToColor('--chart-colors-background')],
            },
          }),
          () => ({
            colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-6-inverse'), varToColor('--chart-colors-chart-10-inverse')],
            stroke: {
              colors: [varToColor('--chart-colors-background-inverse')],
            },
          })
        );
      })();
    </script>

Open related analytics survey page

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.

<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>

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>
    <script>
      // Apex Donut Chart
      (function () {
        buildChart(
          "#hs-pro-crbch",
          (mode) => ({
            chart: {
              height: 350,
              type: "donut",
            },
            plotOptions: {
              pie: {
                startAngle: -90,
                endAngle: 90,
                donut: {
                  size: "80%",
                },
                dataLabels: {
                  show: false,
                }
              }
            },
            series: [47, 23, 30, 10],
            labels: ["Nurtured successfully", "Sent to sales review", "Blocked", "Disqualified by team"],
            legend: {
              show: false,
            },
            stroke: {
              lineCap: 'round'
            },
            dataLabels: {
              enabled: false,
            },
            states: {
              hover: {
                filter: {
                  type: "none",
                },
              },
            },
            grid: {
              padding: {
                top: 20,
                bottom: -140
              }
            },
            tooltip: {
              enabled: true,
              custom: function (props) {
                return buildTooltipForDonut(
                  props,
                  mode === "dark"
                      ? [varToColor('--chart-colors-background'), varToColor('--chart-colors-background'), varToColor('--chart-colors-primary'), varToColor('--chart-colors-primary-inverse')]
                    : [varToColor('--chart-colors-background'), varToColor('--chart-colors-background'), varToColor('--chart-colors-background'), varToColor('--chart-colors-background')]
                );
              },
            },
          }),
          () => ({
            colors: [varToColor('--chart-colors-chart-4'), varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-2'), varToColor('--chart-colors-chart-10')],
            stroke: {
              colors: [varToColor('--chart-colors-background')],
            },
            plotOptions: {
              radialBar: {
                track: {
                  background: varToColor('--chart-colors-background'),
                },
              },
            },
          }),
          () => ({
            colors: [varToColor('--chart-colors-chart-4-inverse'), varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-2-inverse'), varToColor('--chart-colors-chart-10-inverse')],
            stroke: {
              colors: [varToColor('--chart-colors-background-inverse')],
            },
            plotOptions: {
              radialBar: {
                track: {
                  background: varToColor('--chart-colors-background-inverse'),
                },
              },
            },
          })
        );
      })();
    </script>

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.

<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>

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>
    <script>
    	// Apex Line Chart
    	(function () {
    	  buildChart(
    	    "#hs-market-share-donut-chart",
    	    (mode) => ({
    	      chart: {
    	        height: 230,
    	        width: 230,
    	        type: "donut",
    	        zoom: {
    	          enabled: false,
    	        },
    	      },
    	      plotOptions: {
    	        pie: {
    	          donut: {
    	            size: "76%",
    	          },
    	        },
    	      },
    	      series: [47, 23, 30],
    	      labels: ["Tailwind CSS", "Preline UI", "Others"],
    	      legend: {
    	        show: false,
    	      },
    	      stroke: {
    	        width: 3,
    	      },
    	      dataLabels: {
    	        enabled: false,
    	      },
    	      grid: {
    	        padding: {
    	          top: 0,
    	          bottom: 0,
    	          left: 0,
    	          right: 0,
    	        },
    	      },
    	      states: {
    	        hover: {
    	          filter: {
    	            type: "none",
    	          },
    	        },
    	      },
    	      tooltip: {
    	        enabled: true,
    	        custom: function (props) {
    	          return buildTooltipForDonut(
    	            props,
    	            mode === "dark"
    	              ? [varToColor('--chart-colors-background'), varToColor('--chart-colors-background'), varToColor('--chart-colors-background')]
    	              : [varToColor('--chart-colors-background'), varToColor('--chart-colors-background'), varToColor('--chart-colors-background-inverse')]
    	          );
    	        },
    	      },
    	    }),
    	    () => ({
    	      colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-6'), varToColor('--chart-colors-chart-9')],
    	      stroke: {
    	        colors: [varToColor('--chart-colors-background')],
    	      },
    	    }),
    	    () => ({
    	      colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-6-inverse'), varToColor('--chart-colors-chart-9-inverse')],
    	      stroke: {
    	        colors: [varToColor('--chart-colors-background-inverse')],
    	      },
    	    })
    	  );
    	})();
    </script>

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.

<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-sm 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>

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>
    <script>
    	// Apex Lines Chart
    	(function () {
    	  buildChart(
    	    "#hs-devices-bubble-chart",
    	    () => ({
    	      chart: {
    	        height: "100%",
    	        type: "bubble",
    	        toolbar: {
    	          show: false,
    	        },
    	        zoom: {
    	          enabled: false,
    	        },
    	      },
    	      series: [
    	        { data: [[5, 6, 70]] },
    	        { data: [[8, 4, 45]] },
    	        { data: [[10, 9, 90]] },
    	      ],
    	      dataLabels: {
    	        style: {
    	          fontSize: "20px",
    	          fontFamily: "Inter, ui-sans-serif",
    	          fontWeight: "400",
    	        },
    	        formatter: (value) => (value ? `${value}%` : ""),
    	      },
    	      fill: {
    	        opacity: 1,
    	      },
    	      legend: {
    	        show: false,
    	      },
    	      plotOptions: {
    	        bubble: {
    	          zScaling: false,
    	          minBubbleRadius: 40,
    	        },
    	      },
    	      grid: {
    	        show: false,
    	        padding: {
    	          top: 0,
    	          bottom: 0,
    	          left: 0,
    	          right: 0,
    	        },
    	      },
    	      xaxis: {
    	        min: 0,
    	        max: 15,
    	        labels: {
    	          show: false,
    	        },
    	        axisBorder: {
    	          show: false,
    	        },
    	        axisTicks: {
    	          show: false,
    	        },
    	      },
    	      yaxis: {
    	        min: 0,
    	        max: 15,
    	        labels: {
    	          show: false,
    	        },
    	      },
    	      tooltip: {
    	        enabled: false,
    	      },
    	      states: {
    	        hover: {
    	          filter: {
    	            type: "none",
    	          },
    	        },
    	      },
    	    }),
    	    () => ({
    	      colors: [varToColor('--chart-colors-chart-6'), varToColor('--chart-colors-chart-10'), varToColor('--chart-colors-primary')],
    	      markers: {
    	        strokeColors: varToColor('--chart-colors-background'),
    	      },
    				dataLabels: {
    	        style: {
    	          colors: [varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground'), varToColor('--chart-colors-foreground-inverse')],
    	        },
    	      },
    	    }),
    	    () => ({
    	      colors: [varToColor('--chart-colors-chart-6-inverse'), varToColor('--chart-colors-chart-10-inverse'), varToColor('--chart-colors-primary-inverse')],
    	      markers: {
    	        strokeColors: varToColor('--chart-colors-background-inverse'),
    	      },
    				dataLabels: {
    	        style: {
    	          colors: [varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground-inverse')],
    	        },
    	      },
    	    })
    	  );
    	})();
    </script>

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.

<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>

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>
    <script>
    	// Apex Lines Chart
    	(function () {
    	  buildChart(
    	    "#hs-acquisition-pie-chart",
    	    () => ({
    	      chart: {
    	        height: "100%",
    	        type: "pie",
    	        zoom: {
    	          enabled: false,
    	        },
    	      },
    	      series: [70, 18, 12],
    	      labels: ["Direct", "Organic search", "Referral"],
    	      title: {
    	        show: false,
    	      },
    	      stroke: {
    	        width: 3,
    	      },
    	      dataLabels: {
    	        style: {
    	          fontSize: "20px",
    	          fontFamily: "Inter, ui-sans-serif",
    	          fontWeight: "400",
    	        },
    	        dropShadow: {
    	          enabled: false,
    	        },
    	        formatter: (value) => `${value.toFixed(1)} %`,
    	      },
    	      plotOptions: {
    	        pie: {
    	          dataLabels: {
    	            offset: -15,
    	          },
    	        },
    	      },
    	      legend: {
    	        show: false,
    	      },
    	      grid: {
    	        padding: {
    	          top: 0,
    	          bottom: 0,
    	          left: 0,
    	          right: 0,
    	        },
    	      },
    	      tooltip: {
    	        enabled: false,
    	      },
    	      states: {
    	        hover: {
    	          filter: {
    	            type: "none",
    	          },
    	        },
    	      },
    	    }),
    	    () => ({
    	      colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-6'), varToColor('--chart-colors-chart-10')],
    	      stroke: {
    	        colors: [varToColor('--chart-colors-background')],
    	      },
    				dataLabels: {
    	        style: {
    	          colors: [varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground')],
    	        },
    	      },
    	    }),
    	    () => ({
    	      colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-6-inverse'), varToColor('--chart-colors-chart-10-inverse')],
    	      stroke: {
    	        colors: [varToColor('--chart-colors-background-inverse')],
    	      },
    				dataLabels: {
    	        style: {
    	          colors: [varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground-inverse'), varToColor('--chart-colors-foreground-inverse')],
    	        },
    	      },
    	    })
    	  );
    	})();

</script>

Open related analytics dashboard page