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.4k

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

1 year ago

3.6k
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)

5 months ago

679
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

5 months ago

714
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

4 months ago

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

2 months ago

448
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 weeks ago

364
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

21 hours ago

8
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

9 months ago

1.5k
super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

995
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

4 months ago

682
Background image section

Author:
Marc

1 year ago

6.2k
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components