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

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

5 months ago

787
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

2.9k
Best chat prompt

Author:
ORGIN_DREAMS

8 months ago

555
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
Text gradient
very subtle gradients for beautiful headings

Author:
Mr Robot

3 years ago

12.1k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.5k
Select input

Author:
Sophia Baker

3 years ago

14.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components