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

11.8k

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

1 year ago

11.5k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

9.8k
Donunt chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

10.3k
Line chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

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

Author:
Samuel Dawson

2 years ago

10.5k
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

2 months ago

589
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

1 month ago

225
Nested dropdown
Nested dropdown without using javascript. It uses details and summary HTML tags for interactivity.

Author:
Emrys11

1 year ago

12.8k
Blurred Background Modal

Author:
Prem..

2 years ago

12.3k
Basic landing page template

Author:
Anonymous

1 year ago

10.8k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

3 months ago

840
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

1 year ago

25.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components