Please wait...

Charts.js in WordPress

Video versionA video overview of Chart.js in wpDataTables

Chart.jsBasic information about Chart.js

Chart.js is an OpenSource charts library, which renders simple and flexible charts  that work on all platforms.

wpDataTables plugin allows inserting Chart.js in WordPress posts or pages with a simple step-by-step wizard.

Steps needed to create any chart and insert it in to WordPress post or page are explained in this documentation section (they are same for any rendering engine – Google Charts, HighCharts or Chart.js). Here we will cover Chart.js types which are supported by wpDataTables plugin, and the chart features.

Chart.js Line ChartVisualizing data with plain lines

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the comparison of two data sets:

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

Chart.js Area ChartVisualizing data with coloured areas

Main difference from a Chart.js 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.

Chart.js Stacked Area ChartVisualizing data with stacked areas

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 vertical axis)
  • Other columns should have numerical values.
  • Minimum 2 columns required.

Chart.js Column ChartVisualizing data with columns

A column chart is a way of showing data as columns. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

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

Chart.js Radar ChartVisualizing data in a radar

A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.

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

Chart.js Polar ChartVisualizing data in a Polar area

Polar area charts are similar to pie charts, but each segment has the same angle – the radius of the segment differs depending on the value.

This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.

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

Chart.js Pie ChartVisualizing data with pie slices

Pie Chart renders the chart in a form of “sliced pie” where each slice stands for one series entry:

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

Chart.js Doughnut ChartVisualizing data with Doughnut chart

Doughnut Chart is very similar to Pie chart, but it has an empty inner part so it’s more like a “sliced donut” rather then a “sliced pie”:

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

Chart.js Bubble ChartVisualizing data with a Bubble chart

A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.

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

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.