Launch the app
Visit charts.abmcodes.xyz to start creating charts immediately. The app runs entirely in your browser and auto-saves your work locally.Your first chart
Enter your data
In the Data panel on the left, you’ll see three default rows. Replace them with your actual data:
- Label: The name of each option (e.g., “Pizza”, “Tacos”, “Burgers”)
- Value: The count or number for each option
Empty rows are automatically ignored - you don’t need to delete them manually.
Choose value format
Toggle between Numbers and Percentages based on your data:
- Numbers: For raw counts (e.g., “15 students chose pizza”)
- Percentages: For percentage data (e.g., “45% chose pizza”)
Select chart type
In the Chart Setup panel, choose between:
- Pie: Perfect for showing proportions and parts of a whole
- Bar: Ideal for comparing values across categories
Pie charts cannot display negative values. If you need to show negative data, use a bar chart.
Customize your chart
Make your chart presentation-ready:
- Title: Add a descriptive title like “Favorite Lunch Options”
- Legend: Toggle on/off to show/hide the color legend
- Value labels: Display values directly on chart segments or bars
- Color theme: Choose from 6 curated palettes designed for classroom use:
- Classroom - Balanced tones for worksheets and slides
- Soft Report - Muted and professional for handouts
- Pastel Math - Light palette for younger students
- Print Safe - High-contrast colors for printing
- Science Lab - Cool tones with crisp separation
- Editorial - Clean palette for presentations
Export your chart
Once your chart looks perfect, export it as a high-resolution PNG:
- Choose Background: White (for documents) or Transparent (for slides)
- Select Resolution:
- Low - 2x pixel ratio (fastest download)
- Medium - 4x pixel ratio (recommended balance)
- High - 8x pixel ratio (maximum quality for printing)
- Click Export PNG
chart-YYYYMMDD-HHMM.png to your device.Data validation
Simple Charts validates your data in real-time and displays helpful error messages:Field validation
Each row is checked for completeness:- “Label required” - Add text to the label field
- “Value required” - Add a number to the value field
- “Use a valid number” - Enter numeric data only
- “Use a percentage between 0 and 100” - Percentages must be 0-100
The validation logic supports international number formats, including Bengali numerals (০-৯), Arabic decimal separators (٫), and various comma/minus symbols.
Chart validation
Additional rules apply based on chart type:- “Add at least one complete label and value pair” - Charts need data to render
- “Pie charts do not support negative values” - Use bar charts for negative data
- “Pie charts need at least one value above zero” - All zeros cannot be visualized
- “For pie charts, percentage totals should be close to 100” - Validation warning for percentages
Power user tips
Persist your data automatically
Persist your data automatically
Simple Charts auto-saves your last chart to browser local storage. Your data persists across sessions, so you can close the tab and return later without losing work.The storage key is
teacher-chart-maker:v1 and includes both your data rows and all chart options.Use custom colors per item
Use custom colors per item
Need fine-grained color control? Open the Advanced Colors accordion in Chart Setup:
- Enable “Enable custom item colors”
- Click “Show full color picker” for unlimited color selection
- Choose colors for each data row individually
- Click Reset custom colors to return to the theme palette
Support for Bengali numerals
Support for Bengali numerals
Simple Charts automatically detects Bengali numerals (০-৯) in your input and formats them correctly in charts. If all values use Bengali numerals, axis labels will render in Bengali too.The app normalizes various international number formats:
- Bengali digits: ০-৯ → 0-9
- Arabic decimal: ٫ → .
- Various commas: ٬ , → removed
- Dash variants: − – — → -
Quick keyboard workflow
Quick keyboard workflow
Speed up data entry with these shortcuts:
- Tab: Move to next field
- Shift+Tab: Move to previous field
- Enter in last row: Automatically adds a new row
- Add Row button: Creates new empty row
- Clear button: Resets all data to single empty row
Export for different contexts
Export for different contexts
Choose your export settings based on where you’ll use the chart:
| Context | Background | Resolution |
|---|---|---|
| Google Slides | Transparent | Medium |
| PowerPoint | White | Medium |
| Printed worksheets | White | High |
| Social media posts | White | Medium |
| Research papers | White | High |
| Web articles | Transparent | Low |
What’s next?
Chart types
Learn the differences between pie and bar charts and when to use each type
Color palettes
Explore all 6 built-in color themes and custom color options
Export options
Master high-resolution exports with background and resolution controls
Deployment
Deploy your own instance on Cloudflare Pages