Composants Graphiques Graphique à barres en mode sombre

Graphique à barres en mode sombre

Graphique à barres réactif pour l’affichage des données avec prise en charge du mode sombre.

Aperçu

HTML Code

<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Sales Data</h2>
      <div class="relative h-60 lg:h-80">
        <!-- Bars -->
        <div class="absolute bottom-0 left-0 right-0 top-0 flex items-end justify-around px-4">
          <!-- Example bars - adjust height based on your data -->
          <div class="w-8 bg-blue-500 dark:bg-blue-600 rounded-t-lg h-3/4">
            <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">75%</span>
          </div>
          <div class="w-8 bg-green-500 dark:bg-green-600 rounded-t-lg h-2/3">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">66%</span>
          </div>
          <div class="w-8 bg-red-500 dark:bg-red-600 rounded-t-lg h-4/5">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">80%</span>
          </div>
          <div class="w-8 bg-yellow-500 dark:bg-yellow-600 rounded-t-lg h-1/2">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">50%</span>
          </div>
           <div class="w-8 bg-indigo-500 dark:bg-indigo-600 rounded-t-lg h-3/5">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">60%</span>
          </div>
           <div class="w-8 bg-purple-500 dark:bg-purple-600 rounded-t-lg h-2/4">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">50%</span>
          </div>
            <div class="w-8 bg-pink-500 dark:bg-pink-600 rounded-t-lg h-1/3">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">33%</span>
          </div>
        </div>
        <!-- X-axis Labels -->
        <div class="absolute bottom-0 left-0 right-0 h-8 flex items-center justify-around text-gray-600 dark:text-gray-400 text-sm">
          <span>Jan</span>
          <span>Feb</span>
          <span>Mar</span>
          <span>Apr</span>
          <span>May</span>
          <span>Jun</span>
          <span>Jul</span>
        </div>
      </div>
    </div>
  </div>
</template>

Composants associés

Composant Graphiques

Un composant de graphiques réactif conçu selon les principes de la conception matérielle, avec une palette de couleurs pastel et une interactivité complexe pour présenter des portefeuilles. Il inclut la prise en charge du mode sombre avec les classes CSS Tailwind.

Ouvrir

Composant Graphiques

Composant de graphiques complexe conçu pour les applications Web de commerce électronique en mode sombre avec une palette de couleurs en niveaux de gris. Ce composant comprend plusieurs éléments interactifs tels que des graphiques, des points de données, des info-bulles et des boutons, avec une conception réactive à l’aide de Tailwind CSS.

Ouvrir

Composant Graphiques de skeuomorphisme

Un composant de graphiques réactifs avec le style Skeuomorphism, des couleurs vives et la prise en charge du mode sombre pour les interfaces de médias sociaux.

Ouvrir