Using the ApexCharts.js library in WordPress with wpDataTables

Video versionA video overview of Apex Pie charts in wpDataTables

ApexChartjs interactive chartingBasic information about ApexCharts.js library and how making charts online can be easy

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 chartVisualizing data with plain lines

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 chartVisualizing data with smooth lines

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 chartVisualizing data with step lines

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 chartVisualizing data with columns

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 chartVisualizing data with stacked columns

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 chartVisualizing data with 100% stacked columns

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 chartVisualizing data with bars

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 chartVisualizing data with stacked bars

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 chartVisualizing data with stacked bars

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 chartVisualizing data with area's

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 chartVisualizing data with spline area's

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 chartVisualizing data with stepline area's

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 ChartVisualizing data with pie slices

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 ChartVisualizing data with pie slices with gradient

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 ChartVisualizing data with donut slices

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 GradientVisualizing data with donut slices 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 ChartVisualizing data in a radar

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 ChartVisualizing data in a radial bar

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 ChartsVisualizing data in combination chart and multiple y axis

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 ChartsVisualizing data in more charts with synchronization

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>