Home
Akshay
Bar Chart with TailwindCSS and AlpineJS

Bar Chart with TailwindCSS and AlpineJS

This tailwind example is contributed by Akshay, on 16-Sep-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Graph

Chart

Author Akshay

13.3k

Fork Fullscreen

<div class="mb-4">
            <div class="flex items-center">
              <div class="w-2 h-2 bg-blue-600 mr-2 rounded-full"></div>
              <div class="text-sm text-gray-700">Sales</div>
            </div>
          </div>
        </div>

<div class="line my-8 relative">
          
          <template x-if="tooltipOpen == true">
            <div x-ref="tooltipContainer" class="p-0 m-0 z-10 shadow-lg rounded-lg absolute h-auto block" :style="`bottom: ${tooltipY}px; left: ${tooltipX}px`">
              <div class="shadow-xs rounded-lg bg-white p-2">
                <div class="flex items-center justify-between text-sm">
                  <div>Sales:</div>
                  <div class="font-bold ml-2">
                    <span x-html="tooltipContent"></span>
                  </div>
                </div>
              </div>
            </div>
          </template>

<div class="flex -mx-2 items-end mb-2">
            <template x-for="data in chartData">

</template>
          </div>

<div class="border-t border-gray-400 mx-auto" :style="`height: 1px; width: ${ 100 - 1/chartData.length*100 + 3}%`"></div>
          <div class="flex -mx-2 items-end">
            <template x-for="data in labels">
              <div class="px-2 w-1/6">
                <div class="bg-red-600 relative">
                  <div class="text-center absolute top-0 left-0 right-0 h-2 -mt-px bg-gray-400 mx-auto" style="width: 1px"></div>
                  <div x-text="data" class="text-center absolute top-0 left-0 right-0 mt-3 text-gray-700 text-sm"></div>
                </div>
              </div>
            </template>
          </div>

</div>
      </div>
    </div>
  </div>

Related Examples

Pie chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

13.3k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

3 years ago

11.1k
Line chart with chart.js and tailwind css

Author:
Kairi Greene

3 years ago

11.9k
Donunt chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

12k
Daily growth chart
chart for showing data each day of the week

Author:
Samuel Dawson

3 years ago

11.4k
Best chat prompt

Author:
ORGIN_DREAMS

7 months ago

524
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Author:
Abhiraj

11 months ago

2.7k
Infographic Component
Design a modern infographic component with Tailwind CSS. This component helps you display data in a clean, responsive, and visually appealing way. With utility classes, gradients, and smooth transitions, you can quickly build infographics that look professional and work perfectly on all devices.

Author:
CodewithFaraz

4 months ago

704
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

10 months ago

1.4k
Invoice
simpel invoice digital

Author:
Rushikesh Latpate

6 months ago

691
Wave divider

Author:
Lukas Müller

2 years ago

14k
Section for coping code / command

Author:
Kofi Osei

2 years ago

9.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components