Home
Kairi Greene
Donunt chart with chart.js and tailwind css

Donunt chart with chart.js and tailwind css

This tailwind example is contributed by Kairi Greene, on 19-Jan-2023. Component is made with Tailwind CSS v3. similar terms for this example is Graph

Chart

Author Kairi Greene

12.2k

Fork Fullscreen

// Set the chart data
    var data = {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'My First Dataset',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                '#EF4444',
                '#3B82F6',
                '#FBBF24',
                '#10B981',
                '#A78BFA',
                '#F59E0B'
            ],
            hoverOffset: 4
        }]
    };

// Set the chart options
    var options = {
        plugins: {
            legend: {
                display: false
            }
        },
        aspectRatio: 1,
        cutout: '50%',
        animation: {
            animateRotate: false
        }
    };

// Create the chart
    var chart = new Chart(canvas, {
        type: 'doughnut',
        data: data,
        options: options
    });
</script>

Related Examples

Pie chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

13.3k
Bar Chart with TailwindCSS and AlpineJS

Author:
Akshay

3 years ago

13.5k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

3 years ago

11.1k
Line chart with chart.js and tailwind css

Author:
Kairi Greene

3 years ago

12.1k
Daily growth chart
chart for showing data each day of the week

Author:
Samuel Dawson

3 years ago

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

6 months ago

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

Author:
Ayyamperumal S

1 week ago

223
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Author:
Abhiraj

1 year ago

3.1k
Best chat prompt

Author:
ORGIN_DREAMS

9 months ago

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

Author:
SHARIFUL ISLAM

1 year ago

1.6k
Modern Editorial News & Events Section
Overview: A sophisticated, responsive layout designed to highlight a primary featured story alongside a vertical list of recent updates or upcoming activities. It features a clean "magazine-style" aesthetic, utilizing serif typography for headings to create an elegant, high-end feel suitable for professional services or educational institutions. Key Features: Split Grid Layout: Uses a 12-column grid system (lg:col-span-7 vs lg:col-span-5) to balance the large featured content with the side list. Featured Card (Left): Image Zoom: subtle scale-105 transformation on the main image when hovering over the container. Backdrop Badge: A frosted glass effect category badge over the image. Interactive List (Right): Smart Date Boxes: The date indicators act as design elements that invert colors (e.g., yellow background to yellow text) on hover. Micro-interactions: List items "lift" slightly (-translate-y-1) upon interaction. Typography: Integrates Google Fonts (DM Serif Display) for headings to break the monotony of standard sans-serif fonts and add character. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons (Script included). Fonts: Google Fonts (DM Serif Display + Inter). Usage: Ideal for "Latest News," "Upcoming Seminars," or "Blog Highlights" sections on a landing page. Ensure the Google Fonts link is included in the <head> for the correct visual style.

Author:
Juan D. Cortorreal

3 months ago

272
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Author:
Prashant

3 years ago

15.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components