Tailwind CSS Spark Charts Blocks

Spark Charts

Tailwind CSS KPI cards with sparkline and compact chart visualizations for quick metric scanning.

KPI Cards with Line Sparklines Pro

Each KPI tile pairs a headline value with a small line spark in the lower half of the card.

Create a responsive UI block named "KPI Cards with Line Sparklines" 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/spark-charts/#kpi-cards-with-line-sparklines. 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/spark-charts
- Block ID: kpi-cards-with-line-sparklines
- Source description: Each KPI tile pairs a headline value with a small line spark in the lower half of the card.
- Preview iframe: https://preline.co/blocks/data-display/spark-charts/iframes/pro/kpi-cards-with-line-sparklines.html (repo path: blocks/data-display/spark-charts/iframes/pro/kpi-cards-with-line-sparklines.html)
- Source markup reference:
  - partials/pro/crm-dashboard/cards/stats-with-line-charts.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/crm-dashboard/sources/stats-card.html
  - scripts/plugins/apexcharts.html
  - partials/pro/crm-dashboard/js/stats-with-line-charts.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.

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):
  - The block is `grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-5` holding exactly four separate cards - two per row on mobile - each `p-5 bg-card border border-card-line shadow-xs rounded-2xl`. Note the `rounded-2xl` radius, larger than the usual card, and that the cards are detached with real gaps between them.
  - Card titles are uppercase `text-xs` muted labels: `OPEN DEALS`, `UNTOUCHED DEALS`, `CALLS TODAY`, `LEADS` (written in the source as `Open deals`, `Untouched deals`, `Calls today`, `Leads` with a `uppercase` class doing the casing).
  - Inside each card the value and the sparkline share one `grid grid-cols-1 sm:grid-cols-2 gap-2` row, so the chart sits to the right of the number at `sm` and up, and drops below it on narrow screens. Headline values are `482`, `639`, `36`, `510`.
  - Under that row sits a delta line: a neutral `bg-surface` rounded-full pill with a small trend arrow and the percentage, then a muted sentence. In order: up `37.3%` / `up from 142`, up `14.5%` / `up from 503`, down `4.1%` / `down from 39`, and `0.0%` / `510`. The fourth card is flat and shows **no** arrow icon in its pill.
  - The delta pill is intentionally neutral-colored for every card - do not tint it green or red to match the direction; only the arrow glyph differs.
  - The charts are ApexCharts line sparklines mounted on empty divs `#hs-open-deals-line-chart`, `#hs-untouched-deals-line-chart`, `#hs-calls-today-line-chart`, `#hs-leads-line-chart`, configured `type: 'line'`, `height: 30`, `sparkline.enabled: true`, `stroke.curve: 'straight'` at width 2, with no axes, grid, legend, or toolbar.
  - Each chart holds one 31-point series named after its card (`Open deals`, `Untouched deals`, `Calls today`, `Leads`) and is colored from the `--chart-colors-primary` / `--chart-colors-primary-inverse` CSS variables through the repo's shared `buildChart` light/dark helper, initialized in a single `window.addEventListener('load', ...)` loop.

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="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-5">
      
      <div class="flex flex-col p-5 bg-card border border-card-line shadow-xs rounded-2xl">
        <div class="space-y-4">
          <h2 class="text-xs uppercase text-muted-foreground-1">
            Open deals
          </h2>

<div class="flex flex-col p-5 bg-card border border-card-line shadow-xs rounded-2xl">
        <div class="space-y-4">
          <h2 class="text-xs uppercase text-muted-foreground-1">
            Untouched deals
          </h2>

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 CRM dashboard page

Live Exchange Rate Card with Sparkline New Pro

Currency pair, live indicator, and daily change sit beside a compact sparkline of the last 24 hours.

Create a responsive UI block named "Live Exchange Rate Card with Sparkline" 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/spark-charts/#live-exchange-rate-card-with-sparkline. 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/spark-charts
- Block ID: live-exchange-rate-card-with-sparkline
- Source description: Currency pair, live indicator, and daily change sit beside a compact sparkline of the last 24 hours.
- Preview iframe: https://preline.co/blocks/data-display/spark-charts/iframes/pro/live-exchange-rate-card-with-sparkline.html (repo path: blocks/data-display/spark-charts/iframes/pro/live-exchange-rate-card-with-sparkline.html)
- Source markup reference:
  - partials/pro/finance-tracker/sources/live-exchange-rate.html
  - partials/pro/css/third-party/charts.html
  - scripts/plugins/apexcharts.html
  - partials/pro/finance-tracker/js/exchange-rate-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 pairs an `h2` reading `Exchange rate` with a `Live` pill whose dot is an emerald `animate-ping` halo over a solid emerald core.
  - The currency pair row is a `role="group"` labelled `US dollar to Norwegian krone`: a US flag image and `USD`, an arrow-right glyph, then a Norway flag image and `NOK`.
  - Flags are the real country PNGs from the `svg-country-flags` package (`png100px/us.png` and `png100px/no.png`) rendered at `size-4 object-cover rounded-full` with proper `alt` text - do not substitute emoji flags or generic circles.
  - The value block reads `942.35` at `text-2xl font-semibold tabular-nums` (id `hs-finance-exchange-rate-value`) above the qualifier `per $100.00`.
  - The sparkline is an empty `div#hs-finance-exchange-rate-chart` fixed at `w-20 h-10` with `role="img"`, sitting to the right of the value.
  - The change line reads `15.08 (1.58%) today` with the number and percent in `tabular-nums`. The arrow group ships `data-hs-rate-down` visible and `data-hs-rate-up` hidden, with the delta red, matching the falling series; a rising rate swaps which arrow is hidden and turns the delta emerald.
  - Deliberately out of scope: the rate, the delta, and the arrow are static markup, and no script keeps them in step with the sparkline's series. Deriving a readout from chart data is data binding, so it belongs in the adopting app's own state layer rather than in the block. Note the value carries its own `aria-label` (`942.35 Norwegian krone` in the source, naming the currency the digits alone do not) - keep that in step with the visible number by hand.
  - ApexCharts area chart, height 40, `sparkline: { enabled: true }`, `stroke.curve: 'straight'`, vertical gradient fill, series named `USD/NOK`, and no axes, grid, or legend.
  - The series is 24 intraday USD to NOK points for 100 USD, one per hour, and the stroke/fill color is chosen from the trend direction rather than fixed.
  - The card has no surface of its own; it is designed to sit on a sidebar surface.

<div>
      <div class="flex items-center justify-between gap-3">
        <h2 id="live-exchange-rate-heading" class="font-medium text-foreground">
          Exchange rate
        </h2>

<div class="mt-4 flex items-center gap-x-2" role="group" aria-label="US dollar to Norwegian krone">
        <span class="inline-flex items-center gap-x-1.5 text-xs font-medium text-muted-foreground-1">
          <img class="shrink-0 size-4 object-cover rounded-full" src="../../../assets/vendor/svg-country-flags/png100px/us.png" width="16" height="16" alt="United States flag">
          USD
        </span>

<p class="mt-3 flex items-center gap-x-1.5 text-xs">
        <span id="hs-finance-exchange-rate-change" class="inline-flex items-center gap-x-0.5 font-medium text-emerald-600 dark:text-emerald-500">
          <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">
            <g data-hs-rate-up><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></g>
            <g class="hidden" data-hs-rate-down><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></g>
          </svg>
          <span id="hs-finance-exchange-rate-change-label" class="tabular-nums">15.08</span>
        </span>
        <span class="text-muted-foreground-1"><span id="hs-finance-exchange-rate-percent-label" class="tabular-nums">(1.58%)</span> today</span>
      </p>

<div class="mt-4 pt-3 border-t border-sidebar-divider">
        <div class="flex items-center justify-between gap-x-2">
          <p class="min-w-0 text-xs text-muted-foreground-1">
            Source:
            <a class="font-medium text-foreground underline decoration-line-3 underline-offset-2 hover:decoration-foreground focus:outline-hidden focus:decoration-foreground" href="https://www.norges-bank.no/en/topics/Statistics/exchange_rates/" target="_blank" rel="noopener noreferrer">Norges Bank</a>
          </p>

<button type="button" id="hs-finance-exchange-rate-refresh" class="shrink-0 py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium bg-layer border border-layer-line text-layer-foreground rounded-lg hover:bg-layer-hover focus:outline-hidden focus:bg-layer-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" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
            Refresh
          </button>
        </div>

<p id="hs-finance-exchange-rate-updated" role="status" class="mt-1.5 text-xs text-muted-foreground-1">Last updated Aug 4, 2026.</p>
      </div>
      
    </div>

if (!chartElement) return;

// Intraday USD -> NOK for 100 USD, one point per hour. Opens at 927.27 and
        // closes at 942.35, the figure in the markup, so the series, the +15.08 delta
        // and the arrow beside it all tell the same story.
        const rates = [
          927.27, 928.05, 927.60, 928.90, 929.75, 929.20,
          930.40, 931.15, 930.80, 932.05, 933.10, 932.60,
          933.85, 934.70, 934.20, 935.60, 936.45, 936.00,
          937.30, 938.55, 938.10, 939.80, 941.20, 942.35
        ];

const isUp = rates[rates.length - 1] >= rates[0];

// varToColor, not cssVarToValue: the tokens resolve to oklch() and only varToColor
        // clamps them into the hex ApexCharts gradients expect. The rate, the delta and the
        // trend arrow beside the chart are static markup - keeping them in step with the
        // series is data binding, so it is left to whoever adopts the block.
        const trendColor = (mode) => (isUp
          ? varToColor(mode === 'dark' ? '--color-emerald-500' : '--color-emerald-600')
          : varToColor(mode === 'dark' ? '--color-red-500' : '--color-red-600'));

buildChart('#hs-finance-exchange-rate-chart', (mode) => ({
          chart: {
            type: 'area',
            height: 40,
            width: '100%',
            sparkline: {
              enabled: true
            },
            fontFamily: cssVarToValue('--font-sans'),
            toolbar: {
              show: false
            },
            zoom: {
              enabled: false
            },
            animations: {
              enabled: false
            }
          },
          series: [{
            name: 'USD/NOK',
            data: rates
          }],
          colors: [trendColor(mode)],
          stroke: {
            curve: 'straight',
            width: 1.5
          },
          fill: {
            type: 'gradient',
            gradient: {
              // Without an explicit end colour ApexCharts shades towards dark, which
              // leaves a grey cast over the sidebar instead of fading out cleanly.
              type: 'vertical',
              shade: 'light',
              shadeIntensity: 0,
              gradientToColors: [trendColor(mode)],
              inverseColors: false,
              opacityFrom: 0.28,
              opacityTo: 0,
              stops: [0, 100]
            }
          },
          dataLabels: {
            enabled: false
          },
          legend: {
            show: false
          },
          grid: {
            show: false,
            padding: {
              top: 2,
              bottom: 2,
              left: 1,
              right: 1
            }
          },
          tooltip: {
            enabled: false
          },
          states: {
            hover: {
              filter: {
                type: 'none'
              }
            }
          }
        }), () => ({
          colors: [trendColor('light')],
          fill: {
            gradient: {
              gradientToColors: [trendColor('light')]
            }
          }
        }), () => ({
          colors: [trendColor('dark')],
          fill: {
            gradient: {
              gradientToColors: [trendColor('dark')]
            }
          }
        }));
      });
    </script>

Open related finance tracker template

Line Spark Metric Card Stack Pro

A vertical stack of metric cards repeats the same layout, with a value block beside a compact line spark.

Create a responsive UI block named "Line Spark Metric Card Stack" 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/spark-charts/#line-spark-metric-card-stack. 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/spark-charts
- Block ID: line-spark-metric-card-stack
- Source description: A vertical stack of metric cards repeats the same layout, with a value block beside a compact line spark.
- Preview iframe: https://preline.co/blocks/data-display/spark-charts/iframes/pro/line-spark-metric-card-stack.html (repo path: blocks/data-display/spark-charts/iframes/pro/line-spark-metric-card-stack.html)
- Source markup reference:
  - partials/pro/cms-admin/layouts-components/line-chart-stats-list-view.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/cms-admin/sources/line-chart-stats.html
  - scripts/plugins/apexcharts.html
  - partials/pro/cms-admin/js/line-chart-stats.html
  - partials/pro/cms-admin/js/line-chart-stats-main.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):
  - Heading row reads `Analytics` on the left with a right-aligned `Reports` link (chevron-right icon, underlined), sitting above a dashed bottom border.
  - Exactly 3 metric cards stack in order: `Total posts`, `Repeated visitors`, `New visitors`.
  - Values and deltas in order: `459` with a green up-arrow `7.8%`, `427` with a red down-arrow `0.2%`, `103` with a green up-arrow `9%`.
  - Every card has an absolutely positioned right-side pill button whose `View all` label is collapsed by default (`max-w-0 opacity-0`, `lg:block hidden`) and expands only on group hover/focus; its arrow-out-of-box icon is always visible.
  - List wrapper is `grid grid-cols-1 md:grid-cols-3 lg:grid-cols-1 md:divide-x lg:divide-x-0 divide-line-2`; each card is `p-4 border-b border-line-2`.
  - Charts are ApexCharts created through the shared `buildChart` helper into ids `hs-pro-abchsm`, `hs-pro-abchs1`, `hs-pro-abchs2`; the first card's chart is taller (`min-h-42.5`, height 170, two series `Total posts` and `Total views`) while cards 2-3 use `min-h-12.5` and height 50 with one series each.
  - All charts are gradient-filled `area` type with `sparkline: { enabled: true }`, `stroke.curve: 'straight'` width 2, 31 category labels running `1 Jun 2025` through `31 Jun 2025`, custom `buildTooltip` / `buildTooltipCompareTwoAlt` tooltips, and colors resolved from CSS variables (`--chart-colors-primary-hex` and its inverse) - no visible axes, grid labels, or legend.

<div>
      
      <div class="p-4 pb-0">
        <div class="pb-2 flex flex-wrap justify-between items-center gap-2 border-b border-dashed border-line-2">
          <h2 class="font-medium text-sm text-foreground">
            Analytics
          </h2>

<a class="inline-flex items-center gap-x-0.5 text-[13px] text-primary underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none" href="#">
            Reports
            <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="m9 18 6-6-6-6"/></svg>
          </a>
        </div>
      </div>

<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-1 md:divide-x lg:divide-x-0 divide-line-2">
        
        <div class="p-4 border-b border-line-2">
          <div class="flex flex-col">
            
            <div class="relative">
              <div class="pe-20">
                <h3 class="text-sm text-muted-foreground-1">
                  Total posts
                </h3>
        
                <div class="flex items-center gap-2">
                  <p class="text-xl text-foreground">
                    459
                  </p>
                  <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                    <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="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                    7.8%
                  </span>
                </div>
              </div>

<div class="absolute top-1/2 inset-e-0 -translate-y-1/2">
                <button type="button" class="group size-7 lg:size-auto lg:py-1.5 lg:px-2 flex items-center justify-center border border-layer-line text-layer-foreground text-xs rounded-full py-1 hover:bg-primary-50 hover:border-primary-100 hover:text-primary-700 focus:outline-none focus:bg-primary-50 focus:border-primary-100 focus:text-primary-700 dark:hover:bg-primary-500/20 dark:hover:border-primary-500/20 dark:hover:text-primary-400 dark:focus:bg-primary-500/20 dark:focus:border-primary-500/20 dark:focus:text-primary-400">
                  <span class="lg:block hidden max-w-0 overflow-hidden whitespace-nowrap opacity-0 transition-all duration-300 group-hover:me-1 group-hover:max-w-25 group-hover:opacity-100 group-focus:me-1 group-focus:max-w-25 group-focus:opacity-100">
                    View all
                  </span>
                  <svg class="shrink-0 size-3" 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="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></svg>
                </button>
              </div>
              
            </div>

<div id="hs-pro-abchsm" class="min-h-42.5"></div>
          </div>
        </div>

<div class="p-4 border-b border-line-2">
          <div class="flex flex-col">
            
            <div class="relative">
              <div class="pe-20">
                <h3 class="text-sm text-muted-foreground-1">
                  Repeated visitors
                </h3>
        
                <div class="flex items-center gap-2">
                  <p class="text-xl text-foreground">
                    427
                  </p>
                  <span class="flex justify-center items-center gap-x-1 text-sm text-destructive">
                    <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                    0.2%
                  </span>
                </div>
              </div>

<div id="hs-pro-abchs1" class="min-h-12.5"></div>
          </div>
        </div>

<div class="p-4 border-b border-line-2">
          <div class="flex flex-col">
            
            <div class="relative">
              <div class="pe-20">
                <h3 class="text-sm text-muted-foreground-1">
                  New visitors
                </h3>
        
                <div class="flex items-center gap-2">
                  <p class="text-xl text-foreground">
                    103
                  </p>
                  <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                    <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="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                    9%
                  </span>
                </div>
              </div>

<div id="hs-pro-abchs2" class="min-h-12.5"></div>
          </div>
        </div>
        
      </div>
      
    </div>

barCharts.forEach(({ id, data, name, valuePostfix }) => {
    		    buildChart(id, (mode) => ({
    		      series: [{
    		        name,
    		        data
    		      }],
    		      chart: {
    		        height: 50,
    		        type: 'area',
    		        sparkline: {
    		          enabled: true
    		        }
    		      },
    					stroke: {
    						curve: 'straight',
    						width: 2
    					},
    		      fill: {
    						type: 'gradient',
    						gradient: {
    							type: 'vertical',
    							shadeIntensity: 1,
    							opacityFrom: 0.2,
    							opacityTo: 0.8
    						}
    					},
    		      xaxis: {
    		        type: 'category',
    		        categories: [
    		          '1 Jun 2025',
    		          '2 Jun 2025',
    		          '3 Jun 2025',
    		          '4 Jun 2025',
    		          '5 Jun 2025',
    		          '6 Jun 2025',
    		          '7 Jun 2025',
    		          '8 Jun 2025',
    		          '9 Jun 2025',
    		          '10 Jun 2025',
    		          '11 Jun 2025',
    		          '12 Jun 2025',
    		          '13 Jun 2025',
    		          '14 Jun 2025',
    		          '15 Jun 2025',
    		          '16 Jun 2025',
    		          '17 Jun 2025',
    		          '18 Jun 2025',
    		          '19 Jun 2025',
    		          '20 Jun 2025',
    		          '21 Jun 2025',
    		          '22 Jun 2025',
    		          '23 Jun 2025',
    		          '24 Jun 2025',
    		          '25 Jun 2025',
    		          '26 Jun 2025',
    		          '27 Jun 2025',
    		          '28 Jun 2025',
    		          '29 Jun 2025',
    		          '30 Jun 2025',
    		          '31 Jun 2025',
    		        ],
    		        crosshairs: {
    		          show: false
    		        }
    		      },
              states: {
                hover: {
                  filter: {
                    type: 'darken',
                    value: 0.9
                  }
                }
              },
    		      tooltip: {
    		        custom: function (props) {
    		          const { categories } = props.ctx.opts.xaxis;
    		          const { dataPointIndex } = props;
    		          const title = categories[dataPointIndex].split(' ');
    		          const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
    		            title: newTitle,
    		            mode,
    		            hasTextLabel: true,
    		            wrapperExtClasses: 'min-w-28',
    		            valuePrefix: '',
    		            labelDivider: ':',
    		            labelExtClasses: 'ms-2',
    		            valuePostfix
    		          });
    		        }
    		      }
    		    }), () => ({
    		      colors: [varToColor('--chart-colors-primary-hex')],
    					fill: {
    						gradient: {
    							stops: [0, 90, 100]
    						}
    					},
    					grid: {
    						padding: {
    							bottom: 4
    						},
    					}
    		    }), () => ({
    		      colors: [varToColor('--chart-colors-primary-hex-inverse')],
    					fill: {
    						gradient: {
    							stops: [100, 90, 0]
    						}
    					},
    					grid: {
    						padding: {
    							bottom: 4
    						},
    					}
    		    }));
    	    });
    	  })();
    	});
    </script>

Open related CMS posts page

Sparkline Stat Card Stack Pro

Short stat cards line up one after another, each using a sparkline as a small trailing trend view.

Create a responsive UI block named "Sparkline Stat Card Stack" 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/spark-charts/#sparkline-stat-card-stack. 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/spark-charts
- Block ID: sparkline-stat-card-stack
- Source description: Short stat cards line up one after another, each using a sparkline as a small trailing trend view.
- Preview iframe: https://preline.co/blocks/data-display/spark-charts/iframes/pro/sparkline-stat-card-stack.html (repo path: blocks/data-display/spark-charts/iframes/pro/sparkline-stat-card-stack.html)
- Source markup reference:
  - partials/pro/cms-admin/layouts-components/sparklines-stats-list-view.html
  - partials/pro/css/third-party/charts.html
  - partials/pro/cms-admin/sources/sparklines-stats.html
  - scripts/plugins/apexcharts.html
  - partials/pro/cms-admin/js/sparklines-stats.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):
  - Heading row reads `Engagement` on the left with a right-aligned `Reports` link (chevron-right icon, underlined), sitting above a dashed bottom border.
  - Exactly 3 stat cards follow in order: `This week`, `Last week`, `Newsletter subscribers`.
  - Values and deltas in order: `1202` with a red down-arrow `15.7%`, `702` with a green up-arrow `194%`, `601` with a green up-arrow `9` - the third delta is a bare number with no percent sign.
  - Each card is `p-4 border-b border-line-2` and places the text block and sparkline side by side in `grid grid-cols-2 gap-5`, with the chart div at `min-h-7.5`; the list wrapper is `grid grid-cols-1 md:grid-cols-3 lg:grid-cols-1 md:divide-x lg:divide-x-0 divide-line-2`.
  - Sparklines are ApexCharts `line` charts, height 30, `sparkline: { enabled: true }`, `stroke.curve: 'straight'` width 2, built via the shared `buildChart` helper into ids `hs-pro-asschs1`, `hs-pro-asschs2`, `hs-pro-asschs3`, each series carrying 31 data points.
  - Tooltips are custom `buildTooltip` output with `fixed: { enabled: true, position: 'bottomRight' }`; categories are date strings such as `25 January 2023`, and no axes, grid, or legend render.
  - No dropdowns, tabs, or Preline JS plugins appear in this block - the only scripting is the ApexCharts initialization.

<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-1 md:divide-x lg:divide-x-0 divide-line-2">
        
        <div class="p-4 border-b border-line-2">
          <div class="grid grid-cols-2 gap-5">
            <div>
              <h3 class="text-sm text-muted-foreground-1">
                This week
              </h3>
      
              <div class="flex items-center gap-1">
                <p class="font-medium text-sm text-foreground">
                  1202
                </p>
                <span class="flex justify-center items-center text-xs text-destructive">
                  <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="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                  15.7%
                </span>
              </div>
            </div>

<div id="hs-pro-asschs1" class="min-h-7.5"></div>
          </div>
        </div>

<div class="p-4 border-b border-line-2">
          <div class="grid grid-cols-2 gap-5">
            <div>
              <h3 class="text-sm text-muted-foreground-1">
                Last week
              </h3>
      
              <div class="flex items-center gap-1">
                <p class="font-medium text-sm text-foreground">
                  702
                </p>
                <span class="flex justify-center items-center text-xs text-green-600">
                  <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="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                  194%
                </span>
              </div>
            </div>

<div id="hs-pro-asschs2" class="min-h-7.5"></div>
          </div>
        </div>

<div class="p-4 border-b border-line-2">
          <div class="grid grid-cols-2 gap-5">
            <div>
              <h3 class="text-sm text-muted-foreground-1">
                Newsletter subscribers
              </h3>
      
              <div class="flex items-center gap-1">
                <p class="font-medium text-sm text-foreground">
                  601
                </p>
                <span class="flex justify-center items-center text-xs text-green-600">
                  <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="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                  9
                </span>
              </div>
            </div>

<div id="hs-pro-asschs3" class="min-h-7.5"></div>
          </div>
        </div>
        
      </div>
      
    </div>

Open related CMS posts page

Attached KPI Card Group with Sparklines Pro

Attached cards share borders and spacing, with one sparkline embedded into each metric block.

Create a responsive UI block named "Attached KPI Card Group with Sparklines" 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/spark-charts/#attached-kpi-card-group-with-sparklines. 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/spark-charts
- Block ID: attached-kpi-card-group-with-sparklines
- Source description: Attached cards share borders and spacing, with one sparkline embedded into each metric block.
- Preview iframe: https://preline.co/blocks/data-display/spark-charts/iframes/pro/attached-kpi-card-group-with-sparklines.html (repo path: blocks/data-display/spark-charts/iframes/pro/attached-kpi-card-group-with-sparklines.html)
- Source markup reference:
  - partials/pro/admin-dashboard/cards/attached-card-group.html
  - partials/pro/css/third-party/charts.html
  - scripts/plugins/apexcharts.html
  - partials/pro/admin-dashboard/js/attached-card-group.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):
  - The group is one `grid sm:grid-cols-2 lg:grid-cols-4` with a single outer `border border-card-line shadow-2xs rounded-xl overflow-hidden`; the four cells are attached, sharing `border-card-divider` hairlines that switch between `border-s` and `border-t` per breakpoint. Do not render four separately rounded/shadowed cards with gaps between them.
  - Exactly four metrics in order: `Users`, `Avg. click rate`, `Sessions`, `Session duration`. Their headline values are `17,482`, `52,639`, `21,336`, `5m 10s` at `text-2xl font-semibold`.
  - Each header row pairs the muted metric title with a small rounded-full delta pill carrying a 16-viewBox filled arrow: teal `22%`, teal `11.9%`, red `4.1%`, teal `5%`. Only Sessions is the red/down card, and its `Last 30 days` caption is red too - the other three captions are teal.
  - Under the caption each card holds an empty ApexCharts mount followed by a two-item axis row reading `25 Jan` on the left and `25 Feb` on the right. Mount ids are `#hs-users-line-chart`, `#hs-avg-click-rate-line-chart`, `#hs-sessions-line-chart`, `#hs-session-duration-line-chart`.
  - Despite the "line-chart" ids and the block name, the charts are ApexCharts **bar** sparklines: `type: 'bar'`, `height: 30`, `sparkline.enabled: true`, no toolbar, legend, axes, or grid, colored from the `--chart-colors-primary` / `--chart-colors-primary-inverse` CSS variables for light/dark.
  - Each chart has one series of 31 points over daily categories from `25 January 2023`; series names are `Users`, `Clicks`, `Sessions`, and `Avg. duration`, and only the last uses `valuePostfix: 'min'`.
  - The charts are wired through the repo's shared `buildChart(id, (mode) => ({...}))` helper inside a `window.addEventListener('load', ...)` block, so all four are built from one loop over a config array rather than four separate initializations.

<div class="grid sm:grid-cols-2 lg:grid-cols-4 border border-card-line shadow-2xs rounded-xl overflow-hidden">
      
      <div class="flex flex-col p-5 bg-card">
        <div class="mb-4">
          <div class="flex flex-wrap justify-between items-center gap-2">
            <h2 class="text-muted-foreground-1">
              Users
            </h2>
            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
              <svg class="w-3 h-3" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.39508 3.55649C9.39508 3.4089 9.45413 3.26735 9.55924 3.16299C9.66436 3.05863 9.80692 3 9.95557 3H14.4395C14.5882 3 14.7307 3.05863 14.8358 3.16299C14.9409 3.26735 15 3.4089 15 3.55649V8.00839C15 8.15598 14.9409 8.29753 14.8358 8.40189C14.7307 8.50625 14.5882 8.56488 14.4395 8.56488C14.2909 8.56488 14.1483 8.50625 14.0432 8.40189C13.9381 8.29753 13.879 8.15598 13.879 8.00839V5.11465L9.8289 10.0307C9.77932 10.0908 9.71762 10.1399 9.64777 10.1749C9.57792 10.2098 9.50146 10.2299 9.42333 10.2338C9.34519 10.2377 9.2671 10.2253 9.19409 10.1974C9.12107 10.1695 9.05474 10.1267 8.99937 10.0719L6.09939 7.19258L2.00107 12.7875C1.91141 12.9007 1.78106 12.975 1.6374 12.9947C1.49374 13.0145 1.34796 12.9782 1.2307 12.8935C1.11343 12.8087 1.03381 12.6822 1.00856 12.5404C0.983313 12.3986 1.01441 12.2526 1.09531 12.1331L5.57925 6.01171C5.62684 5.94662 5.68808 5.89254 5.75875 5.85321C5.82942 5.81388 5.90784 5.79022 5.9886 5.78388C6.06936 5.77753 6.15055 5.78864 6.22657 5.81645C6.30259 5.84425 6.37164 5.88809 6.42895 5.94493L9.3536 8.8498L13.2569 4.11298H9.95557C9.80692 4.11298 9.66436 4.05435 9.55924 3.94998C9.45413 3.84562 9.39508 3.70408 9.39508 3.55649Z"/>
              </svg>
              22%
            </span>
          </div>

<div class="w-full">
          
          <div id="hs-users-line-chart"></div>
          <div class="flex justify-between text-xs text-muted-foreground mt-1">
            <span>25 Jan</span>
            <span>25 Feb</span>
          </div>
        </div>
        
      </div>

<div class="flex flex-col p-5 bg-card sm:border-s border-t sm:border-t-0 border-card-divider">
        <div class="mb-4">
          <div class="flex flex-wrap justify-between items-center gap-2">
            <h2 class="text-muted-foreground-1">
              Avg. click rate
            </h2>
            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
              <svg class="w-3 h-3" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.39508 3.55649C9.39508 3.4089 9.45413 3.26735 9.55924 3.16299C9.66436 3.05863 9.80692 3 9.95557 3H14.4395C14.5882 3 14.7307 3.05863 14.8358 3.16299C14.9409 3.26735 15 3.4089 15 3.55649V8.00839C15 8.15598 14.9409 8.29753 14.8358 8.40189C14.7307 8.50625 14.5882 8.56488 14.4395 8.56488C14.2909 8.56488 14.1483 8.50625 14.0432 8.40189C13.9381 8.29753 13.879 8.15598 13.879 8.00839V5.11465L9.8289 10.0307C9.77932 10.0908 9.71762 10.1399 9.64777 10.1749C9.57792 10.2098 9.50146 10.2299 9.42333 10.2338C9.34519 10.2377 9.2671 10.2253 9.19409 10.1974C9.12107 10.1695 9.05474 10.1267 8.99937 10.0719L6.09939 7.19258L2.00107 12.7875C1.91141 12.9007 1.78106 12.975 1.6374 12.9947C1.49374 13.0145 1.34796 12.9782 1.2307 12.8935C1.11343 12.8087 1.03381 12.6822 1.00856 12.5404C0.983313 12.3986 1.01441 12.2526 1.09531 12.1331L5.57925 6.01171C5.62684 5.94662 5.68808 5.89254 5.75875 5.85321C5.82942 5.81388 5.90784 5.79022 5.9886 5.78388C6.06936 5.77753 6.15055 5.78864 6.22657 5.81645C6.30259 5.84425 6.37164 5.88809 6.42895 5.94493L9.3536 8.8498L13.2569 4.11298H9.95557C9.80692 4.11298 9.66436 4.05435 9.55924 3.94998C9.45413 3.84562 9.39508 3.70408 9.39508 3.55649Z"/>
              </svg>
              11.9%
            </span>
          </div>

<div class="w-full">
          
          <div id="hs-avg-click-rate-line-chart"></div>
          <div class="flex justify-between text-xs text-muted-foreground mt-1">
            <span>25 Jan</span>
            <span>25 Feb</span>
          </div>
        </div>
        
      </div>

<div class="flex flex-col p-5 bg-card sm:border-s-0 lg:border-s border-t sm:border-t lg:border-t-0 border-card-divider">
        <div class="mb-4">
          <div class="flex flex-wrap justify-between items-center gap-2">
            <h2 class="text-muted-foreground-1">
              Sessions
            </h2>
            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-red-100 text-red-800 rounded-full dark:bg-red-500/10 dark:text-red-500">
              <svg class="w-3 h-3" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.39508 12.4435C9.39508 12.5911 9.45413 12.7326 9.55924 12.837C9.66436 12.9414 9.80692 13 9.95557 13H14.4395C14.5882 13 14.7307 12.9414 14.8358 12.837C14.9409 12.7326 15 12.5911 15 12.4435V7.99161C15 7.84402 14.9409 7.70247 14.8358 7.59811C14.7307 7.49375 14.5882 7.43512 14.4395 7.43512C14.2909 7.43512 14.1483 7.49375 14.0432 7.59811C13.9381 7.70247 13.879 7.84402 13.879 7.99161V10.8853L9.8289 5.96933C9.77932 5.90924 9.71762 5.86013 9.64777 5.82515C9.57792 5.79017 9.50146 5.77009 9.42333 5.76621C9.34519 5.76233 9.2671 5.77474 9.19409 5.80263C9.12107 5.83052 9.05474 5.87327 8.99937 5.92815L6.09939 8.80742L2.00107 3.21249C1.91141 3.0993 1.78106 3.02502 1.6374 3.00527C1.49374 2.98551 1.34796 3.02181 1.2307 3.10653C1.11343 3.19126 1.03381 3.31782 1.00856 3.45962C0.983313 3.60142 1.01441 3.74741 1.09531 3.86692L5.57925 9.98829C5.62684 10.0534 5.68808 10.1075 5.75875 10.1468C5.82942 10.1861 5.90784 10.2098 5.9886 10.2161C6.06936 10.2225 6.15055 10.2114 6.22657 10.1836C6.30259 10.1557 6.37164 10.1119 6.42895 10.0551L9.3536 7.1502L13.2569 11.887H9.95557C9.80692 11.887 9.66436 11.9457 9.55924 12.05C9.45413 12.1544 9.39508 12.2959 9.39508 12.4435Z"></path>
              </svg>
              4.1%
            </span>
          </div>

<div class="w-full">
          
          <div id="hs-sessions-line-chart"></div>
          <div class="flex justify-between text-xs text-muted-foreground mt-1">
            <span>25 Jan</span>
            <span>25 Feb</span>
          </div>
        </div>
        
      </div>

<div class="flex flex-col p-5 bg-card sm:border-s border-t sm:border-t lg:border-t-0 border-card-divider">
        <div class="mb-4">
          <div class="flex flex-wrap justify-between items-center gap-2">
            <h2 class="text-muted-foreground-1">
              Session duration
            </h2>
            <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
              <svg class="w-3 h-3" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.39508 3.55649C9.39508 3.4089 9.45413 3.26735 9.55924 3.16299C9.66436 3.05863 9.80692 3 9.95557 3H14.4395C14.5882 3 14.7307 3.05863 14.8358 3.16299C14.9409 3.26735 15 3.4089 15 3.55649V8.00839C15 8.15598 14.9409 8.29753 14.8358 8.40189C14.7307 8.50625 14.5882 8.56488 14.4395 8.56488C14.2909 8.56488 14.1483 8.50625 14.0432 8.40189C13.9381 8.29753 13.879 8.15598 13.879 8.00839V5.11465L9.8289 10.0307C9.77932 10.0908 9.71762 10.1399 9.64777 10.1749C9.57792 10.2098 9.50146 10.2299 9.42333 10.2338C9.34519 10.2377 9.2671 10.2253 9.19409 10.1974C9.12107 10.1695 9.05474 10.1267 8.99937 10.0719L6.09939 7.19258L2.00107 12.7875C1.91141 12.9007 1.78106 12.975 1.6374 12.9947C1.49374 13.0145 1.34796 12.9782 1.2307 12.8935C1.11343 12.8087 1.03381 12.6822 1.00856 12.5404C0.983313 12.3986 1.01441 12.2526 1.09531 12.1331L5.57925 6.01171C5.62684 5.94662 5.68808 5.89254 5.75875 5.85321C5.82942 5.81388 5.90784 5.79022 5.9886 5.78388C6.06936 5.77753 6.15055 5.78864 6.22657 5.81645C6.30259 5.84425 6.37164 5.88809 6.42895 5.94493L9.3536 8.8498L13.2569 4.11298H9.95557C9.80692 4.11298 9.66436 4.05435 9.55924 3.94998C9.45413 3.84562 9.39508 3.70408 9.39508 3.55649Z"/>
              </svg>
              5%
            </span>
          </div>

<div class="w-full">
          
          <div id="hs-session-duration-line-chart"></div>
          <div class="flex justify-between text-xs text-muted-foreground mt-1">
            <span>25 Jan</span>
            <span>25 Feb</span>
          </div>
        </div>
        
      </div>
      
    </div>

barCharts.forEach(({ id, data, name, valuePostfix }) => {
    		    buildChart(id, (mode) => ({
    		      series: [{
    		        name,
    		        data
    		      }],
    		      chart: {
    		        height: 30,
    		        type: 'bar',
    		        sparkline: {
    		          enabled: true
    		        }
    		      },
    		      stroke: {
    		        curve: 'straight',
    		        width: 2
    		      },
    		      xaxis: {
    		        type: 'category',
    		        categories: [
    		          '25 January 2023',
    		          '26 January 2023',
    		          '27 January 2023',
    		          '28 January 2023',
    		          '29 January 2023',
    		          '30 January 2023',
    		          '31 January 2023',
    		          '1 February 2023',
    		          '2 February 2023',
    		          '3 February 2023',
    		          '4 February 2023',
    		          '5 February 2023',
    		          '6 February 2023',
    		          '25 January 2023',
    		          '26 January 2023',
    		          '27 January 2023',
    		          '28 January 2023',
    		          '29 January 2023',
    		          '30 January 2023',
    		          '31 January 2023',
    		          '1 February 2023',
    		          '2 February 2023',
    		          '3 February 2023',
    		          '4 February 2023',
    		          '5 February 2023',
    		          '6 February 2023',
    		          '25 January 2023',
    		          '26 January 2023',
    		          '27 January 2023',
    		          '28 January 2023',
    		          '29 January 2023'
    		        ],
    		        crosshairs: {
    		          show: false
    		        }
    		      },
    		      markers: {
    		        hover: {
    		          size: 0
    		        }
    		      },
    		      tooltip: {
    		        marker: {
    		          show: false
    		        },
    		        fixed: {
    	            enabled: true,
    	            position: 'bottomLeft',
    	            offsetX: 100,
    	            offsetY: -10,
    	          },
    		        custom: function (props) {
    		          const { categories } = props.ctx.opts.xaxis;
    		          const { dataPointIndex } = props;
    		          const title = categories[dataPointIndex].split(' ');
    		          const newTitle = `${title[0]} ${title[1]}`;

return buildTooltip(props, {
    		            title: newTitle,
    		            mode,
    		            hasTextLabel: true,
    		            wrapperExtClasses: 'min-w-28',
    		            valuePrefix: '',
    		            labelDivider: ':',
    		            labelExtClasses: 'ms-2',
    		            valuePostfix
    		          });
    		        }
    		      }
    		    }), () => ({
    		      colors: [varToColor('--chart-colors-primary')]
    		    }), () => ({
    		      colors: [varToColor('--chart-colors-primary-inverse')]
    		    }));
    	    });
    	  })();
    	});
    </script>