Back to school sale! Save up to 50%
Grab Yours

Using the Highcharts library in WordPress with wpDataTables

Highcharts interactive charting

Great NEWS! From version 3.0.4 of wpDataTables , the HighCharts library in our plugin is free for commercial use. If you need to use charts made with wpDataTables on a commercial site, you DON’T NEED to purchase a separate license. Read more about licensing of Highcharts here.

HighCharts is an excellent charts library which allows exceptional rendering and animated charts.

wpDataTables integrates support for HighCharts 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 a chart and insert one on a WordPress post or page are explained in this documentation section. Here we will cover HighCharts types which are supported by wpDataTables plugin, and their features. You will also see HighCharts demo examples as a preview of what you can do with the HighChart API.

Each type has a demo provided.

HighCharts line chart

The line chart is a basic chart where the series are rendered as “plain” lines:

  • 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 multy y axis.

HighCharts basic area chart

The main difference between a HighCharts Basic Area Chart and a HighCharts Line Chart is that the areas below the lines are colored in a selected color:

  • 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 multy y axis.

HighCharts stacked area chart

This chart type is very similar to the simple area chart, the difference being that series values are “stacked” above each other:

  • 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.

HighCharts basic bar chart

In this chart type, the series data is rendered 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.
  • Possible to create combination chart with multy y axis.

HighCharts 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 the 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.

HighCharts basic column chart

This chart type renders the series in vertical columns:

  • 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 multy y axis.

HighCharts stacked column chart

This chart type is very similar to the basic column chart, but the series values are “stacked” on top of one another:

  • 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.

HighCharts Pie Chart

This is a “sliced 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.

HighCharts Pie with gradient chart

Same as the previous chart, but the “pie” is colored with a gradient:

  • One string or date column supported (will be used to name the slices)
  • Other columns should have numerical values.
  • 2 columns strictly required.

HighCharts 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”:

  • One string or date column supported (will be used to name the slices)
  • Other columns should have numerical values.
  • 2 columns strictly required.

HighCharts 3D Pie Chart

Basically, the same as the simple Pie chart, but rendered in 3D:

  • One string or date column supported (will be used to name the slices)
  • Other columns should have numerical values.
  • 2 columns strictly required.

HighCharts 3D Donut Chart

Same as the Donut chart, but rendered in 3D:

  • One string or date column supported (will be used to name the slices)
  • Other columns should have numerical values.
  • 2 columns strictly required.

HighCharts 3D Column Chart

Same as column chart, but rendered in 3D:

  • 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.

HighCharts Scatter Plot

According to Wikipedia, a Scatter plot “is a type of mathematical diagram using Cartesian coordinates to display values for two variables for a set of data”:

  • Max of one string or date column supported (it will be used for horizontal axis), but it is probably best to use numeric-only columns.
  • Other columns should have numerical values.
  • A minimum of 2 columns is required.

HighCharts Treemap chart

This chart type represents selected data in a Tree structure, where each node has size and color according to the given values.

  • One string or date column supported.
  • Other columns should have numerical values.
  • 2 columns strictly required.

HighCharts Treemap Level Chart

The main difference between a Treemap chart and a Treemap level chart is that Treemap level chart has one more level, so you can show additional data. Here we showed car sales for 2016 and 2017. After you click on a car type, another level will appear that will give you additional info about sales in 2016 and 2017 separately.

  • One string or date column supported.
  • Other columns should have numerical values.
  • A minimum of 3 columns is required.

Combo Charts with multiple y axis

From version 2.2 it is possible to create charts with multiple y axis in order to show different units on the same chart. This option is available for Line chart, Spline chart, Basic area chart, Basic bar chart and Basic column chart.

If you want to show the table with different units, create the chart with desired columns from a table, go to Series Setting of the chart and enable the option Show vertical axis. In this example, we chose two different units, but you can choose more, and for each one of them you will see this option. Also, you can change a chart type for those types that are mention above and also for Polar and Spiderweb Chart.

Polar chart

The Polar chart offers you the option to show the data in a two-dimensional chart where a series is represented by a closed curve with points in the polar coordinate system, and each data point is determined by the distance from the pole.

  • 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 a combination chart

Spiderweb chart

The Spyderweb chart is similar to a Polar chart just in a form of a spider web. Here as well series is represented by a closed curve with points in the coordinate system, and each data point is determined by the distance from the pole.

  • 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 a combination chart.

Funnel Chart (NEW)

A funnel chart helps you visualize a linear process that has sequential, connected stages. For example, a sales funnel that tracks customers through stages: Lead > Sales Call > Follow-up > Conversion > Sale

  • One string or date column supported
  • The other column should have numerical values.
  • 2 columns are strictly required.

3D Funnel Chart (NEW)

The same as a funnel chart, but rendered in 3D:

  • One string or date column supported
  • The other column should have numerical values.
  • 2 columns are strictly required.

BUT FIRST!

Subscribe to our Newsletter

Be the first to learn about updates and new features. Once you have provided your email address, the download will commence shortly


By continuing, I accept Privacy Policy and T&C
Mail Box