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

1.1k

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

9 months ago

3.2k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

410
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Author:
Nicole Shalom

2 months ago

393
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

1 month ago

575
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

14.9k
Privacy policy page template

Author:
Sameer Sultana

2 years ago

17.8k
responsive home page
the best home page

Author:
irahoza daniel

2 months ago

484
Payment success page example

Author:
Anonymous

2 months ago

363
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

1 month ago

412
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.3k
Aurora Spinner
Aurora Spinner using tailwindcss

Author:
Deepak Kumar Chouhan

7 months ago

1.1k
pricing
pricing

Author:
Omer fils ELENGA

1 month ago

183

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components