Quickstart

Create your first chart in under a minute with Simple Charts

Get started with Simple Charts and create beautiful, classroom-ready charts in seconds. No account required, no installation needed.

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.

Simple Charts works on any device, including tablets and smartphones. For app-like experience on Android, install it as a PWA from your browser menu.

Your first chart

1. 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

   Click Add Row to add more options, or click the trash icon to remove rows you don’t need.

   Empty rows are automatically ignored - you don’t need to delete them manually.
2. 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”)

   When using percentages with pie charts, values should add up to approximately 100 to avoid validation warnings.
3. 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.
4. 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

   For bar charts, you can add custom X and Y axis labels to provide additional context.
5. Export your chart

   Once your chart looks perfect, export it as a high-resolution PNG:

   1. Choose Background: White (for documents) or Transparent (for slides)
   2. Select Resolution:
      • Low - 2x pixel ratio (fastest download)
      • Medium - 4x pixel ratio (recommended balance)
      • High - 8x pixel ratio (maximum quality for printing)
   3. Click Export PNG

   The chart downloads instantly as 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

These validation messages appear in the Data table and Export panel to help you fix issues before exporting.

Power user tips

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

Need fine-grained color control? Open the Advanced Colors accordion in Chart Setup:

1. Enable “Enable custom item colors”
2. Click “Show full color picker” for unlimited color selection
3. Choose colors for each data row individually
4. Click Reset custom colors to return to the theme palette

You can select from 16 curated color swatches or use the full color picker for exact hex values.

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

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

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