You create ApexCharts charts in WordPress by choosing the ApexCharts engine in the wpDataTables chart creation wizard and building a chart from your table data, with no coding needed. This page shows every ApexCharts chart type wpDataTables supports, with live examples and the data each one requires.
Table of Contents
ApexCharts is an open-source, modern charting library, and wpDataTables integrates it so you can render interactive ApexCharts charts from your table data without coding.
ApexChart is an Open Source and modern charting library with which you can create beautiful and interactive data visualizations on the website.
wpDataTables is a charts plugin that integrates support for ApexCharts.js and its cool charts, so all users can render these types of charts out of their table data easily, and without a need for any coding.
The steps needed to create any chart and insert it in a WordPress post or page are explained in the guide on creating responsive charts with the chart wizard. Here we will cover the ApexCharts.js examples that are supported by the wpDataTables plugin and their features.
Explore more chart options on the WordPress charts and graphs.
The line chart is a basic chart where the series are rendered as “plain” lines. Line chart with marker custom size (on left) and Line chart with data labels and custom size of tick amount and shadow (on right).
A spline chart is a line chart in which data points are connected by smooth curves.
A step line chart is a line chart in which points are connected by horizontal and vertical line segments.
A column chart is a data visualization where each category is represented by a rectangle.
The stacked column chart extends the standard column chart from looking at numeric values across one categorical variable.
A 100% stacked column chart is a stacked column chart meant to show the relative percentage of multiple data series in stacked columns, where the total of stacked columns always equals 100%.
In this chart type, the series data is rendered in horizontal bars. Presentation of charts with one and multiple series:
This chart type is similar to a basic bar chart, but the series values are “stacked” to the right of each other in horizontal bars.
This chart type is similar to a stacked bar chart, but the total of series values is 100%.
This chart type is similar to line chart, but the area under the line is filled with color.
This chart type is similar to spline chart, but the area under the line is filled with color.
This chart type is similar to stepline chart, but the area under the line is filled with color.
This is a “sliced pie” chart. The first one is a regular pie chart, the second one is filled with monochrome colors and the third one has user predefined palette color. (available options in chart wizard)
This is a “sliced pie” ApexChart example with a gradient. Supports monochrome and predefined palette color as the basic pie chart.
This chart type is very similar to the pie chart, but the inner part is cut, so it’s more like a “donut”. Support monochrome and predefined palette color as the basic pie chart.
This chart type is basically the “donut” pie chart, but it is filled with a gradient. Supports monochrome and predefined palette color as the basic pie chart.
A radar chart is a way of showing multiple data points and the variation between them
This type of chart simply refers to a typical bar chart displayed on a polar coordinate system
This is possible for the Line chart, Spline chart, Stepline chart, Basic area chart, Spline area chart, Stepline area chart, and Basic column chart. On the Series tab, in the chart wizard, there is an available option to change the type and to set a multiple y-axis.
Examples with and without multiple y-axis.
You create synchronized charts by building several charts with a common x-axis and adding a wpDataCharts callback that gives each chart a unique id and the same group.
By default, this chart type is not available in chart wizard in the ApexCharts engine, but with small extensions with wpDataCharts callbacks it is possible.
What you need to do is to create more charts separately in the charts creation wizard with a common x-axis and significant difference in y values. After that, you will insert this example of wpDataCharts callback on the same page where you insert shortcodes from previously created charts.
As you can see in the example below, for each wpDataChartsCallbacks you will provide ids of the charts that you create (example for chart id 1 is wpDataChartsCallbacks[1]). Of course, you will replace chart ids in those callbacks with your own.
You can insert charts as many as you need, in our example we insert 4. Then for each callback you will need to provide a unique id ( for example for the first chart line-1 or chart-1, for the second one line-2 or chart-2 and so on) and the most important part for each wpDataChartsCallback you will need to provide the same group (as in our example “sync”, you can name it as you need). Height for each of them, you can set in chart creation wizard (all are set on 160) and that is it.
Hover over each chart area and you will see sync values for each value on x-axis.
<script type="text/javascript">
jQuery(window).on('load', function(){
if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
wpDataChartsCallbacks[1] = function(obj){
obj.options.chart.id = 'line-1',
obj.options.chart.group = 'sync'
}
wpDataChartsCallbacks[2] = function(obj){
obj.options.chart.id = 'line-2',
obj.options.chart.group = 'sync'
}
wpDataChartsCallbacks[3] = function(obj){
obj.options.chart.id = 'area-1',
obj.options.chart.group = 'sync'
}
wpDataChartsCallbacks[4] = function(obj){
obj.options.chart.id = 'area-2',
obj.options.chart.group = 'sync'
}
});
</script>
The documentation below covers creating and editing charts, the other chart engines, and chart features such as filtering and grouping.
ApexCharts and the other chart engines are included in wpDataTables plans — see wpDataTables pricing.
To get your hands on wpDataTables Lite, please enter your email address below. We’ll send you a direct download link and keep you updated on existing features along with helpful tips and tricks!
