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

11k

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

12.5k
Bar Chart with TailwindCSS and AlpineJS

Author:
Akshay

2 years ago

12.5k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

10.5k
Line chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

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

Author:
Samuel Dawson

2 years ago

10.8k
Best chat prompt

Author:
ORGIN_DREAMS

1 month ago

158
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

4 months ago

876
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

5 months ago

1.5k
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.4k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
M Junaid

2 weeks ago

117
Simple hero example

Author:
Task Master

2 years ago

10.5k
Login form with social login buttons

Author:
Task Master

2 years ago

18.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components