1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[2260],{1609:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>s,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>d});const a=JSON.parse('{"id":"widgets/charts/pie-chart-appi","title":"PieChartAppi","description":"An interactive pie chart widget for displaying data distributions with customizable styling and animations.","source":"@site/docs/widgets/charts/pie-chart-appi.md","sourceDirName":"widgets/charts","slug":"/widgets/charts/pie-chart-appi","permalink":"/docs/widgets/charts/pie-chart-appi","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"ButtonAppi","permalink":"/docs/widgets/button_appi"},"next":{"title":"LineChartAppi","permalink":"/docs/widgets/line_chart_appi"}}');var i=t(4848),l=t(8453);const r={},o="PieChartAppi",s={},d=[{value:"Overview",id:"overview",level:2},{value:"Features",id:"features",level:2},{value:"Basic Usage",id:"basic-usage",level:2},{value:"Properties",id:"properties",level:2},{value:"Data Model",id:"data-model",level:2},{value:"Examples",id:"examples",level:2},{value:"Basic Pie Chart",id:"basic-pie-chart",level:3},{value:"Revenue Distribution Chart",id:"revenue-distribution-chart",level:3},{value:"Custom Styled Chart",id:"custom-styled-chart",level:3},{value:"Donut Chart Style",id:"donut-chart-style",level:3},{value:"Interactive Features",id:"interactive-features",level:2},{value:"Tap Interactions",id:"tap-interactions",level:3},{value:"Animated Loading",id:"animated-loading",level:3},{value:"Legend Customization",id:"legend-customization",level:2},{value:"Custom Legend Position",id:"custom-legend-position",level:3},{value:"No Legend",id:"no-legend",level:3},{value:"Responsive Design",id:"responsive-design",level:2},{value:"Adaptive Size",id:"adaptive-size",level:3}
1,{value:"Mobile Optimized",id:"mobile-optimized",level:3},{value:"Theming",id:"theming",level:2},{value:"Custom Colors",id:"custom-colors",level:3},{value:"Dark Theme",id:"dark-theme",level:3},{value:"Advanced Examples",id:"advanced-examples",level:2},{value:"Multi-Level Pie Chart",id:"multi-level-pie-chart",level:3},{value:"Dashboard Integration",id:"dashboard-integration",level:3},{value:"Best Practices",id:"best-practices",level:2},{value:"1. Use Meaningful Colors",id:"1-use-meaningful-colors",level:3},{value:"2. Limit Data Points",id:"2-limit-data-points",level:3},{value:"3. Provide Context",id:"3-provide-context",level:3},{value:"4. Handle Empty Data",id:"4-handle-empty-data",level:3},{value:"Common Use Cases",id:"common-use-cases",level:2},{value:"1. Analytics Dashboard",id:"1-analytics-dashboard",level:3},{value:"2. Budget Allocation",id:"2-budget-allocation",level:3},{value:"3. Survey Results",id:"3-survey-results",level:3},{value:"Related Components",id:"related-components",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"piechartappi",children:"PieChartAppi"})}),"\n",(0,i.jsx)(n.p,{children:"An interactive pie chart widget for displaying data distributions with customizable styling and animations."}),"\n",(0,i.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"PieChartAppi"})," is a powerful data visualization component that creates beautiful, interactive pie charts. It supports custom colors, animations, legends, and touch interactions, making it perfect for dashboards, analytics, and data presentation."]}),"\n",(0,i.jsx)(n.h2,{id:"features",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\ud83d\udcca ",(0,i.jsx)(n.strong,{children:"Interactive"})," - Touch and hover interactions"]}),"\n",(0,i.jsxs)(n.li,{children:["\ud83c\udfa8 ",(0,i.jsx)(n.strong,{children:"Customizable"})," - Colors, styles, and themes"]}),"\n",(0,i.jsxs)(n.li,{children:["\ud83d\udcf1 ",(0,i.jsx)(n.strong,{children:"Responsive"})," - Adapts to different screen sizes"]}),"\n",(0,i.jsxs)(n.li,{children:["\ud83c\udfac ",(0,i.jsx)(n.strong,{children:"Animated"})," - Smooth transitions and loading animations"]}),"\n",(0,i.jsxs)(n.li,{children:["\ud83d\udccb ",(0,i.jsx)(n.strong,{children:"Legend Support"})," - Automatic legend generation"]}),"\n",(0,i.jsxs)(n.li,{children:["\u267f ",(0,i.jsx)(n.strong,{children:"Accessible"})," - Screen reader support"]}),"\n",(0,i.jsxs)(n.li,{children:["\ud83c\udf19 ",(0,i.jsx)(n.strong,{children:"Theme Ready"})," - Light and dark mode support"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"basic-usage",children:"Basic Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"PieChartAppi(\n data: [\n PieChartData(label: 'Mobile', value: 45, color: Colors.blue),\n PieChartData(label: 'Desktop', value: 30, color: Colors.green),\n PieChartData(label: 'Tablet', value: 25, color: Colors.orange),\n ],\n title: 'Device Usage',\n)\n"})}),"\n",(0,i.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Property"}),(0,i.jsx)(n.th,{children:"Type"}),(0,i.jsx)(n.th,{children:"Default"}),(0,i.jsx)(n.th,{children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"data"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"List<PieChartData>"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.strong,{children:"required"})}),(0,i.jsx)(n.td,{children:"Chart data points"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"title"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String?"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"null"})}),(0,i.jsx)(n.td,{children:"Chart title"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"width"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"double?"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"null"})}),(0,i.jsx)(n.td,{children:"Chart width"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"height"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"double?"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"null"})}),(0,i.jsx)(n.td,{children:"Chart height"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showLegend"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"bool"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"true"})}),(0,i.jsx)(n.td,{children:"Show/hide legend"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"legendPosition"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"LegendPosition"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"LegendPosition.right"})}),(0,i.jsx)(n.td,{children:"Legend position"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"animationDuration"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Duration"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Duration(milliseconds: 1000)"})}),(0,i.jsx)(n.td,{children:"Animation duration"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"strokeWidth"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"double"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"2.0"})}),(0,i.jsx)(n.td,{children:"Stroke width"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"showPercentage"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"bool"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"true"})}),(0,i.jsx)(n.td,{children:"Show percentage labels"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"centerText"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"String?"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"null"})}),(0,i.jsx)(n.td,{children:"Text in center of chart"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"onTap"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"Function(PieChartData)?"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"null"})}),(0,i.jsx)(n.td,{children:"Tap callback"})]})]})]}),"\n",(0,i.jsx)(n.h2,{id:"data-model",children:"Data Model"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"class PieChartData {\n final Str
1ing label;\n final double value;\n final Color color;\n final String? description;\n\n const PieChartData({\n required this.label,\n required this.value,\n required this.color,\n this.description,\n });\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,i.jsx)(n.h3,{id:"basic-pie-chart",children:"Basic Pie Chart"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"PieChartAppi(\n data: [\n PieChartData(\n label: 'Sales',\n value: 60,\n color: Colors.blue,\n ),\n PieChartData(\n label: 'Marketing',\n value: 25,\n color: Colors.green,\n ),\n PieChartData(\n label: 'Support',\n value: 15,\n color: Colors.orange,\n ),\n ],\n title: 'Department Budget',\n width: 300,\n height: 300,\n)\n"})}),"\n",(0,i.jsx)(n.h3,{id:"revenue-distribution-chart",children:"Revenue Distribution Chart"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"PieChartAppi(\n data: [\n PieChartData(\n label: 'Product Sales',\n value: 450000,\n color: Colors.blue[600]!,\n description: 'Revenue from product sales',\n ),\n PieChartData(\n label: 'Services',\n value: 280000,\n color: Colors.green[600]!,\n description: 'Revenue from services',\n ),\n PieChartData(\n label: 'Subscriptions',\n value: 320000,\n color: Colors.purple[600]!,\n description: 'Revenue from subscriptions',\n ),\n PieChartData(\n label: 'Other',\n value: 150000,\n color: Colors.orange[600]!,\n description: 'Other revenue sources',\n ),\n ],\n title: 'Revenue Distribution 2024',\n centerText: '\\$1.2M\\nTotal',\n showPercentage: true,\n onTap: (data) {\
1n print('Tapped: ${data.label} - ${data.value}');\n },\n)\n"})}),"\n",(0,i.jsx)(n.h3,{id:"custom-styled-chart",children:"Custom Styled Chart"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"PieChartAppi(\n data: [\n PieChartData(label: 'Completed', value: 75, color: Colors.green),\n PieChartData(label: 'In Progress', value: 20, color: Colors.blue),\n PieChartData(label: 'Pending', value: 5, color: Colors.red),\n ],\n title: 'Project Status',\n width: 250,\n height: 250,\n strokeWidth: 4,\n animationDuration: Duration(milliseconds: 1500),\n legendPosition: LegendPosition.bottom,\n showPercentage: true,\n)\n"})}),"\n",(0,i.jsx)(n.h3,{id:"donut-chart-style",children:"Donut Chart Style"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"PieChartAppi(\n data: [\n PieChartData(label: 'iOS', value: 40, color: Colors.blue),\n PieChartData(label: 'Android', value: 45, color: Colors.green),\n PieChartData(label: 'Web', value: 15, color: Colors.orange),\n ],\n title: 'Platform Usage',\n centerText: '100%\\nCoverage',\n strokeWidth: 0, // Creates donut effect\n innerRadius: 60, // Custom property for donut\n)\n"})}),"\n",(0,i.jsx)(n.h2,{id:"interactive-features",children:"Interactive Features"}),"\n",(0,i.jsx)(n.h3,{id:"tap-interactions",children:"Tap Interactions"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"class InteractivePieChart extends StatefulWidget {\n @override\n _InteractivePieChartState createState() => _InteractivePieChartState();\n}\n\nclass _InteractivePieChartState extends State<InteractivePieChart> {\n PieChartData? selectedSegment;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n PieChartAppi(\n data: [\n PieChartData(label: 'Q1', value: 25, color: Colors.blue),\n PieChartData(label: 'Q2', value: 30, color: Colors.green),\n PieChartData(label: 'Q3', value: 28, color: Colors.orange),\n PieChartData(label: 'Q4', value: 35, color: Colors.purple),\n ],\n title: 'Quarterly Sales',\n onTap: (data) {\
1n setState(() {\n selectedSegment = data;\n });\n },\n ),\n if (selectedSegment != null)\n Container(\n margin: EdgeInsets.only(top: 16),\n padding: EdgeInsets.all(16),\n decoration: BoxDecoration(\n color: selectedSegment!.color.withOpacity(0.1),\n borderRadius: BorderRadius.circular(8),\n ),\n child: Text(\n 'Selected: ${selectedSegment!.label} - ${selectedSegment!.value}%',\n style: TextStyle(\n fontWeight: FontWeight.bold,\n color: selectedSegment!.color,\n ),\n ),\n ),\n ],\n );\n }\n}\n"})}),"\n",(0,i.jsx)(n.h3,{id:"animated-loading",children:"Animated Loading"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"class AnimatedPieChart extends StatefulWidget {\n @override\n _AnimatedPieChartState createState() => _AnimatedPieChartState();\n}\n\nclass _AnimatedPieChartState extends State<AnimatedPieChart>\n with SingleTickerProviderStateMixin {\n late AnimationController _controller;\n late Animation<double> _animation;\n\n @override\n void initState() {\n super.initState();\n _controller = AnimationController(\n duration: Duration(seconds: 2),\n vsync: this,\n );\n _animation = Tween<double>(begin: 0, end: 1).animate(\n CurvedAnimation(parent: _controller, curve: Curves.easeInOut),\n );\n _controller.forward();\n }\n\n @override\n void dispose() {\n _controller.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return AnimatedBuilder(\n animation: _animation,\n builder: (context, child) {\n return PieChartAppi(\n data: [\n PieChartData(\n label: 'Complete',\n value: 70 * _animation.value,\n color: Colors.green,\n ),\n PieChartData(\n label: 'Remaining',\n value: 30 * _animation.value,\n color: Colors.grey[300]!,\n ),\n ],\n title: 'Progress',\n centerText: '${(70 * _animation.value).toInt()}%',\n );\n },\n );\n }\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"legend-customization",children:"Legend Customization"}),"\n",(0,i.jsx)(n.h3,{id:"custom-legend-position",children:"Custom Legend Position"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"PieChartAppi(\n data: chartData,\n title: 'Sales by Region',\n legendPosition: LegendPosition.bottom,\n legendStyle: LegendStyle(\n textStyle: TextStyle(\n fontSize: 14,\n fontWeight: FontWeight.w500,\n ),\n spacing: 8,\n itemSpacing: 16,\n ),\n)\n"})}),"\n",(0,i.jsx)(n.h3,{id:"no-legend",children:"No Legend"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"PieChartAppi(\n data: chartData,\n title: 'Simple Chart',\n showLegend: false,\n showPercentage: true,\n)\n"})}),"\n",(0,i.jsx)(n.h2,{id:"responsive-design",children:"Responsive Design"}),"\n",(0,i.jsx)(n.h3,{id:"adaptive-size",children:"Adaptive Size"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"LayoutBuilder(\n builder: (context, constraints) {\n final size = constraints.maxWidth > 600 ? 400.0 : 300.0;\n return PieChartAppi(\n data: chartData,\n width: size,\n height: size,\n title: 'Responsive Chart',\n );\n },\n)\n"})}),"\n",(0,i.jsx)(n.h3,{id:"mobile-optimized",children:"Mobile Optimized"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"class ResponsivePieChart extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n final isMobile = MediaQuery.of(context).size.width < 600;\n \n return PieChartAppi(\n data: chartData,\n width: isMobile ? 250 : 350,\n height: isMobile ? 250 : 350,\n legendPosition: isMobile \n ? LegendPosition.bottom \n : LegendPosition.right,\n showPercentage: !isMobile,\n );\n }\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"theming",children:"Theming"}),"\n",(0,i.jsx)(n.h3,{id:"custom-colors",children:"Custom Colors"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"final customColors = [\n Color(0xFF6366F1), // Indigo\n Color(0xFF8B5CF6), // Violet\n Color(0xFF06B6D4), // Cyan\n Color(0xFF10B981), // Emerald\n Color(0xFFF59E0B), // Amber\n Color(0xFFEF4444), // Red\n];\n\nPieChartAppi(\n data: List.generate(6, (index) => PieChartData(\n label: 'Category ${index + 1}',\n value: (index + 1) * 10.0,\n color: customColors[index],\n )),\n title: 'Custom Colors',\n)\n"})}),"\n",(0,i.jsx)(n.h3,{id:"dark-theme",children:"Dark Theme"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"PieChartAppi(\n data: chartData,\n title: 'Dark Theme Chart',\n backgroundColor: Theme.of(context).brightness == Brightness.dark\n ? Colors.grey[900]\n : Colors.white,\n titleStyle: TextStyle(\n color: Theme.of(context).textTheme.titleLarge?.color,\n fontSize: 18,\n fontWeight: FontWeight.bold,\n ),\n)\n"})}),"\n",(0,i.jsx)(n.h2,{id:"advanced-examples",children:"Advanced Examples"}),"\n",(0,i.jsx)(n.h3,{id:"multi-level-pie-chart",children:"Multi-Level Pie Chart"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"class MultiLevelPieChart extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Stack(\n alignment: Alignment.center,\n children: [\n // Outer ring\n PieChartAppi(\n data: [\n PieChartData(label: 'Desktop', value: 60, color: Colors.blue),\n PieChartData(label: 'Mobile', value: 40, color: Colors.green),\n ],\n width: 300,\n height: 300,\n showLegend: false,\n strokeWidth: 40,\n ),\n // Inner ring\n PieChartAppi(\n data: [\n PieChartData(label: 'Chrome', value: 35, color: Colors.blue[300]!),\n PieChartData(label: 'Firefox', value: 25, color: Colors.blue[700]!),\n PieChartData(label: 'Safari', value: 25, color: Colors.green[300]!),\n PieChartData(label: 'Other', value: 15, color: Colors.green[700]!),\n ],\n width: 200,\n height: 200,\n showLegend: false,\n strokeWidth: 30,\n ),\n ],\n );\n }\n}\n"})}),"\n",(0,i.jsx)(n.h3,{id:"dashboard-integration",children:"Dashboard Integration"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"class DashboardChart extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Card(\n elevation: 4,\n child: Padding(\n padding: EdgeInsets.all(16),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.
1start,\n children: [\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n children: [\n Text(\n 'Revenue Breakdown',\n style: Theme.of(context).textTheme.titleLarge,\n ),\n IconButton(\n icon: Icon(Icons.more_vert),\n onPressed: () => showChartOptions(),\n ),\n ],\n ),\n SizedBox(height: 16),\n PieChartAppi(\n data: [\n PieChartData(\n label: 'Products',\n value: 450000,\n color: Colors.blue,\n ),\n PieChartData(\n label: 'Services',\n value: 320000,\n color: Colors.green,\n ),\n PieChartData(\n label: 'Licenses',\n value: 180000,\n color: Colors.orange,\n ),\n ],\n height: 250,\n centerText: '\\$950K\\nTotal',\n onTap: (data) => showDetailView(data),\n ),\n ],\n ),\n ),\n );\n }\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,i.jsx)(n.h3,{id:"1-use-meaningful-colors",children:"1. Use Meaningful Colors"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"// Good: Semantic colors\nPieChartData(label: 'Success', value: 80, color: Colors.green),\nPieChartData(label: 'Warning', value: 15, color: Colors.orange),\nPieChartData(label: 'Error', value: 5, color: Colors.red),\n"})}),"\n",(0,i.jsx)(n.h3,{id:"2-limit-data-points",children:"2. Limit Data Points"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"// Good: 5-7 segments maximum for readability\nfinal data = chartData.take(6).toList();\nif (chartData.length > 6) {\n final otherValue = chartData.skip(6).fold(0.0, (sum, item) => sum + item.value);\n data.add(PieChartData(label: 'Other', value: otherValue, color: Colors.grey));\n}\n"})}),"\n",(0,i.jsx)(n.h3,{id:"3-provide-context",children:"3. Provide Context"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"// Good: Clear title and descriptions\nPieChartAppi(\n data: data,\n title: 'Q4 2024 Sales Distribution',\n centerText: 'Total\\n\\$2.4M',\n)\n"})}),"\n",(0,i.jsx)(n.h3,{id:"4-handle-empty-data",children:"4. Handle Empty Data"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"Widget buildChart() {\n if (data.isEmpty) {\n return Container(\n height: 300,\n child: Center(\n child: Text('No data available'),\n ),\n );\n }\n \n return PieChartAppi(data: data);\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"common-use-cases",children:"Common Use Cases"}),"\n",(0,i.jsx)(n.h3,{id:"1-analytics-dashboard",children:"1. Analytics Dashboard"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"PieChartAppi(\n data: [\n PieChartData(label: 'Organic', value: 45, color: Colors.green),\n PieChartData(label: 'Paid', value: 30, color: Colors.blue),\n PieChartData(label: 'Social', value: 15, color: Colors.purple),\n PieChartData(label: 'Direct', value: 10, color: Colors.orange),\n ],\n title: 'Traffic Sources',\n)\n"})}),"\n",(0,i.jsx)(n.h3,{id:"2-budget-allocation",children:"2. Budget Allocation"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"PieChartAppi(\n data: [\n PieChartData(label: 'Development', value: 40, color: Colors.blue),\n PieChartData(label: 'Marketing', value: 25, color: Colors.green),\n PieChartData(label: 'Operations', value: 20, color: Colors.orange),\n PieChartData(label: 'Research', value: 15, color: Colors.purple),\n ],\n title: 'Budget Allocation',\n centerText: '\\$500K\\nTotal',\n)\n"})}),"\n",(0,i.jsx)(n.h3,{id:"3-survey-results",children:"3. Survey Results"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-dart",children:"PieChartAppi(\n data: [\n PieChartData(label: 'Very Satisfied', value: 35, color: Colors.green[600]!),\n PieChartData(label: 'Satisfied', value: 40, color: Colors.green[300]!),\n PieChartData(label: 'Neutral', value: 15, color: Colors.grey),\n PieChartData(label: 'Dissatisfied', value: 10, color: Colors.red),\n ],\n title: 'Customer Satisfaction',\n
1)\n"})}),"\n",(0,i.jsx)(n.h2,{id:"related-components",children:"Related Components"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"/docs/widgets/line_chart_appi",children:"LineChartAppi"})," - For trend visualization"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"/docs/widgets/horizondal_bar_chart_appi",children:"HorizontalBarChartAppi"})," - For comparison data"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"/docs/widgets/table_appi",children:"TableAppi"})," - For detailed data tables"]}),"\n"]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.p,{children:["Ready to visualize trends? Check out ",(0,i.jsx)(n.a,{href:"/docs/widgets/line_chart_appi",children:"LineChartAppi"})," for time-series data!"]})]})}function h(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>o});var a=t(6540);const i={},l=a.createContext(i);function r(e){const n=a.useContext(l);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),a.createElement(l.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.