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

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.9k
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)

7 months ago

839
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

7 months ago

865
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

7 months ago

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

4 months ago

716
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

2 months ago

504
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

Author:
gidy

2 months ago

164
htmlcss1

Author:
Anonymous

7 months ago

329
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

9 months ago

1.1k
Collapsible content

Author:
Rafferty Kim

2 years ago

13.8k
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.2k
Simple Payment Successfull Notification Page

Author:
Anonymous

8 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components