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

9.7k

9

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

1 year ago

10.8k
Bar Chart with TailwindCSS and AlpineJS

Author:
Akshay

2 years ago

11k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

1 year ago

8.9k
Line chart with chart.js and tailwind css

Author:
Kairi Greene

1 year ago

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

Author:
Samuel Dawson

1 year ago

9.7k
Newsletter form with SVG gradient background

Author:
Erik Hyatt

1 year ago

10.3k
Clean hero section
Hero template with buttons

Author:
Laurits

1 year ago

12.6k
Small Footer

Author:
Abhijit Sen

1 year ago

9.9k
Glassmorphism form

Author:
Geoffrey Callaghan

1 year ago

5.4k
Basic footer
Basic footer with subscribe to the newsletter section

Author:
Mr Robot

1 year ago

8.1k
Tag links component

Author:
Arya

1 year ago

7.8k
Login Form Component
The "Login Form Component" is a visually appealing and user-friendly interface designed for user authentication. It features a clean and well-structured layout with fields for entering the email address and password.

Author:
R Thapa

1 year ago

6.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.8