Please wait...

Using the Highcharts library in WordPress with wpDataTables

Video versionA video overview of Highcharts in wpDataTables

Highcharts interactive chartingBasic information about Highcharts library and how making charts online can be easy

Unlike other wpDataTables elements, the HighCharts library isn’t free for commercial use. If you need to use it on a commercial site, you MUST purchase a separate license. Refer to the HighCharts licensing page for more information.

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

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.

HighCharts basic area chartVisualizing data with colored lines

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.

HighCharts stacked area chartVisualizing data with stacked areas

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

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.

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

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.

HighCharts stacked column chartVisualizing data with stacked columns

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

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

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

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

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

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

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 PlotVisualizing data in a 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.

Never miss new features!

Join 3000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

By clicking "subscribe" you consent that the information you provide via this form will be securely processed and stored in compliance with EU privacy laws (GDPR).
This  information will be used to send you newsletters as well as pre-populate any forms, should you want to edit your newsletter preferences.
You can always use this link to unsubscribe from the newsletter. You can see our Privacy Policy here.