Home
SHARIFUL ISLAM
Interactive Order Report Chart with TailwindCSS and Chart.js

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.

This tailwind example is contributed by SHARIFUL ISLAM, on 13-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Graph,Admin Dashboard, User dashboard

Chart Other Dashboard

Author SHARIFUL ISLAM

426

Fork Fullscreen

<head>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <div class="bg-white p-6 rounded-2xl shadow-lg max-w-4xl w-full">
    <div class="flex justify-between items-center mb-4">
      <h1 class="text-xl font-semibold text-gray-800">Order Report</h1>
      <div class="flex items-center space-x-2">
        <span class="text-sm text-gray-600">12, Mar 24 - 31, Mar 24</span>
        <button class="bg-blue-500 text-white px-2 py-1 rounded-lg hover:bg-blue-600">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 9.5L12 14l-4.5-4.5" />
          </svg>
        </button>
      </div>
    </div>
    <canvas id="orderReportChart" class="w-full h-80"></canvas>
  </div>

// Data for the chart
    const data = {
      labels: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      datasets: [
        {
          label: 'Delivered',
          data: [800, 500, 1000, 1100, 950, 700, 600],
          type: 'bar',
          backgroundColor: '#22c55e',
          borderWidth: 0,
          borderRadius: 5,
        },
        {
          label: 'Shipping',
          data: [400, 600, 800, 850, 900, 700, 500],
          type: 'line',
          borderColor: '#3b82f6',
          borderWidth: 2,
          tension: 0.4,
          fill: true,
          backgroundColor: 'rgba(59, 130, 246, 0.1)',
        },
        {
          label: 'Cancelled',
          data: [100, 200, 300, 400, 350, 300, 200],
          type: 'line',
          borderColor: '#f43f5e',
          borderWidth: 2,
          pointBackgroundColor: '#f43f5e',
          tension: 0.4,
        },
        {
          label: 'Returned',
          data: [50, 100, 80, 150, 100, 50, 75],
          type: 'line',
          borderColor: '#f97316',
          borderWidth: 2,
          pointBackgroundColor: '#f97316',
          tension: 0.4,
        },
      ],
    };

const config = {
      type: 'bar',
      data,
      options: {
        responsive: true,
        plugins: {
          legend: {
            display: true,
            position: 'top',
          },
        },
        scales: {
          x: {
            grid: { display: false },
          },
          y: {
            beginAtZero: true,
            grid: { drawBorder: false },
          },
        },
      },
    };
     new Chart(ctx, config);

</script>

Related Examples

Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

4 months ago

1.9k
nft card
nft card

Author:
5upreme505

5 months ago

985
cards
cards with background animation

Author:
Anonymous

1 year ago

10.2k
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

6 days ago

29
Donunt chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

10.5k
Why Choose Us - Our Core Strengths
Discover what sets us apart with this engaging "Why Choose Us" section. Highlighting three key pillars—passion, honesty, and continuous improvement—this component features a bold, centered headline with a striking blue accent

Author:
Vikas Kushwah

1 week ago

12
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

10.7k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

37.6k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

8.8k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

1 month ago

593
Moving Background Animation

Author:
Samuel Abera

2 months ago

1.1k
Organization Hierarchy list

Author:
Anonymous

1 year ago

7.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components