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 v3.4. It is responsive. similar terms for this example are Graph,Admin Dashboard, User dashboard

Chart Other Dashboard

Author SHARIFUL ISLAM

Tailwind v3.4 2.5k 3

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

Ameth Galarcio

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Nicole Shalom

1 year ago

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

Lekhraj Ghimire

1 year ago

2.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.

CodewithFaraz

1 year ago

1.4k
Card KPI
Targetas ahora con un grafico

Raul antonio de la cruz hernandez

11 months ago

1.2k
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Alif Bima Pradana

8 months ago

1.3k
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Alif Bima Pradana

8 months ago

968
Taskify Premium Task Management FREE
Website Task management modern and responsif

Alif Bima Pradana

8 months ago

833
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

7 months ago

1.1k
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Ijila Itunu

7 months ago

972
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

7 months ago

529