Build your own chart from data with AI

A chart can mislead too

999999999 and 1000000000. Their bars should look almost identical. In the first version of our editor, though, the extra digit took space away from the bar. The values were correct, but the picture suggested a difference barely present in the data.

Try the corrected editor above. Paste numbers, click “Draw chart” and get bars plus a table. Everything fits in one HTML file, works offline and calculates in your browser. Your entries do not go to an external service. We supplied fictional data to start with.

A shared scale needs shared space

We moved numbers above the bars so each row has the same chart area. The length of a number no longer changes the bar length. Check the same thing in your own version: calculating a percentage correctly is not enough if the layout then distorts it.

Enter “A;10” and “B;20.” The first bar should be half the second’s length. Now replace the values with “2,5” and “5”: the proportion should remain. You can also change the sample “Research;12,5” to “Research;6” and then to zero. The bar first shrinks, then disappears, but its entry and number remain in the table. With two zeros, both rows must still be visible.

What goes in the data field?

One line is one entry: label;value. We chose a semicolon so a comma can stay in the number. A decimal point works too. Enter a value as “1200,5,” without a unit or spaces between thousands. Do not add a header row.

Use one unit for the whole set. Compare hours with hours and złoty with złoty. The editor accepts up to 20 entries, labels of up to 64 characters and nonnegative numbers up to one trillion with at most four decimal places. That is the scope of our small tool; you can change it when extending the project.

Ask for a version of your own

If you want to build a similar editor, the prompt below gives the model a concrete task. Its rules are easy to check afterwards: a zero baseline, visible values, decimal commas and an error message identifying the line.

Paste the prompt into a coding assistant and ask for instructions on opening the file too. We made our demo as a reference, not as a record of one particular model’s answer. If your tool cannot run the file in a browser, open it yourself and try the checks in this article.

Create a single HTML file that works offline without libraries or external files. Add a text field in label;value format, one record per line. Support decimal commas and decimal points. Accept up to 20 entries, labels of up to 64 characters and nonnegative numbers up to 1 000 000 000 000 with at most 4 decimal places. Blank and invalid lines must trigger a clear message with the line number; do not skip them. On a button click, show proportional bars sharing a zero baseline and an accessible value table. Editing the text must invalidate the previous result. Treat labels as text, never HTML. Provide light and dark themes, keyboard controls and a layout starting at 320 px wide. Use clearly labeled fictional data.

What if the data contains a mistake?

Leave a blank line, enter a negative number or replace it with a word. Our demo stops drawing and points to the entry that needs fixing. We do not want a chart that looks finished after silently losing part of its dataset.

Each edit clears the old preview. Only “Draw chart” produces the new one. Freshly entered numbers therefore do not sit beside bars calculated before the change.

There is one more check: long labels and a narrow window. See whether text wraps, numbers remain readable and Tab reaches the controls. Bars help us see proportions; the table is where we find exact values.

The file stays with you

“Download HTML” saves the entire editor. Open it with a double-click, without an account or library installation. The downloaded copy starts with our example data, so save your own set separately, perhaps in a text file.

For a presentation, take a screenshot of the chart itself. Add what the numbers describe, the period they cover and their unit. The demo data is fictional; your report needs your own.

If you inspect the code, the HTML table is a useful place to start. Labels are row headings, and values are ordinary text above the bars. Below, we link documentation for tables and the download attribute used to save the file.