Chart

CSS-only container for chart libraries (Chart.js, D3, matplotlib, etc.) with theming, legend, tooltip, and glass support. Provides 10 color tokens, fixed height sizes, and automatic dark mode adaptation.

Basic Container

chart-sm (200px)

chart-md (300px)

chart-lg (400px)

chart-xl (500px)

<div style="display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start;">
  <div class="chart chart-sm chart-bordered chart-padded" style="width:200px;">
    <div style="display:flex; align-items:center; justify-content:center; height:100%; opacity:0.4; font-size:0.875rem;">chart-sm (200px)</div>
  </div>
  <div class="chart chart-md chart-bordered chart-padded" style="width:200px;">
    <div style="display:flex; align-items:center; justify-content:center; height:100%; opacity:0.4; font-size:0.875rem;">chart-md (300px)</div>
  </div>
  <div class="chart chart-lg chart-bordered chart-padded" style="width:200px;">
    <div style="display:flex; align-items:center; justify-content:center; height:100%; opacity:0.4; font-size:0.875rem;">chart-lg (400px)</div>
  </div>
  <div class="chart chart-xl chart-bordered chart-padded" style="width:200px;">
    <div style="display:flex; align-items:center; justify-content:center; height:100%; opacity:0.4; font-size:0.875rem;">chart-xl (500px)</div>
  </div>
</div>

Requires: ux.min.css

<div style="display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start;">
  <div class="relative block w-full overflow-hidden rounded-2xl bg-base-100 border border-base-300 p-4" style="width:200px; height:200px;">
    <div class="flex items-center justify-center h-full opacity-40 text-sm">sm (200px)</div>
  </div>
  <div class="relative block w-full overflow-hidden rounded-2xl bg-base-100 border border-base-300 p-4" style="width:200px; height:300px;">
    <div class="flex items-center justify-center h-full opacity-40 text-sm">md (300px)</div>
  </div>
  <div class="relative block w-full overflow-hidden rounded-2xl bg-base-100 border border-base-300 p-4" style="width:200px; height:400px;">
    <div class="flex items-center justify-center h-full opacity-40 text-sm">lg (400px)</div>
  </div>
  <div class="relative block w-full overflow-hidden rounded-2xl bg-base-100 border border-base-300 p-4" style="width:200px; height:500px;">
    <div class="flex items-center justify-center h-full opacity-40 text-sm">xl (500px)</div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS container
// Place your Chart.js canvas or D3 SVG inside .chart
// Example with Chart.js:
// <div class="chart chart-md chart-bordered chart-padded">
//   <canvas id="myChart"></canvas>
// </div>

With Header

Monthly Revenue

Jan - Jun 2026

[Chart.js canvas here]

<div class="chart chart-md chart-bordered" style="width:480px;">
  <div class="chart-header">
    <div>
      <h3 class="chart-title">Monthly Revenue</h3>
      <p class="chart-subtitle">Jan - Jun 2026</p>
    </div>
    <div class="chart-actions">
      <button class="btn btn-sm btn-ghost">Export</button>
      <button class="btn btn-sm btn-outline">Filter</button>
    </div>
  </div>
  <div class="chart-padded" style="display:flex; align-items:center; justify-content:center; height:calc(100% - 60px); opacity:0.3;">
    [Chart.js canvas here]
  </div>
</div>

Requires: ux.min.css

<div class="relative block w-full overflow-hidden rounded-2xl bg-base-100 border border-base-300" style="width:480px; height:300px;">
  <div class="flex items-center justify-between pt-4 px-4">
    <div>
      <h3 class="text-base font-semibold m-0">Monthly Revenue</h3>
      <p class="text-xs opacity-60 mt-1">Jan - Jun 2026</p>
    </div>
    <div class="flex items-center gap-2">
      <button class="btn btn-sm btn-ghost">Export</button>
      <button class="btn btn-sm btn-outline">Filter</button>
    </div>
  </div>
  <div class="p-4 flex items-center justify-center opacity-30" style="height:calc(100% - 60px);">
    [Chart.js canvas here]
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for the container
// chart-header provides a flex row for title + actions
// chart-title and chart-subtitle style the text
// chart-actions wraps action buttons on the right

Legend

Sales by Category

Current quarter

[Chart area]

Electronics Clothing Food Books Other

<div class="chart chart-bordered" style="width:480px;">
  <div class="chart-header">
    <div>
      <h3 class="chart-title">Sales by Category</h3>
      <p class="chart-subtitle">Current quarter</p>
    </div>
  </div>
  <div class="chart-padded" style="height:180px; display:flex; align-items:center; justify-content:center; opacity:0.3;">
    [Chart area]
  </div>
  <div class="chart-legend">
    <span class="chart-legend-item">
      <span class="chart-legend-dot" style="background-color:var(--chart-1);"></span>
      Electronics
    </span>
    <span class="chart-legend-item">
      <span class="chart-legend-dot" style="background-color:var(--chart-2);"></span>
      Clothing
    </span>
    <span class="chart-legend-item">
      <span class="chart-legend-dot" style="background-color:var(--chart-3);"></span>
      Food
    </span>
    <span class="chart-legend-item">
      <span class="chart-legend-dot" style="background-color:var(--chart-4);"></span>
      Books
    </span>
    <span class="chart-legend-item">
      <span class="chart-legend-dot" style="background-color:var(--chart-5);"></span>
      Other
    </span>
  </div>
</div>

Requires: ux.min.css

<div class="relative block w-full overflow-hidden rounded-2xl bg-base-100 border border-base-300" style="width:480px;">
  <div class="flex items-center justify-between pt-4 px-4">
    <div>
      <h3 class="text-base font-semibold m-0">Sales by Category</h3>
      <p class="text-xs opacity-60 mt-1">Current quarter</p>
    </div>
  </div>
  <div class="p-4 flex items-center justify-center opacity-30" style="height:180px;">
    [Chart area]
  </div>
  <div class="flex flex-wrap items-center gap-4 py-3 px-4">
    <span class="flex items-center gap-1.5 text-sm opacity-60">
      <span class="shrink-0 rounded-full" style="width:10px; height:10px; background-color:var(--color-primary);"></span>
      Electronics
    </span>
    <span class="flex items-center gap-1.5 text-sm opacity-60">
      <span class="shrink-0 rounded-full" style="width:10px; height:10px; background-color:var(--color-info);"></span>
      Clothing
    </span>
    <span class="flex items-center gap-1.5 text-sm opacity-60">
      <span class="shrink-0 rounded-full" style="width:10px; height:10px; background-color:var(--color-success);"></span>
      Food
    </span>
    <span class="flex items-center gap-1.5 text-sm opacity-60">
      <span class="shrink-0 rounded-full" style="width:10px; height:10px; background-color:var(--color-warning);"></span>
      Books
    </span>
    <span class="flex items-center gap-1.5 text-sm opacity-60">
      <span class="shrink-0 rounded-full" style="width:10px; height:10px; background-color:var(--color-error);"></span>
      Other
    </span>
  </div>
</div>

Requires: tw.min.css

// chart-legend-dot defaults to --chart-1 color
// Override with inline style for each series:
// style="background-color: var(--chart-2);"
//
// Available chart color tokens:
// --chart-1 through --chart-10

Tooltip

<div style="position:relative; padding:2rem;">
  <div class="chart-tooltip chart-tooltip-visible" style="position:relative; display:inline-block;">
    <div class="chart-tooltip-title">January</div>
    <div class="chart-tooltip-value">$12,450</div>
  </div>

  <div class="chart-tooltip chart-tooltip-visible" style="position:relative; display:inline-block; margin-left:2rem;">
    <div class="chart-tooltip-title">Revenue</div>
    <div class="chart-tooltip-value">+12.5% vs last month</div>
  </div>
</div>

Requires: ux.min.css

<div style="position:relative; padding:2rem;">
  <div class="text-sm pointer-events-none px-3 py-2 bg-base-content text-base-100 rounded-lg shadow-lg" style="display:inline-block;">
    <div class="font-semibold">January</div>
    <div class="text-xs opacity-80">$12,450</div>
  </div>

  <div class="text-sm pointer-events-none px-3 py-2 bg-base-content text-base-100 rounded-lg shadow-lg" style="display:inline-block; margin-left:2rem;">
    <div class="font-semibold">Revenue</div>
    <div class="text-xs opacity-80">+12.5% vs last month</div>
  </div>
</div>

Requires: tw.min.css

// Position the tooltip with JavaScript on hover:
// const tooltip = document.querySelector('.chart-tooltip');
// element.addEventListener('mousemove', (e) => {
//   tooltip.style.left = e.clientX + 12 + 'px';
//   tooltip.style.top = e.clientY - 12 + 'px';
//   tooltip.classList.add('chart-tooltip-visible');
// });
// element.addEventListener('mouseleave', () => {
//   tooltip.classList.remove('chart-tooltip-visible');
// });

SVG Support

<div class="chart chart-svg chart-bordered chart-padded" style="width:480px;">
  <svg viewBox="0 0 400 200" style="width:100%; height:auto;">
    <!-- Axis lines -->
    <line x1="50" y1="10" x2="50" y2="170" stroke="var(--chart-axis)" stroke-width="1"/>
    <line x1="50" y1="170" x2="390" y2="170" stroke="var(--chart-axis)" stroke-width="1"/>

    <!-- Grid lines -->
    <line x1="50" y1="50" x2="390" y2="50" stroke="var(--chart-grid)" stroke-width="0.5" stroke-dasharray="4"/>
    <line x1="50" y1="90" x2="390" y2="90" stroke="var(--chart-grid)" stroke-width="0.5" stroke-dasharray="4"/>
    <line x1="50" y1="130" x2="390" y2="130" stroke="var(--chart-grid)" stroke-width="0.5" stroke-dasharray="4"/>

    <!-- Bars -->
    <rect x="75" y="60" width="40" height="110" rx="4" fill="var(--chart-1)" opacity="0.85"/>
    <rect x="135" y="90" width="40" height="80" rx="4" fill="var(--chart-2)" opacity="0.85"/>
    <rect x="195" y="40" width="40" height="130" rx="4" fill="var(--chart-3)" opacity="0.85"/>
    <rect x="255" y="100" width="40" height="70" rx="4" fill="var(--chart-4)" opacity="0.85"/>
    <rect x="315" y="30" width="40" height="140" rx="4" fill="var(--chart-5)" opacity="0.85"/>

    <!-- Labels -->
    <text x="95" y="188" text-anchor="middle" class="tick" style="font-size:11px;">Jan</text>
    <text x="155" y="188" text-anchor="middle" class="tick" style="font-size:11px;">Feb</text>
    <text x="215" y="188" text-anchor="middle" class="tick" style="font-size:11px;">Mar</text>
    <text x="275" y="188" text-anchor="middle" class="tick" style="font-size:11px;">Apr</text>
    <text x="335" y="188" text-anchor="middle" class="tick" style="font-size:11px;">May</text>
  </svg>
</div>

Requires: ux.min.css

<div class="relative block w-full overflow-hidden rounded-2xl bg-base-100 border border-base-300 p-4" style="width:480px;">
  <svg viewBox="0 0 400 200" class="block w-full max-w-full" style="height:auto;">
    <!-- Axis lines -->
    <line x1="50" y1="10" x2="50" y2="170" stroke="var(--color-base-content)" stroke-opacity="0.4" stroke-width="1"/>
    <line x1="50" y1="170" x2="390" y2="170" stroke="var(--color-base-content)" stroke-opacity="0.4" stroke-width="1"/>

    <!-- Grid lines -->
    <line x1="50" y1="50" x2="390" y2="50" stroke="var(--color-base-300)" stroke-width="0.5" stroke-dasharray="4"/>
    <line x1="50" y1="90" x2="390" y2="90" stroke="var(--color-base-300)" stroke-width="0.5" stroke-dasharray="4"/>
    <line x1="50" y1="130" x2="390" y2="130" stroke="var(--color-base-300)" stroke-width="0.5" stroke-dasharray="4"/>

    <!-- Bars -->
    <rect x="75" y="60" width="40" height="110" rx="4" fill="var(--color-primary)" opacity="0.85"/>
    <rect x="135" y="90" width="40" height="80" rx="4" fill="var(--color-info)" opacity="0.85"/>
    <rect x="195" y="40" width="40" height="130" rx="4" fill="var(--color-success)" opacity="0.85"/>
    <rect x="255" y="100" width="40" height="70" rx="4" fill="var(--color-warning)" opacity="0.85"/>
    <rect x="315" y="30" width="40" height="140" rx="4" fill="var(--color-error)" opacity="0.85"/>

    <!-- Labels -->
    <text x="95" y="188" text-anchor="middle" fill="var(--color-base-content)" opacity="0.6" style="font-size:11px;">Jan</text>
    <text x="155" y="188" text-anchor="middle" fill="var(--color-base-content)" opacity="0.6" style="font-size:11px;">Feb</text>
    <text x="215" y="188" text-anchor="middle" fill="var(--color-base-content)" opacity="0.6" style="font-size:11px;">Mar</text>
    <text x="275" y="188" text-anchor="middle" fill="var(--color-base-content)" opacity="0.6" style="font-size:11px;">Apr</text>
    <text x="335" y="188" text-anchor="middle" fill="var(--color-base-content)" opacity="0.6" style="font-size:11px;">May</text>
  </svg>
</div>

Requires: tw.min.css

// chart-svg automatically adapts embedded SVGs:
// - Sets SVG to block, full width, auto height
// - Overrides white rect backgrounds to --color-base-100
// - Maps text fills to --chart-text
// - Maps .tick text to --chart-text-secondary
// - Remaps matplotlib default palette colors to chart tokens

Glass Variant

Performance

Last 7 days

Visits Conversions

[Chart canvas here]

<div style="background: linear-gradient(135deg, oklch(0.45 0.18 250), oklch(0.40 0.20 290)); padding: 2rem; border-radius: 1rem;">
  <div class="chart glass chart-bordered chart-padded" style="width:440px; margin:auto; height:280px;">
    <div class="chart-header" style="padding:0 0 0.75rem;">
      <div>
        <h3 class="chart-title" style="color:white;">Performance</h3>
        <p class="chart-subtitle" style="color:rgba(255,255,255,0.6);">Last 7 days</p>
      </div>
    </div>
    <div class="chart-legend" style="padding:0 0 0.5rem;">
      <span class="chart-legend-item" style="color:rgba(255,255,255,0.7);">
        <span class="chart-legend-dot" style="background-color:var(--chart-1);"></span>
        Visits
      </span>
      <span class="chart-legend-item" style="color:rgba(255,255,255,0.7);">
        <span class="chart-legend-dot" style="background-color:var(--chart-3);"></span>
        Conversions
      </span>
    </div>
    <div style="flex:1; display:flex; align-items:center; justify-content:center; opacity:0.3; color:white;">
      [Chart canvas here]
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, oklch(0.45 0.18 250), oklch(0.40 0.20 290)); padding: 2rem; border-radius: 1rem;">
  <div class="relative block w-full overflow-hidden rounded-2xl bg-glass-bg backdrop-blur-glass backdrop-saturate-180 border border-glass-border shadow-glass p-4" style="width:440px; margin:auto; height:280px;">
    <div class="flex items-center justify-between pb-3">
      <div>
        <h3 class="text-base font-semibold m-0 text-white">Performance</h3>
        <p class="text-xs mt-1" style="color:rgba(255,255,255,0.6);">Last 7 days</p>
      </div>
    </div>
    <div class="flex flex-wrap items-center gap-4 pb-2" style="color:rgba(255,255,255,0.7);">
      <span class="flex items-center gap-1.5 text-sm">
        <span class="shrink-0 rounded-full" style="width:10px; height:10px; background-color:var(--color-primary);"></span>
        Visits
      </span>
      <span class="flex items-center gap-1.5 text-sm">
        <span class="shrink-0 rounded-full" style="width:10px; height:10px; background-color:var(--color-success);"></span>
        Conversions
      </span>
    </div>
    <div class="flex-1 flex items-center justify-center opacity-30 text-white">
      [Chart canvas here]
    </div>
  </div>
</div>

Requires: tw.min.css

// Combine .chart with .glass for glassmorphism effect
// Works well on gradient or image backgrounds

Color Tokens

10 chart color tokens adapt to your theme and dark mode:

--chart-1

--chart-2

--chart-3

--chart-4

--chart-5

--chart-6

--chart-7

--chart-8

--chart-9

--chart-10

<div class="chart chart-bordered chart-padded" style="width:480px;">
  <p style="font-size:0.75rem; opacity:0.5; margin-bottom:0.75rem;">10 chart color tokens adapt to your theme and dark mode:</p>
  <div style="display:flex; flex-wrap:wrap; gap:0.75rem;">
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <div style="width:32px; height:32px; border-radius:0.5rem; background-color:var(--chart-1);"></div>
      <span style="font-size:0.75rem; font-family:monospace;">--chart-1</span>
    </div>
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <div style="width:32px; height:32px; border-radius:0.5rem; background-color:var(--chart-2);"></div>
      <span style="font-size:0.75rem; font-family:monospace;">--chart-2</span>
    </div>
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <div style="width:32px; height:32px; border-radius:0.5rem; background-color:var(--chart-3);"></div>
      <span style="font-size:0.75rem; font-family:monospace;">--chart-3</span>
    </div>
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <div style="width:32px; height:32px; border-radius:0.5rem; background-color:var(--chart-4);"></div>
      <span style="font-size:0.75rem; font-family:monospace;">--chart-4</span>
    </div>
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <div style="width:32px; height:32px; border-radius:0.5rem; background-color:var(--chart-5);"></div>
      <span style="font-size:0.75rem; font-family:monospace;">--chart-5</span>
    </div>
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <div style="width:32px; height:32px; border-radius:0.5rem; background-color:var(--chart-6);"></div>
      <span style="font-size:0.75rem; font-family:monospace;">--chart-6</span>
    </div>
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <div style="width:32px; height:32px; border-radius:0.5rem; background-color:var(--chart-7);"></div>
      <span style="font-size:0.75rem; font-family:monospace;">--chart-7</span>
    </div>
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <div style="width:32px; height:32px; border-radius:0.5rem; background-color:var(--chart-8);"></div>
      <span style="font-size:0.75rem; font-family:monospace;">--chart-8</span>
    </div>
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <div style="width:32px; height:32px; border-radius:0.5rem; background-color:var(--chart-9);"></div>
      <span style="font-size:0.75rem; font-family:monospace;">--chart-9</span>
    </div>
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <div style="width:32px; height:32px; border-radius:0.5rem; background-color:var(--chart-10);"></div>
      <span style="font-size:0.75rem; font-family:monospace;">--chart-10</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative block w-full overflow-hidden rounded-2xl bg-base-100 border border-base-300 p-4" style="width:480px;">
  <p class="text-xs opacity-50 mb-3">10 chart color tokens adapt to your theme and dark mode:</p>
  <div class="flex flex-wrap gap-3">
    <div class="flex items-center gap-2">
      <div class="size-8 rounded-lg" style="background-color:var(--color-primary);"></div>
      <span class="text-xs font-mono">--chart-1</span>
    </div>
    <div class="flex items-center gap-2">
      <div class="size-8 rounded-lg" style="background-color:var(--color-info);"></div>
      <span class="text-xs font-mono">--chart-2</span>
    </div>
    <div class="flex items-center gap-2">
      <div class="size-8 rounded-lg" style="background-color:var(--color-success);"></div>
      <span class="text-xs font-mono">--chart-3</span>
    </div>
    <div class="flex items-center gap-2">
      <div class="size-8 rounded-lg" style="background-color:var(--color-warning);"></div>
      <span class="text-xs font-mono">--chart-4</span>
    </div>
    <div class="flex items-center gap-2">
      <div class="size-8 rounded-lg" style="background-color:var(--color-error);"></div>
      <span class="text-xs font-mono">--chart-5</span>
    </div>
    <div class="flex items-center gap-2">
      <div class="size-8 rounded-lg" style="background-color:var(--color-secondary);"></div>
      <span class="text-xs font-mono">--chart-6</span>
    </div>
    <div class="flex items-center gap-2">
      <div class="size-8 rounded-lg" style="background-color:var(--color-accent);"></div>
      <span class="text-xs font-mono">--chart-7</span>
    </div>
    <div class="flex items-center gap-2">
      <div class="size-8 rounded-lg bg-[oklch(0.70_0.15_200)]"></div>
      <span class="text-xs font-mono">--chart-8</span>
    </div>
    <div class="flex items-center gap-2">
      <div class="size-8 rounded-lg bg-[oklch(0.60_0.20_300)]"></div>
      <span class="text-xs font-mono">--chart-9</span>
    </div>
    <div class="flex items-center gap-2">
      <div class="size-8 rounded-lg bg-[oklch(0.65_0.18_340)]"></div>
      <span class="text-xs font-mono">--chart-10</span>
    </div>
  </div>
</div>

Requires: tw.min.css

// Use chart color tokens in your chart library config:
//
// Chart.js example:
// datasets: [{
//   backgroundColor: [
//     getComputedStyle(el).getPropertyValue('--chart-1'),
//     getComputedStyle(el).getPropertyValue('--chart-2'),
//     getComputedStyle(el).getPropertyValue('--chart-3'),
//   ]
// }]
//
// D3 example:
// const color = d3.scaleOrdinal([
//   'var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)'
// ]);

Full Example (Header + Chart Area + Legend)

Quarterly Revenue

Q1 - Q4 2025

Revenue Target

<div class="chart chart-md chart-bordered" style="width:520px;">
  <div class="chart-header">
    <div>
      <h3 class="chart-title">Quarterly Revenue</h3>
      <p class="chart-subtitle">Q1 - Q4 2025</p>
    </div>
    <div class="chart-actions">
      <button class="btn btn-sm btn-ghost">Weekly</button>
      <button class="btn btn-sm color-primary">Monthly</button>
    </div>
  </div>
  <div class="chart-padded" style="height:180px;">
    <svg viewBox="0 0 460 160" style="width:100%; height:100%;">
      <!-- Grid -->
      <line x1="0" y1="40" x2="460" y2="40" stroke="var(--chart-grid)" stroke-width="0.5" stroke-dasharray="4"/>
      <line x1="0" y1="80" x2="460" y2="80" stroke="var(--chart-grid)" stroke-width="0.5" stroke-dasharray="4"/>
      <line x1="0" y1="120" x2="460" y2="120" stroke="var(--chart-grid)" stroke-width="0.5" stroke-dasharray="4"/>
      <!-- Line 1 -->
      <polyline fill="none" stroke="var(--chart-1)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" points="20,110 130,70 250,90 370,30"/>
      <circle cx="20" cy="110" r="4" fill="var(--chart-1)"/>
      <circle cx="130" cy="70" r="4" fill="var(--chart-1)"/>
      <circle cx="250" cy="90" r="4" fill="var(--chart-1)"/>
      <circle cx="370" cy="30" r="4" fill="var(--chart-1)"/>
      <!-- Line 2 -->
      <polyline fill="none" stroke="var(--chart-3)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 3" points="20,130 130,100 250,60 370,50"/>
      <circle cx="20" cy="130" r="4" fill="var(--chart-3)"/>
      <circle cx="130" cy="100" r="4" fill="var(--chart-3)"/>
      <circle cx="250" cy="60" r="4" fill="var(--chart-3)"/>
      <circle cx="370" cy="50" r="4" fill="var(--chart-3)"/>
      <!-- Labels -->
      <text x="20" y="155" fill="var(--chart-axis)" style="font-size:11px;">Q1</text>
      <text x="130" y="155" fill="var(--chart-axis)" style="font-size:11px;">Q2</text>
      <text x="250" y="155" fill="var(--chart-axis)" style="font-size:11px;">Q3</text>
      <text x="370" y="155" fill="var(--chart-axis)" style="font-size:11px;">Q4</text>
    </svg>
  </div>
  <div class="chart-legend">
    <span class="chart-legend-item">
      <span class="chart-legend-dot" style="background-color:var(--chart-1);"></span>
      Revenue
    </span>
    <span class="chart-legend-item">
      <span class="chart-legend-dot" style="background-color:var(--chart-3);"></span>
      Target
    </span>
  </div>
</div>

Requires: ux.min.css

<div class="relative block w-full overflow-hidden rounded-2xl bg-base-100 border border-base-300" style="width:520px; height:300px;">
  <div class="flex items-center justify-between pt-4 px-4">
    <div>
      <h3 class="text-base font-semibold m-0">Quarterly Revenue</h3>
      <p class="text-xs opacity-60 mt-1">Q1 - Q4 2025</p>
    </div>
    <div class="flex items-center gap-2">
      <button class="btn btn-sm btn-ghost">Weekly</button>
      <button class="btn btn-sm color-primary">Monthly</button>
    </div>
  </div>
  <div class="p-4" style="height:180px;">
    <svg viewBox="0 0 460 160" class="block w-full h-full">
      <line x1="0" y1="40" x2="460" y2="40" stroke="var(--color-base-300)" stroke-width="0.5" stroke-dasharray="4"/>
      <line x1="0" y1="80" x2="460" y2="80" stroke="var(--color-base-300)" stroke-width="0.5" stroke-dasharray="4"/>
      <line x1="0" y1="120" x2="460" y2="120" stroke="var(--color-base-300)" stroke-width="0.5" stroke-dasharray="4"/>
      <polyline fill="none" stroke="var(--color-primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" points="20,110 130,70 250,90 370,30"/>
      <circle cx="20" cy="110" r="4" fill="var(--color-primary)"/>
      <circle cx="130" cy="70" r="4" fill="var(--color-primary)"/>
      <circle cx="250" cy="90" r="4" fill="var(--color-primary)"/>
      <circle cx="370" cy="30" r="4" fill="var(--color-primary)"/>
      <polyline fill="none" stroke="var(--color-success)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 3" points="20,130 130,100 250,60 370,50"/>
      <circle cx="20" cy="130" r="4" fill="var(--color-success)"/>
      <circle cx="130" cy="100" r="4" fill="var(--color-success)"/>
      <circle cx="250" cy="60" r="4" fill="var(--color-success)"/>
      <circle cx="370" cy="50" r="4" fill="var(--color-success)"/>
      <text x="20" y="155" fill="var(--color-base-content)" opacity="0.4" style="font-size:11px;">Q1</text>
      <text x="130" y="155" fill="var(--color-base-content)" opacity="0.4" style="font-size:11px;">Q2</text>
      <text x="250" y="155" fill="var(--color-base-content)" opacity="0.4" style="font-size:11px;">Q3</text>
      <text x="370" y="155" fill="var(--color-base-content)" opacity="0.4" style="font-size:11px;">Q4</text>
    </svg>
  </div>
  <div class="flex flex-wrap items-center gap-4 py-3 px-4">
    <span class="flex items-center gap-1.5 text-sm opacity-60">
      <span class="shrink-0 rounded-full" style="width:10px; height:10px; background-color:var(--color-primary);"></span>
      Revenue
    </span>
    <span class="flex items-center gap-1.5 text-sm opacity-60">
      <span class="shrink-0 rounded-full" style="width:10px; height:10px; background-color:var(--color-success);"></span>
      Target
    </span>
  </div>
</div>

Requires: tw.min.css

// This example combines all chart sub-components:
// 1. chart-header with chart-title, chart-subtitle, chart-actions
// 2. chart-padded area with inline SVG (or use <canvas> for Chart.js)
// 3. chart-legend with chart-legend-item and chart-legend-dot
//
// The SVG uses --chart-* tokens for colors and --chart-grid/--chart-axis
// for structural elements, ensuring dark mode compatibility.

Reference

Class	Description
.chart	Base chart container with theme variables and canvas support
.chart-bordered	Adds 1px border (base-300)
.chart-padded	Adds padding (1rem, 0.5rem on mobile)
.chart-sm	Fixed height: 200px
.chart-md	Fixed height: 300px
.chart-lg	Fixed height: 400px
.chart-xl	Fixed height: 500px
.chart-header	Flex row for title and actions above the chart
.chart-title	Semibold title text
.chart-subtitle	Secondary description text (smaller, muted)
.chart-actions	Action buttons container in header (right side)
.chart-legend	Flex-wrap legend container with gap
.chart-legend-item	Individual legend entry (flex row with dot + label)
.chart-legend-dot	10px colored circle (defaults to --chart-1)
.chart-tooltip	Fixed-position tooltip (hidden by default, animated)
.chart-tooltip-visible	Shows the tooltip (opacity: 1, translateY: 0)
.chart-tooltip-title	Bold title inside tooltip
.chart-tooltip-value	Smaller value text inside tooltip
.chart-svg	SVG adapter: auto-themes text, backgrounds, and matplotlib colors
.chart.glass	Glassmorphism variant (frosted background)

CSS Variables

Variable	Default	Description
--chart-1	primary	Series color 1
--chart-2	info	Series color 2
--chart-3	success	Series color 3
--chart-4	warning	Series color 4
--chart-5	error	Series color 5
--chart-6	secondary	Series color 6
--chart-7	accent	Series color 7
--chart-8	oklch(0.70 0.15 200)	Series color 8
--chart-9	oklch(0.60 0.20 300)	Series color 9
--chart-10	oklch(0.65 0.18 340)	Series color 10
--chart-grid	base-300	Grid line color
--chart-axis	base-content 40%	Axis line and label color
--chart-text	base-content	Primary text color
--chart-text-secondary	base-content 60%	Secondary/muted text color