A wpDataTables chart reads its values from a table, so the table comes first. Run the Chart Creation Wizard on it, copy the shortcode it generates, [ wpdatachart id=1 ], and paste that into a post or page.
The same chart can also go in through the Gutenberg block or the Elementor widget, or through a Divi, Avada or WPBakery element. The engine you choose in the first wizard step (Google Charts, Highcharts, Chart.js or ApexCharts) sets which chart types and column layouts are available.
A saved chart stays linked to its source table. Edit it in the wizard and the change shows up in every post or page where it is embedded (wpDataTables documentation, 2026).
Table of Contents
How to embed a chart with wpDataTables
The wizard asks for a data source early on, and the chart can only read from a table that already exists. If you don’t have one yet, the first job is building the data table itself, and everything below assumes that part is finished.
- In the WordPress admin, go to wpDataTables, then Create a Chart, and type a chart name you will recognize later.
- Choose a render engine from Google Charts, Highcharts, Chart.js and ApexCharts.
- Pick a chart type. The list changes with the engine. Click Next.
- Select the source table from the select box.
- Move the columns you want into the right-hand list, then keep all rows or pick a range.
- Format the chart. Options are grouped by chart element, and the preview on the right updates as you change them.
- Save it. wpDataTables stores the chart in the WordPress database and generates the shortcode, and the copy icon puts that on your clipboard.
- Paste the shortcode into a post or page and publish.
The wpDataTables blog counts four wizard steps plus a fifth for copying and pasting the shortcode. The list above just cuts the same path into smaller actions.
The shortcode looks like [ wpdatachart id=1 ], where the number is the chart’s ID.
You can copy it from the chart list whenever you need it, not only right after saving.
Which render engine fits the chart
Pick the engine by the chart type you can’t do without, not by looks. Line, column, bar and pie charts exist in all four main engines, so the choice only matters for the less common types.
| Engine | Types worth choosing it for | Column rule | Watch for |
|---|---|---|---|
| Google Charts | Candlestick, waterfall, gauge, histogram | Candlestick and waterfall need 5 columns | Gauge works best with few rows |
| Highcharts | Treemap, funnel, 3D column, spiderweb | Treemap level needs 3 or more | Does not inherit the table’s number format |
| Chart.js | Radar, polar area, bubble | Bubble needs exactly 4 | v4.x changed the callback structure |
| ApexCharts | Stepline, spline area, 100% stacked, radial bar | Pie, donut and radial bar take exactly 2 | Combo charts only on line, area and basic column |
Type lists and column rules come from the wpDataTables chart documentation, as of November 2026.
Candlestick, waterfall and gauge charts exist only in the Google Charts library among the four main engines, which is why finance and KPI dashboards tend to start there.
Trend data that needs steps or smooth curves fits the ApexCharts engine, which builds combo charts with multiple y-axes on line, area and basic column types. It arrived in version 4.5, alongside the Avada and Divi integrations (wpDataTables blog).
Highcharts licensing
The Highcharts page in the current documentation says the library bundled since version 3.0.4 is free for commercial use, with no separate license needed.
The feature overview page still says commercial use requires one.
Both statements sit on official pages, so I’d read Highcharts’ own licensing terms before a client launch.
How many engines the plugin ships
It depends which page you read. The feature overview names Google Charts, Highcharts and Chart.js, which makes three. The chart wizard documentation and one FAQ add ApexCharts for four, and a newer FAQ version adds Highcharts Stock for five.
The lower counts predate ApexCharts (version 4.5) and Highstock (version 6.0, released 20 November 2023, per the plugin changelog). Highstock is a separate stock-chart engine, so this article sticks to the other four.
Newest or stable library version
Since version 5.7 (29 June 2023, plugin changelog), Google Charts, Highcharts and ApexCharts let you choose between the newest library loaded from a CDN and a stable build bundled with the plugin.
Pick the stable build if a chart breaks after a library update. It’s the less exciting option, and honestly the one I’d go with on a client site.
How to choose the table columns and rows for a chart
You need one label column (string or date) and at least one numeric column. After that, keep All rows or choose a range. When the number or type of columns doesn’t suit the chart type, the wizard shows a hint.
Column rules by chart type
- Line, area, column and bar charts take one label column plus numeric columns, so 2 columns minimum.
- Pie and donut charts want exactly 2, one for names and one for values. Gauge follows the same rule.
- A Chart.js bubble chart is one label plus 3 numeric columns, exactly 4 in total.
- Candlestick and waterfall in Google Charts need 4 numeric columns and a label, 5 in total.
The selected columns sit in a right-hand list, and you can reorder them by dragging.
Row range
All rows is the default. Choosing Pick range opens the Range picker, where you select cells by click and drag or tick row and column checkboxes.
A range selection can override the column choice, so set rows last.
Follow table filtering
Charts do not follow table filtering unless they sit on the same page as their source table, according to the wpDataTables help center.
The option works only with All rows, and it makes the chart plot just the rows the table currently shows (wpDataTables support replies).
To show the filters and the chart without the table, place both shortcodes on the page and hide the table with custom CSS.
Data sources behind the table
The table can come from Excel, CSV, XML, JSON, a serialized PHP array, Google Sheets or a MySQL query (wpDataTables documentation). Google Sheets and MySQL sources are premium features (WordPress.org plugin page, 2026).
If the numbers live in a spreadsheet, this walkthrough on visualizing Google Sheets data goes into that route in more depth.
Google Sheets tables come with a few constraints, according to the wpDataTables documentation and vendor support.
- The sheet has to be published to the web, and the table links to the published URL.
- Changes can take up to about 15 minutes to show, because Google caches the content.
- The source is read on every page load, so large tables (the vendor cites figures from roughly 2,000 to 5,000 rows) can load slowly unless caching is on.
- Renaming, reordering, adding or deleting columns breaks the table. Recreate it and recheck the chart’s data source step.
- Merged cells aren’t supported.
Where to place the chart on the page
The plain shortcode works almost anywhere. Past that there’s the wpDataCharts Gutenberg block, the Elementor widget, elements in Divi, Avada and WPBakery, and a shortcode inside a table cell. Whichever you use, the chart has to be saved first.
| Route | Where it works | How | Note |
|---|---|---|---|
| Shortcode | Classic editor, Classic or Shortcode block, anything that parses shortcodes | Paste [ wpdatachart id=1 ] | You need the chart id |
| Gutenberg block | Block editor, WordPress 5.0 or later | Search wpDataCharts in the inserter, choose the chart in the sidebar | The documentation lists no chart-specific sidebar options |
| Elementor widget | Elementor editor | Drag in the wpDataCharts widget, pick the chart | Create the chart before opening Elementor |
| Divi, Avada, WPBakery | Each builder’s module or element list | Search “wp”, add wpDataChart, pick the chart | Saved as a shortcode in the page |
| Table cell | Tables from Excel, CSV, Google Sheets, MySQL, JSON, PHP array | Enable Parse shortcodes in strings in Main Settings, put the shortcode in a string column | Fails with server-side processing and manual tables |
Routes and limits come from the wpDataTables documentation and help center, as of November 2026.
Use the block for posts written in the block editor, and the shortcode for everything else.
Gutenberg and Elementor both rewrite the shortcode as you change settings, and Publish then saves it.
Divi, Avada and WPBakery store the chart as a shortcode when the page is saved. WPBakery also accepts charts inside columns and in tabs or accordions.
How to format the chart and keep it responsive
Formatting comes last in the wizard. Options are grouped by chart element and the preview redraws as you change them. A single tick box sets the chart width to 100% of its container.
Size and responsiveness
Chart width and chart height set fixed dimensions. Ticking responsive width makes the width follow the container at 100% instead.
Leave it ticked for anything inside a post column. That covers Gutenberg blocks and Elementor sections too. Fixed widths only make sense for a slot whose size never changes.
Options that exist only on some engines
Several options only show up on certain engines.
- Zoom type exists in Highcharts and ApexCharts.
- Panning and Pan key are Highcharts only (ApexCharts has pan controls in its toolbar).
- Font size and Font name apply to Chart.js and Google Charts.
- The toolbar is ApexCharts only.
- 3D works on Google Charts pie charts only.
- Line or area background image is ApexCharts only.
These come from the wpDataTables chart wizard documentation, as of November 2026.
Zoom, panning and the toolbar are what turn a static picture into an interactive chart, so check the engine before promising them to a client.
Large datasets and load time
For an ApexCharts chart with many rows, set the marker size to 0 and turn data labels off in the wizard. Both options are ApexCharts-only, and both cut the number of elements the browser has to draw.
Trimming the row range is the first lever, though. A separate piece on visualizing large data sets in charts goes further.
Loaders came in two steps (plugin changelog and release notes). Version 6.7 (16 September 2024) added a setting that turns the table loader on or off, and put loading placeholders in charts. Version 7.0 (14 November 2024) added global loader controls for both tables and charts.
How to change chart options with wpDataCharts callbacks
Callbacks cover whatever the wizard doesn’t offer. You write a small JavaScript function keyed to a chart id, it edits the engine’s option object before the chart draws, and the whole thing goes in a script tag above the chart’s shortcode on the page.
Anatomy of a callback
- Find the chart id in the shortcode, for example 1 in [ wpdatachart id=1 ].
- Create the wpDataChartsCallbacks object if it does not exist yet, and run the code after the window loads.
- Assign a function to wpDataChartsCallbacks[1] that receives the chart object.
- Set options on obj.options inside that function.
Swap the number in the brackets for your own chart id every time you copy an example. A callback with the wrong id does nothing, and neither does one placed below the shortcode (wpDataTables support).
What each engine expects
Each engine has its own option tree, so a callback written for one doesn’t carry over to another.
Highcharts charts keep options such as yAxis and plotOptions directly under obj.options.
Chart.js charts nest one level deeper, under obj.options.options, with axes at scales.x and scales.y.
Google Charts takes flat options like tooltip and pieSliceText, and ApexCharts takes chart-level settings such as chart.id and chart.group.
Common jobs for callbacks
- Adding prefixes and suffixes to axis labels, which the table’s values don’t carry over
- Setting a comma as the decimal separator in Highcharts, through Highcharts.setOptions
- Drawing horizontal bars in Chart.js on versions before 5.3, which added the option to the wizard
- Custom slice colors on a Chart.js pie chart, which has no built-in option
- Synchronized ApexCharts, by giving each chart a unique id and a shared group
Every one of these comes from the wpDataTables FAQ and the ApexCharts documentation.
Editing the chart later
Open wpDataTables, then the wpDataCharts browse page, and click the chart title or its Configure icon. The wizard reopens with every step filled in from the saved settings.
Saving applies the change to every post or page where the chart is embedded. Your callback isn’t touched by that edit, because the script sits in the page content, not in the chart.
Callbacks do need some programming skill, and the included support covers advice only (wpDataTables documentation). The Chart.js 3.x and 4.x migration guides cover different changes, and the plugin docs tell you to read both before reusing an old callback.
Why an embedded chart does not show
The documented causes are a theme, builder or plugin conflict, a Bootstrap clash, page caching, and a minified script file. A misplaced callback gives a similar symptom without any of them.
| Symptom | Documented cause | Fix |
|---|---|---|
| Chart missing or broken on the front end, fine in the preview | Conflict with the theme, a page builder or another plugin | Isolate it with the steps below |
| Render engine selector disabled in the wizard, or dropdowns dead | Bootstrap loaded twice | Turn off Include full bootstrap in the plugin settings (back-end for the wizard, front-end for the page) |
| Blank chart and a TypeError from wdt.chartsRender.min.js in the console | Minified script file | Untick Minified under Custom JS and CSS, then clear the cache |
| Chart fails on a cached page | Caching plugin | Exclude the page from caching |
| Callback changes nothing | Script below the shortcode, or wrong chart id | Move it above the shortcode and match the id |
Rows come from the wpDataTables help center, vendor replies on WordPress.org and support tickets, as of November 2026.
Isolating a conflict
- Switch to a default WordPress theme such as Twenty Twenty-Four and reload the page.
- Deactivate every plugin except wpDataTables and reload again.
- Reactivate the other plugins one at a time, reloading after each.
- The plugin that brings the problem back is the conflict.
If the cause stays hidden, the wpDataTables support team answers through the chat icon at the bottom right of their website.
Common Questions About Embedding a Chart with wpDataTables
Is wpDataTables free for creating charts?
Partly. The free Lite version offers 23 chart types on Google Charts and Chart.js, while Highcharts, Highcharts Stock and ApexCharts belong to the premium version (WordPress.org plugin page, 2026).
The Lite vs Premium tab in the WordPress dashboard shows the current split.
Does the chart update when the table data changes?
Yes. A chart always reads its wpDataTable as the source, so edits to the table show up in the chart (wpDataTables support).
Tables that cache their data need the cache to refresh first, which the auto update cache setting handles on a custom interval.
Can the same chart go on more than one page?
Yes. The shortcode holds only the chart id, so pasting [ wpdatachart id=1 ] into another post or page places the same saved chart there.
Do I need to write code to embed a chart?
No. The wizard, the shortcode and the Gutenberg or Elementor placement need none.
JavaScript only comes in with wpDataCharts callbacks, for options the wizard doesn’t offer.
Can a wpDataTables chart be embedded on a site that does not run WordPress?
The documentation describes no route for that. wpDataTables is a WordPress plugin, and a chart is placed through a WordPress shortcode, block or page builder element.
Keeping Embedded wpDataTables Charts Working After Updates
An embedded chart needs a short recheck after each plugin or chart library update, and any wpDataCharts callback goes first. Callbacks are the only part that depends on an engine’s internal option tree.
Pages that hold a callback come first, then pages behind a caching or minification plugin. Charts that follow table filtering or sit in table cells go last.
That order runs from the most fragile piece to the least. A wizard-built chart relies on the plugin’s own code, while a callback edits the option object directly and breaks when that object changes shape.
Pinning the stable library build keeps things compatible but gives up the newest engine features, so I’d only do it for Google Charts, Highcharts and ApexCharts charts that carry callbacks.
This advice was verified on 9 November 2026 against Chart.js v4.x. A new major Chart.js version would put every Chart.js callback back at the top of the list.
