Pie Chart Maker

/* Reset and Base Styles */ .pcma-wrapper * { margin: 0; padding: 0; box-sizing: border-box; line-height: 1.5 !important; } .pcma-wrapper { max-width: 1280px; min-height: 550px; margin: 0 auto; padding: 24px; background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%); border-radius: 16px; color: #1a1a2e; } .pcma-header { text-align: center; margin-bottom: 24px; } .pcma-title { font-size: 28px; font-weight: 700; color: #4150F6; margin-bottom: 8px; } .pcma-subtitle { font-size: 14px; color: #6b7280; } .pcma-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } /* Controls Panel */ .pcma-controls { background: #ffffff; border-radius: 12px; padding: 20px; box-shadow: 0 4px 20px rgba(65, 80, 246, 0.08); border: 1px solid #e5e7ff; } .pcma-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pcma-form-group { display: flex; flex-direction: column; gap: 6px; } .pcma-form-group.pcma-full-width { grid-column: 1 / -1; } .pcma-label { font-size: 13px; font-weight: 600; color: #374151; } .pcma-input, .pcma-select { padding: 10px 14px !important; border: 1.5px solid #e5e7eb!important; border-radius: 8px!important; font-size: 14px!important; transition: all 0.2s ease!important; background: #fafbff!important; color: #1a1a2e!important; } .pcma-input:focus, .pcma-select:focus { outline: none!important; border-color: #4150F6!important; box-shadow: 0 0 0 3px rgba(65, 80, 246, 0.15)!important; background: #ffffff!important; } .pcma-input::placeholder { color: #9ca3af!important; } .pcma-color-group { display: flex; align-items: center; gap: 10px; } .pcma-color-input { width: 40px !important; height: 40px !important; border: 2px solid #e5e7eb; border-radius: 8px; cursor: pointer; padding: 2px !important; background: #ffffff; } .pcma-color-input::-webkit-color-swatch-wrapper { padding: 0; } .pcma-color-input::-webkit-color-swatch { border: none; border-radius: 4px; } .pcma-toggle-container { display: flex; align-items: center; gap: 10px; } .pcma-toggle { position: relative; width: 48px; height: 26px; background: #e5e7eb; border-radius: 13px; cursor: pointer; transition: background 0.3s ease; } .pcma-toggle.pcma-active { background: #4150F6; } .pcma-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #ffffff; border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .pcma-toggle.pcma-active .pcma-toggle-knob { transform: translateX(22px); } .pcma-btn { padding: 12px 24px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .pcma-btn-primary { background: linear-gradient(135deg, #4150F6 0%, #5b68f8 100%); color: #ffffff; box-shadow: 0 4px 12px rgba(65, 80, 246, 0.35); } .pcma-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(65, 80, 246, 0.45); } .pcma-generate-btn { grid-column: 1 / -1; margin-top: 8px; } /* Preview Panel */ .pcma-preview { background: #ffffff; border-radius: 12px; padding: 20px; box-shadow: 0 4px 20px rgba(65, 80, 246, 0.08); border: 1px solid #e5e7ff; display: flex; flex-direction: column; gap: 16px; } .pcma-chart-container { position: relative; width: 100%; aspect-ratio: 1; max-height: 320px; display: flex; align-items: center; justify-content: center; border-radius: 8px; overflow: hidden; } .pcma-chart-canvas { max-width: 100%; max-height: 100%; } .pcma-chart-title-display { text-align: center; font-size: 18px; font-weight: 700; margin-bottom: 8px; } /* Legend */ .pcma-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 12px; background: #f8f9ff; border-radius: 8px; } .pcma-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #374151; } .pcma-legend-color { width: 12px; height: 12px; border-radius: 3px; } /* Action Buttons */ .pcma-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-top: 12px; border-top: 1px solid #e5e7ff; } .pcma-btn-secondary { background: #f0f2ff; color: #4150F6; border: 1.5px solid #d4d8ff; } .pcma-btn-secondary:hover { background: #e5e8ff; border-color: #4150F6; } .pcma-btn-success { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); color: #ffffff; } .pcma-btn-success:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35); } /* Embed Modal */ .pcma-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 1000; align-items: center; justify-content: center; } .pcma-modal-overlay.pcma-show { display: flex; } .pcma-modal { background: #ffffff; border-radius: 16px; padding: 24px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); } .pcma-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .pcma-modal-title { font-size: 20px; font-weight: 700; color: #1a1a2e; } .pcma-modal-close { width: 32px; height: 32px; border: none; background: #f3f4f6; border-radius: 8px; cursor: pointer; font-size: 18px; color: #6b7280; transition: all 0.2s ease; } .pcma-modal-close:hover { background: #e5e7eb; color: #1a1a2e; } .pcma-embed-code { width: 100%; min-height: 150px; padding: 14px; border: 1.5px solid #e5e7eb; border-radius: 8px; font-family: 'Monaco', 'Menlo', monospace; font-size: 12px; resize: vertical; background: #f8f9ff; color: #1a1a2e; } .pcma-copy-btn { margin-top: 12px; width: 100%; } .pcma-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: #1a1a2e; color: #ffffff; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; opacity: 0; transition: all 0.3s ease; z-index: 1001; } .pcma-toast.pcma-show { transform: translateX(-50%) translateY(0); opacity: 1; } /* Icon SVGs */ .pcma-icon { width: 16px; height: 16px; } /* Responsive Design */ @media (max-width: 900px) { .pcma-container { grid-template-columns: 1fr; } .pcma-chart-container { max-height: 280px; } } @media (max-width: 600px) { .pcma-wrapper { padding: 16px; } .pcma-form-grid { grid-template-columns: 1fr; } .pcma-form-group { grid-column: 1; } .pcma-form-group.pcma-full-width { grid-column: 1; } .pcma-title { font-size: 22px; } .pcma-actions { flex-direction: column; } .pcma-btn { width: 100%; } .pcma-chart-container { max-height: 250px; } } Pie Chart Maker Create stunning pie charts instantly. Download as image or embed on your website. Chart Title Donut Mode Enable Background Color #ffffff Labels (comma separated) Values (comma separated) Legend Position Bottom Right Hidden Show Values Percentage Value Both None Donut Hole Size Rotation (degrees) Title Color Legend Color Generate Chart My Pie Chart PNG JPEG SVG Embed Code Embed Your Chart × Copy the code below and paste it into your website's HTML.

Copy to Clipboard

Pie Chart Maker

You might also like

CSS Gradient Generator

CSS Grid Generator