In this article we're going to discuss adding interactive charts/graphs to your WordPress posts. If you ever have the need to visually display data to your viewership, chances are you've included a static chart. This could come from an Excel screenshot, on line chart making application, or maybe even a simple sketch.

However, static images are not interactive, and sometimes your charts and graphs on WordPress simply don't convey the information that they need to. We came across this issue when including graphs in several of our statistical comparison posts -- we wanted to display more information in a modern way. to do this, we incorporated interactive charts on our WordPress posts.

Here's how to do that yourself.

Use Cases

If you're a website that needs to display visual data in an interactive manner, this guide is for you.

• For example, if you're selling products and need to visually compare/specify them numerically, using interactive charts is a good idea.
• If you do statistical comparisons, an interactive chart could help you convey your message more effectively.
• If you publish scientific research, using an interactive chart pushes you ahead of your competition.
• If you write stock analysis articles, and interactive graph could provide a essential supporting information on your thesis.

The use cases of using these type of visual interfaces in your WordPress website can go on and on.

The Ways To Add Interactive Charts To WordPress

There are a couple of ways that you can add charts and graphs to your WordPress website. Depending on your needs, one method maybe better for you than another.

The first way that you can add an interactive graph or chart to WordPress is by using a third party JavaScript library called Chart.JS. This is simple, quick, and easy. It also doesn't involve installing a plugin which could slow down the loading time of your website.

However, you can only go so far with this method, and if you have a lot of data to process, using a third party plugin Will help you be more efficient and organized.

If you're a data heavy business that uses interactive charts and graphs in all of your WordPress posts, then we would recommend checking out wpDataTables.

In this post, we're going to take a look at both of these methods in depth. By the end of it, you should have a good understanding of how to add interactive charts and graphs to your WordPress website.

If you're on Elementor, you can also use Element Pack Pro which includes a Widget that allows you to create visual charts directly from the editor (Here's a tutorial on how to do that).

Using Chart.JS In WordPress

Using Chart.JS in WordPress is a quick, simple, and effective way to add interactive graphs and charts. this is the method that we use on our comparison articles, like Better Bluehost Alternatives (clicking that link will bring you directly to the chart).

Chart.JS is an open source library that allows you to create HTML5 charts and embed them on your website. There are dozens of chart types, multiple axes, and support for animations and transitions. If you're willing to get your hands dirty and familiarize yourself with the library, this will be able to cover all of your needs.

Even if you're not familiar with JavaScript, this is super easy to use as we will explain below. It works very well with WordPress Version 5+ and plays nice with the Gutenberg editor as well.

Here's an example chart that we built using Chart.JS.

Data grabbed from Better Bluehost Alternatives Article

To do this, we pasted some code in a Gutenberg HTML block. this code imported the JavaScript library, created an HTML object, and then used JavaScript to populate that graph with the statistics that we supplied.

Here's the code.

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Vultr', 'DigitalOcean', 'Cloudways', 'Bluehost'],
    datasets: [{
      label: 'Fully Loaded Time',
      data: [2.2, 2.6, 2.4, 4.3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
}
);
</script>Code language: HTML, XML (xml)

Simply take this and paste it into a Gutenberg HTML block.

Here are the specific elements that create the interactive graph in WordPress (highlighted above).

• Line 1 imports the Chart.JS script into our WordPress website using a CDN. This means that we don't need to install, host and maintain the JavaScript ourselves.
• Line 2 is the HTML5 element that actually embeds the chart into our WordPress page/post.
• Line 3 is JavaScript, and connects the code with the HTML5 element identifier. You can choose to keep “mychart” as the ID, or change it to match your own branding. Keep in mind, if you're incorporating multiple charts, this identifier needs to be different for each one.
• Line 6 specifies the type of chart that we are using in the website.
• Line 8 labels the data that we are using in the chart. These labels display on the respective axis.
• Line 10 and 11 display example datasets. Depending on the type of chart and amount of data that you are displaying, these lines and the lines following will change.
• The following lines dictate what colors each of the data sets will use when displayed as a bar in the chart.
• Line 31 ensures that the data set will begin at zero. If this is not enabled, the chart will automatically scale to the range of data displayed. Read more about these options, as well as additional options, in the Chart.JS documentation.

While it's fairly simple to understand, the Chart.JS documentation contains a lot of information that's easy to learn and comprehend. Check it out here:

Chart.JS Is an extremely expandable library that offers many different types of charts. We only use it for line and bar charts, but you can also create complex charts like this:

If you're looking for a quick and simple way to add interactive charts and graphs to your WordPress website, this is your method. It's also extremely expandable if you're willing to learn the library, and works very well with WordPress (and you don't need a plugin).

However, WordPress shines as a content management system, and if you're working with multiple datasets or many points, using a third party plugin that makes use of the database functionality that WordPress has to offer could keep you more organized and efficient with your workflow.

Say that you are a review site and have many data points comparing hosting offerings. Each post has its own unique data, which needs to be displayed in a table as well as multiple charts. Instead of creating a chart.JS instance for for each graph (which means that there's no central place to manage the data), using the second method in this article could be a much better option for you.

WPDataTables

If you're looking for an all-in-one solution to manage and display data on the front end of your WordPress website, wpDataTables is the solution for you. It's very expandable and can create super interactive charts and tables. Take a look at some examples:

A big benefit with this solution is the ability to centrally manage all of your data and using intuitive back end editor to do this. On the front end, you can also add advanced search and filter features which don't come with Chart.JS.

There's a lot to cover with this plugin, but we're going to run through the basic workflow of creating a table and chart, then embedding it into your WordPress site.

After installing the plugin, click on create a new chart in the sub menu of the admin menu link for WPDataTables. Then, select your chart. For this example, we're going to be making a 3D column chart.

You then need to select data to populate your chart with. If you've already created a data table, you can easily use that to populate your chart. If you have not yet created a data table, you'll need to do that to use the charts. Simply click the create a chart menu link, import your data (There are multiple ways to do this, see the screenshot below) and create the table. This table can easily be incorporated into your WordPress blog post by using a shortcode.

Once you've selected the table data that you want to populate your chart with, select a row range, filter the data if needed, And choose columns from the data table that will be used in your chart.

The chart will automatically be generated, and you'll be greeted with a screen that you can use to edit the general styling and layout of the data. For example, if you want to change the text, coloring, size, orientation, or other attributes of your graph, this is the screen that you would use to do so.

There are dozens of individual settings that can be changed, everything from tooltips to the ability to export data from the chart.

Once finished creating your chart, you can easily incorporate it into your WordPress website by pasting a short code or adding it via Gutenberg block.

Conclusion

This article should have presented you with two main ways to incorporate interactive charts and graphs into your WordPress website. If you're looking for a way to visually display data to your visitors, manually adding a Chart.JS graph into WordPress, or using the WPDataTables plugin are two great ways to do this.

We like using the chart.JS method because it's lightweight, free, and fairly simple to incorporate. If you're a company that deals with a lot of data and charts, then taking a look at WPDataTables is a good idea. As always, if you have any questions about this topic, leave them in the comments section.