Table of Contents
Video tutorial
ApexChart.js interactive charting
ApexCharts.js is an Open Source and modern charting library with which you can create beautiful and interactive visualizations on the website.
wpDataTables 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 this documentation section. Here we will cover the ApexCharts.js examples that are supported by the wpDataTables plugin and their features.
Apexcharts line chart
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).
- One string or date column supported (will be used for horizontal axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
- Possible to create combination chart with multi y axis.
Apexcharts spline chart
A spline chart is a line chart in which data points are connected by smooth curves.
- One string or date column supported (will be used for horizontal axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
- Possible to create combination chart with multi y axis.
Apexcharts stepline chart
A step line chart is a line chart in which points are connected by horizontal and vertical line segments.
- One string or date column supported (will be used for horizontal axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
- Possible to create combination chart with multi y axis.
Apexcharts column chart
A column chart is a data visualization where each category is represented by a rectangle.
- One string or date column supported (will be used for horizontal axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
- Possible to create combination chart with multi y axis.
Apexcharts stacked column chart
The stacked column chart extends the standard column chart from looking at numeric values across one categorical variable.
- One string or date column supported (will be used for horizontal axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
Apexcharts 100% stacked column chart
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%.
- One string or date column supported (will be used for horizontal axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
ApexCharts basic bar chart
In this chart type, the series data is rendered in horizontal bars. Presentation of charts with one and multiple series:
- One string or date column supported (will be used for vertical axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
ApexCharts stacked bar chart
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.
- One string or date column supported (will be used for vertical axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
ApexCharts 100% stacked bar chart
This chart type is similar to a stacked bar chart, but the total of series values is 100%.
- One string or date column supported (will be used for vertical axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
ApexCharts basic area chart
This chart type is similar to line chart, but the area under the line is filled with color.
- One string or date column supported (will be used for vertical axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
- Possible to create combination chart with multi y axis.
ApexCharts spline area chart
This chart type is similar to spline chart, but the area under the line is filled with color.
- One string or date column supported (will be used for vertical axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
- Possible to create combination chart with multi y axis.
ApexCharts stepline area chart
This chart type is similar to stepline chart, but the area under the line is filled with color.
- One string or date column supported (will be used for vertical axis)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
- Possible to create combination chart with multi y axis.
ApexCharts Pie Chart
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)
- One string or date column supported (will be used to name the slices)
- Other columns should have numerical values.
- 2 columns strictly required.
ApexCharts Pie Gradient Chart
This is a “sliced pie” chart with a gradient. Supports monochrome and predefined palette color as the basic pie chart.
- One string or date column supported (will be used to name the slices)
- Other columns should have numerical values.
- 2 columns strictly required.
ApexCharts Donut 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.
- One string or date column supported (will be used to name the slices)
- Other columns should have numerical values.
- 2 columns strictly required.
ApexCharts Donut Chart With Gradient
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.
- One string or date column supported (will be used to name the slices)
- Other columns should have numerical values.
- 2 columns strictly required.
ApexCharts Radar Chart
A radar chart is a way of showing multiple data points and the variation between them
- One string or date column supported (will be used to name the slices)
- Other columns should have numerical values.
- A minimum of 2 columns is required.
ApexCharts Radial Bar Chart
This type of chart simply refers to a typical bar chart displayed on a polar coordinate system
- One string or date column supported (will be used to name the slices)
- Other columns should have numerical values.
- 2 columns strictly required.
Combo Charts
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.
Synchronized Charts
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>
