Please wait...

Highcharts in WordPress

Video versionA video overview of Highcharts in wpDataTables

HIghcharts charts

Highcharts is an excellent charts library which allows rendering really nice and animated charts.

wpDataTables integrates support for HighCharts so all users could render such charts out of their table data easily without any coding.

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.

Each type has a demo provided.

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

HighCharts line chart

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.
  • Minimum 2 columns required.

HighCharts basic area chart

Main difference from a HighCharts line chart is that the areas below lines are colored in a chosen color:

  • One string or date column supported (will be used for horizontal axis)
  • Other columns should have numerical values.
  • Minimum 2 columns required.

HighCharts stacked area chart

This chart type is very similar to the simple area chart, the difference is 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.
  • Minimum 2 columns 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.
  • Minimum 2 columns required.

HighCharts stacked bar chart

This chart type is really similar to a basic bar, 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.
  • Minimum 2 columns 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.
  • Minimum 2 columns required.

HighCharts stacked column chart

This chart type is very similar to the previous (basic column chart), but the series values are “stacked” on top of each other:

  • One string or date column supported (will be used for horizontal axis)
  • Other columns should have numerical values.
  • Minimum 2 columns 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 previous, 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 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.
  • Minimum 2 columns 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 (will be used for horizontal axis), but probably better to use numeric-only columns.
  • Other columns should have numerical values.
  • Minimum 2 columns required.

Never miss new features!

Join 2000+ 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.

We never spam or disclose your address to anyone.