Chart Builder
Create beautiful charts from CSV or JSON data. Bar, line, pie, scatter, area charts. Export as PNG or SVG. Free online chart maker
Picking the right chart type is more important than tuning colors or fonts. A line chart of categorical data is wrong; a 3D pie chart is almost always wrong; a stacked bar chart of percentages that add to 100 is fine but a stacked bar of absolute values that shows compositions is hard to compare. This builder takes CSV/JSON data, suggests appropriate chart types based on the data shape, lets you customize titles/axes/colors, and exports to PNG, SVG, or embeddable HTML.
Which chart for which question
- Comparing values across categories → bar chart (horizontal if labels are long, vertical otherwise).
- Trend over time → line chart. Time on x-axis, value on y-axis.
- Distribution → histogram (binned bar chart) or box plot.
- Composition (parts of a whole) → stacked bar (if comparing across groups) or single pie/donut (if just showing one group). NEVER 3D pie.
- Correlation between two numeric variables → scatter plot. Add trendline if linear relationship suspected.
- Geographic data → choropleth map (filled regions) or bubble map (sized points).
- Flow / process / hierarchy → Sankey, treemap, sunburst.
- Many series, dense data → heatmap with x/y categorical, color = value.
The chart-design rules that compound
- Start y-axis at 0 for bar charts. Truncated y-axes distort comparison — Apple's WWDC charts that start at 95% are presentation tricks, not honest data.
- Use color sparingly. One default color for all bars; reserve a contrast color for the one bar you want the audience to notice. Many bars in many colors = chartjunk.
- Sort bars by value, not alphabetically — unless the categories are ordinal (months, age groups). Sorted bars let the reader see ranking at a glance.
- Label directly when possible — annotate the line ends, the bars, the slices. Color-legend-mapping is mental work for the reader.
- No gridlines unless they aid precise reading. Sparse charts read faster than dense ones.
- Pie charts: max 5 slices, one of them ≥30%. More slices: switch to bar chart.
Working example: a monthly revenue series
Input
CSV: month,revenue 2025-06,12500 2025-07,18200 2025-08,15800 2025-09,22100 2025-10,28400 2025-11,31500 2025-12,42100 2026-01,38900 2026-02,45300 2026-03,52000 2026-04,58700
Output
Chart type suggested: line chart - X-axis: month (time) - Y-axis: revenue (continuous) - 11 data points → line clearly readable - No multiple series → no legend needed Alternatives: - Bar chart: also fine; emphasizes individual months over trend. - Area chart: emphasizes accumulation; reasonable for cumulative metrics. - Stacked area: only if breaking down revenue by source. Design: - Single color (e.g., your brand primary). - Y-axis starts at 0 (NOT 12000 — truncation would exaggerate growth). - Label the latest value directly on the line. - Add subtle trend annotation: "5.8x in 11 months".
Always show absolute values when showing growth, not just percentages. "5.8x in 11 months" sounds impressive in isolation; "$12k → $59k" anchors what scale you are dealing with.
Chart anti-patterns
- Pie chart with >5 slices — eye cannot compare angles below ~7%. Sort and bar-chart.
- 3D charts — perspective distorts the values you are trying to compare. Always 2D.
- Dual-axis chart with unrelated units — correlation visually implied even when none exists. The two y-axes can be scaled to "show correlation" of anything.
- Sparse line chart with disconnected points — implies trend where there is no continuity. Use scatter plot or bar for sparse data.
- Stacked bar comparing absolute values across categories — readers cannot compare the upper segments because the bases differ. Use grouped bars or normalize.
- Pie of pie / bar of pie — Excel feature; almost always confusing. Use multiple charts or a treemap.
When to reach for this tool
- You have CSV/JSON data and need a chart for a slide deck, blog post, or status update — without firing up Excel or learning Plotly.
- You want to compare chart types side-by-side to decide which best represents your data.
- You need a presentation-ready chart and want to export PNG/SVG.
- You are designing a dashboard and prototyping chart layouts before implementing in your real visualization library.
What this tool will not do
- It will not analyze your data. Aggregations (sum, mean, group-by) need to happen before charting. The tool charts what you give it.
- It will not produce interactive charts for embedding. Output is static PNG/SVG. For interactive, use Vega-Lite, Plotly, or D3.
- It will not handle multi-million-row datasets. Browser rendering caps practically at ~10k data points. Beyond that, aggregate first.
- It will not replace a real BI tool (Tableau, Looker, Metabase). For ongoing dashboards with refreshing data, use a BI platform.
Frequently asked questions
Should I use a pie chart or a bar chart?
Bar chart almost always. Bar charts let readers compare values precisely (length is easier to compare than angle/area). Pie charts work when you have 2-3 slices and the message is "X% is one piece" — anything more, bar wins. Donut charts are pie charts with a hole; same advice.
When is a logarithmic axis appropriate?
When values span multiple orders of magnitude (e.g., $100 to $1M) or when proportional changes matter more than absolute ones (e.g., stock prices, virus case counts). Always label the axis clearly as "log scale" — readers default to linear interpretation.
How many series can I plot on a single line chart?
4-5 max for separability with color. Beyond that, lines overlap and the legend becomes unreadable. For more series, use small multiples (a grid of separate small charts) or filter to top-N + "other".
Should I show the data table alongside the chart?
For analytical use yes; for presentation no. Tables let readers verify specific values; charts give shape and trend at a glance. In documents that allow both, show the chart prominently and provide the data on demand (collapsed section, separate appendix).
Are gradients good for charts?
Almost never. Gradient fills on bars or areas imply data variation that is not there. Solid colors for solid-meaning bars; reserve gradients for decorative backgrounds or as a visual effect on a single hero chart.
How do I choose colors for accessibility?
Use a palette with sufficient luminance contrast between adjacent colors (not just hue contrast — color-blind viewers see hue similarly across whole spectrum). ColorBrewer 2 has data-viz palettes designed for color-blind safety. Also: never rely on color alone — pair with shape/pattern/label.
Related tools
Calculate mean, median, mode, standard deviation, variance and more. Statistical analysis with histograms and charts. Free online statistics calculator
Convert data between JSON, CSV, YAML, XML, TOML formats online. Free data format transformer with syntax validation and pretty printing
Plot mathematical functions and equations. Create line, scatter, parametric graphs. Free online graphing calculator and function visualizer
Check WCAG color contrast accessibility compliance. Extract colors from images. Analyze color palettes for web accessibility. Free color checker
Simulate how images appear to people with color blindness. Test designs for protanopia, deuteranopia, tritanopia. Free color vision deficiency checker
Last updated · E-Utils editorial team