CCHub Logo CCHub Tailwind Collection
Komponenten Charts RetroChartsComponent

RetroChartsComponent

Eine Retro-/Vintage-Chart-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Enthält Platzhalterbilder.

Vorschau

HTML-Code 

<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Sales Performance</h2>
  <div class="relative h-48">
    <!-- Placeholder SVG for chart - In a real application, this would be a charting library -->
    <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path fill="#4B5563" d="M0,100 L0,80 C10,75 20,78 30,70 C40,65 50,68 60,60 C70,55 80,58 90,50 C100,45 100,100 Z" class="dark:fill-gray-700"></path>
      <path fill="#6B7280" d="M0,100 L0,85 C10,80 20,83 30,75 C40,70 50,73 60,65 C70,60 80,63 90,55 C100,50 100,100 Z" class="dark:fill-gray-600"></path>
    </svg>
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-gray-600 dark:text-gray-300 text-sm font-mono">Chart Data Not Available</div>
  </div>
  <div class="mt-4 flex justify-between text-gray-700 dark:text-gray-300 text-sm">
    <span>January</span>
    <span>February</span>
    <span>March</span>
    <span>April</span>
    <span>May</span>
  </div>
</div>

Verwandte Komponenten

Balkendiagramm im Dunkelmodus

Responsives Balkendiagramm zur Anzeige von Daten mit Unterstützung des Dunkelmodus.

Offen

Komponente "Skeuomorphe Diagramme"

Eine komplexe, reaktionsschnelle Diagrammkomponente mit einem skeuomorphen Design, einem warmen, neutralen Farbschema und Unterstützung für den Dunkelmodus, geeignet für Foren- oder Community-Dashboards.

Offen

Cyberpunk Chart Komponente - Regierung/Öffentlich

Eine mäßig komplexe Diagrammkomponente mit Cyberpunk-Ästhetik, die sich für Websites von Behörden und öffentlichen Diensten eignet. Mit dunklem Hintergrund, hellen Neon-Akzenten und einer Retro-/Vintage-Farbpalette. Reaktionsschnell und mit Unterstützung für den Dunkelmodus.

Offen