Chart.js: Free Javascript charts to use in WordPress

Video versionA video overview of Chart.js in wpDataTables

Chart.jsBasic information about Chart.js and how to create JavaScript charts

Chart.js is an Open Source JavaScript graph library, which renders simple and flexible charts  that work on all platforms.

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

The steps needed to create any chart or JavaScript graph 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 and chart examples which are supported by the wpDataTables plugin, along with the data charts features.

Please note: The Chart.js library has been updated to v4.x, so if you used wpDataChart callbacks, please verify that they still work as they should because the object packing structure has been changed.

Chart.js 3.x migration guide can be found here;

Chart.js 4.x migration guide can be found here.

Chart.js included most changes in 3.x, so make sure to check out both guides, as they are not the same.

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 a comparison of two data sets:

  • One string or date column supported (it will be used as the horizontal axis)
  • Other columns should have numerical values.
  • A minimum of 2 columns is required.

Chart.js Area ChartVisualizing data with coloured areas

The main difference from a Chart.js line chart is that the areas below 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.

Chart.js 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 vertical axis)
  • Other columns should have numerical values.
  • A minimum of 2 columns is 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.
  • A minimum of 2 columns is required.

Chart.js Stacked Column ChartVisualizing data with stacked columns

This chart type is very similar to the Column 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.

Chart.js Bar ChartVisualizing data with horizontal bars

A bar chart uses rectangular bars to present data. Horizontal Bar Charts are used for displaying comparisons between categories of data.

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

Chart.js Stacked Bar ChartVisualizing data with stacked horizontal 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.

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.
  • A minimum of 2 columns is 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 – it’s the radius of the segment that differs, depending on the value.

This type of chart is often useful when we want to show 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

The 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

The Doughnut Chart is very similar to Pie chart, except it has an empty inner part so it’s more like a “sliced donut” rather than 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 simultaneously. 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.
  • A minimum of 4 columns is required.
  • A maximum of 4 columns is allowed.