skills.rest
mylesfranklin
mylesfranklinCOMMUNITY
Explore all skills by this author →
Website𝕏@myles_franklinGitHub

daisyui-pie-charts

Generate ApexCharts pie and donut chart components styled with daisyUI theme tokens.

Updated Jun 22, 2026
Search Tags:#data visualization#dashboard#tailwind#daisyui#apexcharts#pie chart#donut chart
One-click install
npx skills add https://github.com/mylesfranklin/swayzio-admin-dashboard --skill daisyui-pie-charts-mylesfranklin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: daisyui-pie-charts
Source: https://github.com/mylesfranklin/swayzio-admin-dashboard/tree/main/skills/daisyui-charts/pie-charts
Command: npx skills add https://github.com/mylesfranklin/swayzio-admin-dashboard --skill daisyui-pie-charts-mylesfranklin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires apexcharts.

What problem does it solve? Building revenue-distribution pie and donut charts that match a daisyUI/Tailwind design system requires manually wiring ApexCharts options, theme CSS variables, custom tooltips, and responsive card layouts, which is repetitive and error-prone. ## Core Features & Use Cases - Seven Prebuilt Chart Variants: Four full pie charts and three compact donut charts covering layouts with filter tabs, dropdowns, top legends, metric cards, radio period selectors, and export buttons. - Theme-Integrated Styling: All slices, strokes, tooltips, and wrappers use daisyUI CSS variables like var(--color-base-content) with opacity-based color-mix levels for consistent theming. - Complete Implementation Snippets: Each variant ships with ApexCharts chart options, wrapper classes, and copy-ready HTML card markup. - Use Case: A founder building a subscription analytics dashboard can pick the donut chart with a bottom legend table to show Basic, Premium, and Enterprise plan revenue distribution with per-plan values and percentages. ## Quick Start Ask the AI to build a 3-plan revenue distribution donut chart with a bottom legend table using the daisyUI pie charts skill.

Frequently Asked Questions about daisyui-pie-charts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a pie chart with ApexCharts and daisyUI?▼

Set the ApexCharts chart type to pie, define series values and labels, and map the colors array to daisyUI CSS variables like var(--color-base-content). Wrap the chart div in a daisyUI card with bg-base-200/80 and rounded-box classes for theme-consistent styling.

How to style ApexCharts tooltips with Tailwind and daisyUI?▼

Use the tooltip custom function to return an HTML string with daisyUI classes such as bg-base-100, border-base-content/10, shadow-xl, and rounded-box. Include a colored indicator dot using the slice color from w.globals.colors for visual consistency.

What is the difference between pie and donut chart types in ApexCharts?▼

The donut type renders a pie chart with a hollow center, configured by setting chart type to donut instead of pie. Both accept the same series, labels, colors, and plotOptions, so switching between them requires changing only the type field.

Can I use daisyUI theme colors in ApexCharts slice colors?▼

Yes, pass CSS variables like var(--color-base-content) directly in the ApexCharts colors array. Opacity variants are created with color-mix or Tailwind opacity modifiers such as bg-base-content/50 for matching legend dots.

Why are my ApexCharts data labels not showing on pie slices?▼

Data labels are disabled when dataLabels.enabled is set to false, which is the default in most of these variants. Set enabled to true and define style colors such as var(--color-base-100) so percentage values render visibly on dark slices.

Related Skills

Explore More Design & Creative Skills→
dudedesi12dudedesi12

stripe-saas

Integrate Stripe payments, subscriptions, webhooks, and customer portals into SaaS applications.

Community
Advanced
8GG-Git8GG-Git

interactive-dashboard-builder

Generate self-contained HTML dashboards with Chart.js and dropdown filters.

Community
Intermediate
Akhil-Naik-9Akhil-Naik-9
1

charts

Create Recharts bar, line, area, and pie charts with responsive containers and theming.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-ux-chart-render

Detect chart containers with axes or legends but no data marks.

Community
Advanced