Chart.js: Free Javascript charts to use in WordPress

Table of Contents

Video tutorial

Chart.js

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 Chart

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 Chart

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

Chart.js Column Chart

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 Chart

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 Chart

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

Chart.js Radar Chart

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 Chart

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 Chart

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