How to Create Beautiful Charts and Graphs in WordPress

Share on facebook
Share on twitter

Would you like to create charts and graphs within the content of your WordPress site? These visual aids are powerful tools that help you display data in meaningful ways to your readers. You can go a long way toward helping people truly understand your data with simple graph, bar, line, and pie charts.

There are lots of plugins to add charts and graphs to WordPress, but most are cumbersome and complicated. Some require you to complete endless menus or input long strings of data into shortcodes.

Rather than deal with the hassle, many users opt to make a quick chart in some other app and save it as an image. This method is crude and prone to error because you have to change the image every time there’s new data. A WordPress chart, however, will update whenever data is submitted through a form.

In this article, we’re going to show you how to create charts and graphs in your WordPress back end using GFChart, a simple-to-use extension for the popular Gravity Forms plugin. We’ll also offer some best practices to make your charts clear and effective.

You can go a long way toward helping people truly understand your data with simple graph, bar, line, and pie charts. Click To Tweet

Why Use GFChart for Your Graphs and Charts?

Before we jump into the tutorial, we’d like to mention why GFChart is the best plugin to add charts and graphs to WordPress:

  • Most plugins require you to enter your data manually. GFChart compiles data submitted through forms, which means anyone with access to the form can supply data to your charts and graphs.
  • Most plugins require you to set up a MySQL connection to WordPress’ database. This is complex and stressful if you aren’t familiar or comfortable working with your web host or database directly.
  • GFChart integrates with other functionality-extending tools to get more value from your charts, such as Gravity PDF and GravityView.
  • GFChart works with Gravity Forms, the most popular WordPress forms plugin. If you use forms regularly, you’ve undoubtedly heard of Gravity Forms.

How to Create Charts and Graphs Using GFChart

This tutorial will walk you through the process of creating a professional and interactive graph/chart in WordPress.

Step 1: Grab the Required Plugins

Before you can make your own charts, you need two plugins: Gravity Forms and GFChart. Both come with a small cost, but the reliability and automation they provide are priceless.

Step 2: Create a Gravity Form

Next, set up a Gravity Form and submit some entries. If you’re a Gravity Forms user, you may already have some existing forms with entries. If you’ve never created a Gravity Form before, read their full guide (it’s pretty simple).

Step 3: Create the Chart/Graph

Your next step is begin building the form. Click Forms > Chats/Calculations in your WordPress backend to reach GFChart’s graph builder. Click Add New to get started.

Charts and graphs in WordPress

Next, give your new chart a name. We recommend using a unique name that won’t conflict with other charts. This will help you find it in the future if you need to make changes to it. Avoid vague names like “chart 6” or “May 12 chart.”

Once you’ve chosen a name, select the Gravity Form from which the chart will pull data. Then click Create Chart/Calculation.

Charts and graphs in WordPress

Step 4: Configure Your Chart/Graph

In the chart builder, you’ll see four tabs: Design, Select Data, Customiser, and Preview. Let’s go through each to configure your chart.

In the Design tab, you’ll need to choose the format of your chart. There are several options available. More options will appear below once you choose a format. After configuring the options, click the blue Select Data button to save and move to the next tab.

Charts and graphs in WordPress

The Select Data tab is where you’ll map the individual elements of your chart. On a bar graph, for instance, you’ll need to declare which value appears on each axis. Click the Customiser button when you’re finished.

Charts and graphs in WordPress

The Customiser tab is where you configure the chart’s design. How you customise these settings will depend on the design of your website and where you intend to display the form. We recommend configuring the colors to match your site’s theme. Click the Preview button when you’re finished.

Charts and graphs in WordPress

As you can imagine, the Preview tab is where you can preview your chart before publishing it. Use this opportunity to ensure that it displays data correctly and looks professional. If you aren’t happy with the chart, you can always navigate back to other tabs and make changes. Once you’re satisfied with the chart, click Update.

Charts and graphs in WordPress

Step 5: Publish the Chart to a Page or Post

In order to make your chart/graph visible on your site, you now have to add it to a page or post. Fortunately, this is super simple. There are two ways to do this.

The easiest way is to use the GFChart Gutenberg block. Click the plus icon and choose the Chart block. When the block appears in the content editor, use the drop-down menu to select the chart you just created.

Charts and graphs in WordPress

If you don’t use the Gutenberg editor, you can embed a chart using a shortcode. GFChart generates a shortcode for each chart. Find your chart’s shortcode from the right side of the chart editor.

Charts and graphs in WordPress

Then paste the shortcode into any WordPress editable section. You can add your chart to pages, posts, and even widget areas.

Charts and graphs in WordPress

Step 6: Preview Your Page

Your final step is to view the chart on your page to ensure it looks as you intend. The chart itself will look exactly like its appearance in the chart builder’s preview tab, but you’ll need to make sure it fits well into your page design.

Best Practices for Creating Charts and Graphs

Now that you understand how to create a chart or graph in WordPress, let’s go over some best practices to make your forms truly effective.

1. Limit yourself to the data points that serve the chart’s purpose

It may seem helpful to have lots of data points on the same chart, but too many can quickly become confusing, especially if some don’t relate to why the viewer is exploring the chart in the first place. Consider the person who will be consuming the data, their needs, and what will help them make decisions and take action.

2. Provide context for the chart/graph’s information

Don’t be afraid to add some supporting text below your chart to help the viewer understand. For instance, you might explain why a certain value is especially high or low. You could also help the viewer understand what steps they should take based on the chart’s information.

3. Avoid unnecessary styling or embellishments

Charts are the epitome of practicality. Don’t get fancy with unnecessary borders, colors, or design elements. Remove anything that doesn’t serve the chart’s purpose.

4. Use the right chart format for the job

When you build a graph/chart to display your data, choose the format that most accurately conveys the information. Bar graphs are best for comparing categories. Line graphs are used to show trends over time. Pie charts show the relationship of categories in regards to the whole. Using the right chart will help your viewers understand the information intuitively.

5. Start your Y-axis at zero

This is called “zeroing your chart.” If the Y-axis of a bar graph doesn’t start at 0, it’s very easy to misrepresent your own data. For instance, this graph implies that the 2015 category is three times the size of the 2010 category. But it’s actually only 8.5% larger. It looks bigger because the Y-axis doesn’t start at 0.

Charts and graphs in WordPress

6. Don’t be afraid to use a simple table

Sometimes the best way to present data is not with a visualization at all. Instead, a table may be your best option. This is especially true if your readers will use your presentation to look up specific values.

Wrapping Up

Data visualizations like charts and graphs are almost always more effective than raw data. Follow the steps and best practices we outlined above to create visualizations from your forms data. Your team, readers, fans, stakeholders, or anyone else who views your content will thank you.