Development Education Graphics & Pictures Internet Utilities

xsukax Pie Chart Maker

xsukax

xsukax Pie Chart Maker

A professional, user-friendly web application for creating beautiful pie charts without writing any code. Built with modern web technologies and designed with privacy and security as core principles.

Github Repo: https://github.com/xsukax/xsukax-Pie-Chart-Maker

Demo: https://xsukax.github.io/xsukax-Pie-Chart-Maker

License: GPL v3 GitHub xsukax Pie Chart Maker

📊 Project Overview

xsukax Pie Chart Maker is a client-side web application that empowers users to create, customize, and export professional pie charts through an intuitive visual interface. Unlike traditional chart creation tools that require coding knowledge or complex software installations, this application provides a streamlined, accessible solution for anyone needing to visualize data proportions quickly and effectively.

The application leverages Mermaid.js for chart rendering and Bootstrap for a responsive, modern user interface, all contained within a single HTML file that runs entirely in your browser. This architecture ensures maximum portability, ease of deployment, and complete user privacy.

Core Capabilities

  • Visual Chart Builder: Create pie charts using intuitive form controls—no coding required
  • Real-Time Preview: See your chart update instantly as you make changes
  • Custom Color Selection: Choose exact colors for each slice using visual color pickers
  • Multiple Export Formats: Save charts as high-resolution PNG (with transparent backgrounds), SVG, or Markdown files
  • Responsive Design: Works seamlessly across desktop, tablet, and mobile devices
  • Zero Installation: Runs directly in any modern web browser

🔒 Security and Privacy Benefits

The xsukax Pie Chart Maker implements a privacy-first, security-by-design architecture that ensures complete user data protection:

Client-Side Processing

All chart creation, rendering, and export operations occur entirely within your web browser. No data is ever transmitted to external servers, eliminating risks associated with data interception, server breaches, or unauthorized access.

No Data Collection

The application does not collect, store, or transmit any user data, analytics, or telemetry. Your chart designs, titles, values, and customizations remain exclusively on your local device.

No Authentication Required

There are no user accounts, logins, or registration processes that could expose personal information or create security vulnerabilities through credential theft or session hijacking.

Transparent Single-File Architecture

The entire application exists in one HTML file (index.html) with inline JavaScript and CSS. This transparency allows security-conscious users to audit the complete codebase easily, verifying that no malicious code or tracking mechanisms are present.

Offline Capability

Once the page is loaded, the application functions fully offline (except for initial CDN resource loading). This eliminates dependency on external services and protects against network-based attacks or service disruptions.

Content Security

  • External resources (Bootstrap, Mermaid.js, Bootstrap Icons) are loaded from reputable CDNs
  • No third-party analytics or tracking scripts
  • No cookies or local storage usage that could track user behavior
  • No form submissions to external endpoints

Export Security

Exported files (PNG, SVG, MD) are generated locally using browser APIs and contain only the chart data you explicitly created—no metadata, tracking information, or hidden data is embedded.

✨ Features and Advantages

Key Features

  1. Intuitive Visual Interface

    • Clean, modern design with gradient aesthetics
    • Drag-free color selection with native color pickers
    • Real-time input validation and feedback
    • Responsive layout optimized for all screen sizes

  2. Flexible Chart Customization

    • Custom chart titles
    • Unlimited slice additions (practical limit based on readability)
    • Individual label editing for each slice
    • Precise numeric value input (supports decimals)
    • Per-slice color customization with visual color pickers
    • Automatic legend generation with matching colors

  3. Professional Export Options

    • PNG Export: High-resolution (3× scale) with transparent backgrounds for professional presentations
    • SVG Export: Vector format for infinite scalability without quality loss
    • Markdown Export: Includes Mermaid syntax with color preservation for GitHub, Notion, and other Markdown-compatible platforms

  4. User Experience Excellence

    • Toast notifications for user feedback (no intrusive alerts)
    • Loading indicators during chart rendering
    • Hover effects and smooth transitions
    • Minimum slice requirements prevent invalid charts
    • Smart default values to get started quickly

Advantages Over Alternatives

Feature xsukax Pie Chart Maker Traditional Tools Online Services
Privacy ✅ Complete (client-side) ⚠️ Varies ❌ Data uploaded to servers
Installation ✅ None required ❌ Software installation ✅ None required
Cost ✅ Free, open-source ⚠️ Often paid ⚠️ Freemium models
Offline Use ✅ Yes (after initial load) ✅ Yes ❌ Requires internet
Code Required ✅ No ⚠️ Sometimes ✅ No
Customization ✅ Full color control ✅ Varies ⚠️ Limited in free tiers
Export Quality ✅ High-res, transparent PNG ✅ Varies ⚠️ Often watermarked
Open Source ✅ Yes (GPL v3) ❌ Usually proprietary ❌ Proprietary

🚀 Installation Instructions

Method 1: Direct Browser Use (Recommended)

  1. Download the Application

    wget https://raw.githubusercontent.com/xsukax/xsukax-Pie-Chart-Maker/main/index.html

    Or manually download index.html from the GitHub repository.

  2. Open in Browser

    • Double-click index.html to open it in your default browser, or
    • Right-click → Open With → Select your preferred browser
    • Supported browsers: Chrome, Firefox, Safari, Edge (latest versions)

Method 2: Clone Repository

# Clone the repository
git clone https://github.com/xsukax/xsukax-Pie-Chart-Maker.git

# Navigate to the directory
cd xsukax-Pie-Chart-Maker

# Open index.html in your browser
open index.html  # macOS
xdg-open index.html  # Linux
start index.html  # Windows

Method 3: Local Web Server (Optional)

For development or testing purposes:

# Using Python 3
python -m http.server 8000

# Using Node.js http-server
npx http-server -p 8000

# Access at http://localhost:8000

System Requirements

  • Operating System: Windows 7+, macOS 10.10+, Linux (any modern distribution)
  • Browser: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
  • Internet Connection: Required only for initial CDN resource loading (Bootstrap, Mermaid.js)
  • Disk Space: < 1 MB
  • Permissions: None required (runs in browser sandbox)

📖 Usage Guide

Step-by-Step Instructions

1. Creating Your First Chart

  1. Open the Application

    • Launch index.html in your web browser
    • The application loads with a default 5-slice example chart

  2. Set Chart Title

    • Locate the “Chart Title” input field in the left panel
    • Click and type your desired title (e.g., “Q4 Sales Distribution”)
    • The preview updates automatically

  3. Configure Slices

    • Each slice has four controls:
      • Color Picker: Click the colored square to select a custom color
      • Label Input: Enter descriptive text (e.g., “Product A”, “Marketing”)
      • Value Input: Enter numeric value (decimals supported)
      • Delete Button: Remove the slice (disabled if only 2 slices remain)

  4. Add or Remove Slices

    • Click the “+ Add Slice” button to create new slices
    • Use the trash icon (🗑️) to remove unwanted slices
    • Minimum 2 slices required for valid charts

2. Customizing Appearance

Choosing Colors:

  • Click any color square next to a slice
  • Use the browser’s native color picker
  • Select your desired color
  • Changes apply instantly to both pie slices and legend

Adjusting Values:

  • Enter positive numbers in the “Value” fields
  • Decimal values are supported (e.g., 12.5, 33.75)
  • Values of 0 are valid and will display as 0%
  • Negative values are automatically converted to 0

3. Exporting Your Chart

The application offers three professional export formats:

PNG Export (Recommended for Presentations)
  • Resolution: 3× native size for high quality
  • Background: Transparent (perfect for overlays)
  • Use Cases: PowerPoint, reports, websites
  • File Size: Typically 50-200 KB

Click the “PNG” button in the top navigation bar. The browser will download xsukax-pie-chart.png automatically.

SVG Export (Recommended for Print)
  • Format: Scalable Vector Graphics
  • Quality: Infinite scalability with no quality loss
  • Use Cases: Print materials, professional publications, design workflows
  • File Size: Typically 5-20 KB

Click the “SVG” button to download xsukax-pie-chart.svg.

Markdown Export (Recommended for Documentation)
  • Format: Mermaid code block with color preservation
  • Compatibility: GitHub README files, Notion, GitLab, Obsidian
  • Editability: Can be modified as plain text
  • File Size: < 1 KB

Click the “MD” button to download xsukax-pie-chart.md.

Advanced Usage

Creating Multi-Category Charts

For complex data visualization with many categories:

  1. Start with 2-3 main categories
  2. Use the “Add Slice” button iteratively
  3. Group similar items with related colors (e.g., shades of blue for different product lines)
  4. Keep labels concise for readability (max 20-30 characters recommended)
  5. Consider using percentages as values for normalized comparison

Color Scheme Best Practices

  • Accessibility: Ensure sufficient contrast between adjacent slices
  • Consistency: Use brand colors if creating charts for an organization
  • Color Blindness: Avoid red-green combinations; consider colorblind-safe palettes
  • Cultural Considerations: Be aware of color meanings in different cultures

Troubleshooting

Issue Solution
Chart not displaying Check browser console for errors; ensure internet connection for CDN resources
Colors not changing Try a different browser; clear cache and reload
Export button not working Check browser’s download permissions; disable popup blockers
Preview shows “Error” Verify all values are valid numbers; check for special characters in labels
Low-quality PNG This shouldn’t occur with the 3× scaling; try SVG export instead

📄 Licensing Information

This project is licensed under the GNU General Public License v3.0, ensuring that it remains free and open-source software with strong copyleft protections.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

🌟 Support

If you find this project helpful, please consider:

  • Starring the repository on GitHub
  • Sharing it with others who might benefit
  • Reporting bugs or suggesting features

📧 Contact

Repository: https://github.com/xsukax/xsukax-Pie-Chart-Maker

Made with ❤️ by xsukax

Privacy-focused • Open Source • User-friendly

Leave a Reply

Your email address will not be published. Required fields are marked *