17 chart options · Browser rendering
Chart Creator
Give the numbers
a readable shape.
Build category, percentage, numeric-point and mixed charts from your own values. Edit the data and style, review the preview, then render a PNG at the dimensions you choose.
Includes bar, line, pie, doughnut, scatter, bubble and stacking variants. Example data is illustrative; the tool does not verify your data or generate a forecast.
Example values are loaded to demonstrate the controls. Replace them with your own data. Changes update the preview; this tab does not save a project.
Choose the comparison
Start with the question. Then choose the chart.
| Your comparison | Chart options | Check before sharing |
|---|---|---|
| Amounts across categories | Bar · Horizontal Bar | Use the horizontal variant when labels need more room. A zero baseline is used for these value axes. |
| An ordered sequence | Line · Area · Step | Category labels preserve table order. These are not time-aware date scales; Step represents a change between levels. |
| Components and totals | Stacked Bar · Stacked Horizontal Bar · Stacked Area | Area requires non-negative data here; ordinary stacked bars also support negative components. |
| Shares within each category | 100% Stacked Bar · 100% Stacked Horizontal Bar | Compare composition, not absolute row totals. A zero-total row has no bar. |
| Parts of one total | Pie · Doughnut | First dataset only. Keep the number of slices readable and use non-negative values. |
| Profiles across dimensions | Radar · Polar Area | Radar supports multiple datasets; Polar Area uses the first. Radial distance/shape does not imply a statistical test. |
| Numeric relationships | Scatter · Bubble | Enter real numeric X values. Bubble radius is direct pixel size, not an automatically area-scaled variable. |
| Bars with a reference series | Bar + Line | Choose each dataset’s type. Both share a single value axis; no automatic trend calculation. |
A worked comparison
Same values. Two different messages.
| Example category | Series A | Series B | 100% view |
|---|---|---|---|
| North | 30 | 70 | 30% / 70% |
| South | 150 | 50 | 75% / 25% |
| No recorded total | 0 | 0 | Empty bar |
Illustrative data, separate from the live example. A standard stacked bar would show South’s total of 200 as twice North’s 100. A 100% chart gives both non-zero rows equal length and shows their composition instead.
Settings that matter
Style the chart without changing the numbers.
Use deliberate chart colors
Interface theme and chart palette have different jobs. Check text contrast on the background you plan to use in the final slide or report.
Keep missing values distinct
Blank does not mean zero. Scatter/Bubble skip incomplete points; normal lines can show gaps, and percentage totals use only present amounts.
Check the PNG dimensions
The renderer lays the chart out again at your chosen width and height. Long labels can fit differently from the responsive preview.
Review the legend
Circular types use one dataset. Multi-series charts retain other datasets while hidden; PNG copies the current visible series and slices.
Scope
A chart image. A clear boundary.
It does
Edit a bounded numeric table, apply 17 chart options, adjust labels/colors and render a PNG at selected pixel dimensions.
It does not
Fetch live business data, validate source accuracy, calculate regressions, forecast results, create dashboards or export a reusable chart project.
Local work in this tab
Values stay in this browser for this chart workflow. The chart libraries load from a CDN, and the rest of the site can make its own requests.
Before you publish
Check units, source data, missing values and axis wording. A polished chart cannot establish whether its underlying data is reliable.
Troubleshooting
Use the message beside the chart.
A circular chart is empty
Check the first dataset. It needs at least one positive value and no negative values. Additional datasets stay stored but are not drawn.
Scatter points are missing
Check the separate X column, dataset Y and, for Bubble, radius. Incomplete points are omitted and their count appears in the status.
A percentage bar has disappeared
If its row total is zero, it intentionally has no bar. A negative number is invalid in the two 100% modes; switch to an ordinary bar if negative amounts are required.
The download failed
Keep width/height within their ranges and output under 8 MP. Try smaller dimensions if the browser cannot encode the PNG. The status explains an encoding or library-load error.
Chart creator questions
Before you export the comparison.
Which chart types can I create?
There are 17 options: Bar, Line, Area, Horizontal Bar, Stacked Bar, Stacked Horizontal Bar, Polar Area, Step, Radar, Pie, Doughnut, Scatter, Bubble, Bar + Line, Stacked Area, 100% Stacked Bar and 100% Stacked Horizontal Bar. These include orientation, stacking and fill variants, rather than 17 unrelated statistical chart families.
How do I enter data and missing values?
Edit category labels and numeric dataset cells in the table. Empty cells remain missing values instead of becoming zero. Add/remove actions affect the last row or dataset. The workspace supports 200 rows and 8 datasets, with values and numeric X coordinates from −1 trillion to +1 trillion. Labels can use up to 120 characters and dataset names up to 80. The initial monthly values are illustrative example data.
How do Scatter and Bubble charts use X values?
Both use a separate editable numeric X column and each dataset’s Y values. Initial X values are row numbers, not converted category labels. A point with missing X or Y is omitted. Bubble also needs a radius. Category labels, X values and radius values remain stored while you switch between chart types.
What does Bubble radius mean?
Radius is a direct size from 0 to 100 pixels, initially 10. It is not automatically calculated from a third variable or scaled so that circle area represents a quantity. A missing radius omits that point; 0 produces a zero-radius point. The PNG renderer uses that radius in its own output pixels, so apparent size relative to the whole chart can differ at another output size.
Why do Pie, Doughnut and Polar Area show one dataset?
This tool displays only the first dataset for these three types. Other datasets remain stored and return in compatible multi-dataset charts. Dataset add/remove actions are disabled while a circular type is selected. Use non-negative values and at least one positive value in the first dataset. Slice colors come from the selected theme. Percentage labels require the bundled label plugin to load.
How do 100% stacked charts calculate shares?
For each row, non-negative values are divided by that row’s total across the datasets. Raw table values do not change. A zero-total row remains empty; a missing value stays missing and contributes no amount to the denominator. Tooltips show the normalized percentage and raw value. Legend hiding is disabled for these two chart types so their denominator stays fixed.
Can I combine bars and lines?
Yes. Choose Bar + Line, then open Chart colors & background and choose Bar or Line for each dataset. They share one value axis. This version does not add a secondary axis, calculate a regression or create a forecast. Smoothing affects line datasets but does not turn them into a statistical trend model.
How do standard stacked bars and Stacked Area differ?
Standard stacked bars can display positive and negative components. Stacked Area in this tool requires non-negative values and uses filled areas over ordered category labels. It is not percentage-normalized. Missing values can leave gaps. Use ordinary Line or Bar if a stacked area would hide the comparisons you need.
Does dark mode change the chart colors?
Light, Dark and System change the page interface. Chart background, title, tick, legend, dataset and slice-label colors are separate explicit settings that control the preview and PNG. A white chart can remain white in a dark interface. No web fonts are loaded by this snippet; the interface and chart use available system fonts.
How does PNG size and transparency work?
Choose width 320–4,096 px and height 240–4,096 px, up to 8 MP total. The chart is rendered again on a separate canvas at those exact dimensions with pixel ratio 1; the current preview bitmap is not simply enlarged. Layout can differ with the output aspect ratio. The transparent-background setting retains uncovered alpha; otherwise the chosen background fills it. PNG files above 64 MiB are rejected. This is a raster image, not an editable or vector project.
Do hidden legend items stay hidden in the download?
Yes. The PNG render copies the current dataset visibility and, for Pie, Doughnut and Polar Area, hidden slice visibility. The two 100% stacked modes keep legend hiding disabled. Changes to data or chart type can change how legend items are interpreted, so review the current preview before exporting.
Are data uploaded or saved for later?
The data table, chart rendering and PNG encoding run in this browser for this workflow. The snippet does not submit values to a chart-processing server. Third-party CDN requests and other website scripts still exist; this is not a privacy guarantee about the whole WordPress site. Only the appearance preference may persist locally. Refreshing or closing the tab loses the data and settings; there is no project import/export or automatic publishing.
What if a chart or download does not appear?
Read the status below the preview. Check missing values, non-negative requirements for circular/percentage/stacked-area types, numeric ranges and bubble radius. Invalid data disables PNG download. If a library fails to load, check the connection or CDN/CSP access and reload. For export, use valid dimensions within 8 MP and try a smaller PNG if encoding fails. Different devices can render fonts differently; no ranking, engagement or universal output-quality guarantee is made.
Related image steps
Take the exported chart to its next use.
Ready to build your chart?
Replace the example data, choose a comparison and check the preview.