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

11k

2

Fork Fullscreen

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<style>
	body {
		font-family: 'IBM Plex Mono', sans-serif;
	}
    [x-cloak] {
        display: none;
    }
    .line {
        background: repeating-linear-gradient(
            to bottom,
            #eee,
            #eee 1px,
            #fff 1px,
            #fff 8%
        );
    }
	.tick {
        background: repeating-linear-gradient(
            to right,
            #eee,
            #eee 1px,
            #fff 1px,
            #fff 5%
        );
    }
</style>
<body class="antialiased sans-serif bg-gray-200">
  <div x-data="app()" x-cloak class="px-4">
    <div class="max-w-lg mx-auto py-24">
      <div class="shadow p-6 rounded-lg bg-white">
        <div class="md:flex md:justify-between md:items-center">
          <div>
            <h2 class="text-xl text-gray-800 font-bold leading-tight">Product Sales</h2>
            <p class="mb-2 text-gray-600 text-sm">Monthly Average</p>
          </div>

<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">

<div class="px-2 w-1/6">
                <div :style="`height: ${data}px`" class="transition ease-in duration-200 bg-blue-600 hover:bg-blue-400 relative" @mouseenter="showTooltip($event); tooltipOpen = true" @mouseleave="hideTooltip($event)">
                  <div x-text="data" class="text-center absolute top-0 left-0 right-0 -mt-6 text-gray-800 text-sm"></div>
                </div>
              </div>

</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>

<script>
    function app() {
      return {
        chartData: [112, 10, 225, 134, 101, 80, 50, 100, 200],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
        tooltipContent: '',
        tooltipOpen: false,
        tooltipX: 0,
        tooltipY: 0,
        showTooltip(e) {
          console.log(e);
          this.tooltipContent = e.target.textContent
          this.tooltipX = e.target.offsetLeft - e.target.clientWidth;
          this.tooltipY = e.target.clientHeight + e.target.clientWidth;
        },
        hideTooltip(e) {
          this.tooltipContent = '';
          this.tooltipOpen = false;
          this.tooltipX = 0;
          this.tooltipY = 0;
        }
      }
    }
  </script>
</body>

Related Examples

Pie chart with chart.js and tailwind css

Author:
Kairi Greene

1 year ago

10.9k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

1 year ago

8.9k
Donunt chart with chart.js and tailwind css

Author:
Kairi Greene

1 year ago

9.7k
Line chart with chart.js and tailwind css

Author:
Kairi Greene

1 year ago

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

Author:
Samuel Dawson

1 year ago

9.8k
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Ari Mustofa

2 months ago

674
Simple Btn

Author:
Abid Ullah

2 months ago

387
Copy command section

Author:
Lukas Müller

1 year ago

9.8k
Table template

Author:
Oliver Hansen

1 year ago

13.1k
Hero Section
Home hero section search bar

Author:
Samuel Abera

8 months ago

4k
update user
it is the layout for creating an event

Author:
seth dridi

3 months ago

666
Appointment booking form

Author:
Leif99

1 year ago

14.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.8