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

10.6k

10

Fork Fullscreen

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="w-64 h-64">
    <canvas id="donut-chart"></canvas>
</div>

<script>
    // Get the canvas element
    var canvas = document.getElementById('donut-chart');

// 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

11.9k
Bar Chart with TailwindCSS and AlpineJS

Author:
Akshay

2 years ago

12k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

10k
Line chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

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

Author:
Samuel Dawson

2 years ago

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

3 months ago

860
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 month ago

442
Feature Overview Section with Dark Mode Support
Feature cards with icon

Author:
Nomusa Botha

4 months ago

839
Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

1 month ago

321
Spinners with shadow

Author:
Samuel Dawson

2 years ago

7.8k
Modern CTA section
CTA banner

Author:
Pixel Perfect

9 months ago

1.5k
Organization Hierarchy list

Author:
Anonymous

1 year ago

7.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1