Interactive Chart & Table Embed Maker
Responsive charts and tables with tooltips for your website, as one piece of code.
Try before you buy.
- Free preview: your chart or table working in full on this page under a MySmartCoPilot mark, and the first lines of its embed code (up to 20).
- Locked until you unlock it: download and copy.
- Unlock: Pro pass, ₹179 for 30 days or ₹79 for 1 week, a one-time payment that never renews. Unlock: Pro pass, $5.99 for 30 days or $2.99 for 1 week, a one-time payment that never renews.
Ways to unlock shows how to get the full result.
Printing this result is locked in the free preview.
1. Your data
A table with a header row: labels or dates in one column, numbers in the others.
Or paste the table (from Excel, Google Sheets or a CSV)
The live view shows an example until you bring your own table.
2. What to embed
Live view
Point at the chart, tap it, or focus it and use the arrow keys: it works here as it will on your page.
Embed code
How to put it on your page
- Copy the embed code, then add an HTML, Embed or Custom code block where the chart should go (most site builders and blog editors have one) and paste it.
- The embed is one piece of code with its own style and script: it needs no other files and loads nothing from anywhere, so the chart works offline and nothing about your readers is sent to MySmartCoPilot.
- Where scripts are not allowed (some newsletter and email tools), the chart still shows, without tooltips; or use the PNG picture with a link to the page.
- The HTML file is a page with just the embed, for your own web space or to open on a computer.
A project file keeps your table and every setting, to change the chart later.
3. Chart
4. Notes on the chart
Highlighted ranges
A shaded band from one point of the x axis to another: a campaign, a season, a period to look at.
Markers
A dashed line at one point of the x axis, with a label: a launch, a change of rules.
Callouts
A short note beside one value, with or without an arrow to it.
Reference lines
A line across the chart at a value: a target, an average, a limit.
3. Table
5. Titles and description
Say what the chart shows and what to take from it. Leave it empty to use the description written from the chart.
6. Embed options
Phones get their own, taller version of the chart; the embed switches by the room it has.
Locked in the free preview. Opens the ways to unlock this result.
Locked in the free preview. Batch runs unlock with a pass.
Locked in the free preview. Query results unlock with a pass.
About the Interactive Chart & Table Embed Maker
Turn a table into a chart or a table that readers can explore on your own website, blog or article: they point at a bar or a line to read its value, tap it on a phone, or use the arrow keys. Charts come from the Chart Maker’s engine — column, bar, stacked, line, area, pie, donut, scatter and combo — with highlighted ranges, markers, callouts with arrows and reference lines, a source and a byline, light and dark versions, and a phone version of their own. Tables get a search box, sorting, pages, a sticky header, heat-map colours, bars in the cells and sparklines.
The embed is one piece of HTML with its own small script and style. It loads nothing from any server, so it keeps working offline and if this site changes, and it sends nothing about your readers anywhere. Its numbers are also in a data table under the chart, with alt text for screen readers.
How to use it
- Paste your table or open a CSV or Excel file, with the column names in the first row.
- Choose A chart or A table, then the chart type and its columns — or the table’s columns, heat map, bars and sparklines.
- Add notes to the chart (highlighted ranges, markers, callouts and reference lines), then the titles, the source, the byline and the alt text.
- Choose light, dark or the reader’s own setting, the shape and the largest width, and check the live view as on a computer and as on a phone.
- With a pass, copy the embed code into an HTML or custom-code block of your page, or download the HTML file or a PNG or SVG picture; without one, the free preview runs the chart on this page and shows the first lines of its code.
Examples
Month Search Social Jan 4200 1800 Feb 4650 2100 …
A line chart with the campaign months shaded, a marker at the launch and a callout at the best month; tooltips on every point.
Team Played Points Goal difference …
A table with a search box, sorting by any heading, ten rows a page and a heat map on Points.
Product Sales Chairs 420 Desks 310 …
A column chart with a dashed target line, value labels and a taller phone version.
Common uses
- Blog posts and articles that explain numbers: readers check the exact value of any point.
- Reports and dashboards on a company site, an intranet page or a school project page.
- Newsrooms and newsletters: one chart for the web page, a PNG picture for the email.
- Tables of prices, results or rankings that readers search and sort themselves.
What your readers get
- Tooltips: pointing at a mark shows its values; on a phone, a tap does. With the keyboard, the chart takes focus and the arrow keys read each value aloud through the screen reader (Up and Down move between series).
- A version for every screen: the embed carries a wide chart and a taller phone chart and shows the one that fits its room, and with Follow the reader’s setting a light and a dark version too.
- The numbers as text: a “Show the data” table under every chart, and the chart’s own description (alt text) for screen readers.
- Tables that stay readable: the header stays in view while scrolling, numbers line up on the right, and search, sorting and pages work without leaving the page.
How the embed works
The code is a block of HTML: the chart drawn as SVG (sharp at any size), the data table, a style sheet that only touches the embed itself, and a small script for the tooltips, search, sorting and pages. It needs no library and no account and loads no fonts, images or trackers, so it adds no cookies to your page. Every label and cell is written as text, never as code, so nothing in a table can run on your site. Where a site removes scripts, the chart and the table still show, without the interactive parts.
Colours
The chart colours are colour-blind-safe palettes (Okabe and Ito, Paul Tol, IBM) or greys for print. Heat-map colours come from ColorBrewer (this product includes color specifications and designs developed by Cynthia Brewer, ColorBrewer, Apache License 2.0) and viridis; the text on each heat-map colour is black or white, whichever is easier to read.
Limitations
- The embed is a copy of your numbers: when they change, make the chart again and replace the code. A chart that reads a published spreadsheet on every view is not offered yet.
- Pages that do not allow scripts show the chart without tooltips, and the table without search, sorting and pages (all rows at once).
- Charts take up to 10,000 rows and table embeds up to 5,000; very large embeds slow pages down.
- Highlighted ranges and markers are drawn on column, line, area and combo charts.
- The free preview runs the chart or table on this page under a mark and shows the first lines of the embed code; copying the code, the HTML file and the pictures need a pass.
Privacy
On this device: nothing is sent
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
What do I get without a pass?
Without a pass, Interactive Chart & Table Embed Maker shows your chart or table working in full on this page under a MySmartCoPilot mark, and the first lines of its embed code (up to 20). Until you unlock it, the result can’t be downloaded or copied. A Pro, Premium or Ultimate pass, a one-time payment that never renews, unlocks the full result. The pricing page lists the passes and their prices.
Does the embed load anything from MySmartCoPilot?
No. The code holds the chart, its data table and a small script, and loads nothing when a reader opens your page; it sets no cookies and sends nothing anywhere. The only link is the “Made with MySmartCoPilot” credit, if you keep it.
Can I take out the “Made with MySmartCoPilot” line?
Yes: untick it under Embed options before you copy the code or download the file. It is a small line of text under the embed and never covers the chart.
Will it work in my site builder or blog editor?
Most of them have an HTML, Embed or Custom code block that takes the code as it is. Where scripts are removed, the chart still shows without tooltips; for email newsletters, use the PNG picture with a link to the page.
Is my data uploaded?
No. The table is read and the chart drawn in your browser, and the embed code is written there too.
Why does the embed hold more than one chart?
A chart laid out for a wide screen is hard to read on a phone, so the embed carries a phone version and shows whichever fits; with “Follow the reader’s setting” it also carries a dark version for readers who use dark mode.