How to Create Charts in WordPress With a Free Plugin

Trying to create charts in WordPress? 📊

While the built-in WordPress Table block gives you some basic options for creating tables, it’s limited in what it can do, and you can’t visualize that data in any kind of chart or graph.

With the free Visualizer plugin, you can create much more flexible charts and graphs. These charts are interactive, responsive, and colorful, and they will look great on any device. Using just the free version, you can import data from various sources, including:

• CSV
• Excel files
• Google spreadsheets
• URL

Then, you can create different types of charts and graphs including pie, line, bar, maps, and lots more.

Your visitors can interact with your charts and you get tons of options for controlling their style and display.

The premium version adds even more features such as database import, an in-browser Excel-like editor, and more chart types.

How to create charts in WordPress with Visualizer: A step-by-step tutorial

Here’s how to create charts in WordPress with the Visualizer plugin, in six easy-to-follow steps:

1. Install the free Visualizer plugin
2. Create a new chart
3. Choose your chart type
4. Import/configure your chart data
5. Configure your chart styles/settings
6. Embed your chart

1. Install the free Visualizer plugin

The first thing to do is to visit the WordPress repository and download, install and activate the plugin:

If you’re a newbie and need help installing a plugin, you can check out this post.

2. Create a new chart

Next, head to the WordPress menu and click on Visualizer. From here, there are two ways to go about building charts in WordPress. One, click on Add New Chart in the menu:

OR, open a new page/post, find the Visualizer item in the Gutenberg block editor and click on it:

You then have a choice between Create a new chart and Display an existing one. If you already have charts in the Visualizer library, choose to display existing charts. Since we are creating our first chart, let’s click on Create a new chart.

3. Choose your chart type

In the screen that opens, you can choose the type of chart you want from among 15 chart types:

For the purposes of this tutorial, we’ll go with the first option, the Table chart, and then click Next:

4. Import/configure your chart data

This is the screen where all the action happens. To build your chart here, you’ll need to do two things – import data from a source to populate your chart, and then tweak settings to make the chart attractive and match with your website design or brand.

You can import data from file or URL with the free version. Importing data from other charts, WordPress, database or manual addition are all included in Pro options:

The data should be in CSV format.

Now, if you’re not familiar with creating a CSV file, there’s a sample file included that you can simply download and substitute values with your own. Or, if you wish to access data via a URL or a Google spreadsheet, you can do that, too.

5. Configure your chart styles/settings

With your data in Visualizer, go on to customize your table by clicking on the Settings tab:

As you can see, there’s a lot you can change here to customize your table to match your website or brand:

Under General Settings you can give a title and description to your chart, save it as an image to your media library, and enable lazy loading.

Move on to Table Settings to make your table responsive, paginate it, freeze the Header and Footer, enable sorting and horizontal scrolling, and set the table height and number of rows per page. 

That’s not all – you can customize the color, text, and background for the rows, columns, and cells. Lastly, you can enable visitors to print or copy the chart to clipboard, or download the chart as a CSV or Excel file by enabling these frontend actions. If you’re a Pro user, you can also restrict access to the charts in WordPress by customizing permissions. 

After you’re done customizing the chart, click Save Chart. This is how my chart appears in the block editor:

And, this is how it appears in the Preview tab:

6. Embed your chart

With the chart saved in the Visualizer, you can reuse it freely by pasting the shortcode anywhere you want. You can also edit, clone, export or trash the chart: 

Repeat these steps to create additional charts

By following the same steps, you can create a Pie or Donut chart as well (or all of the other chart types). For this purpose, at Step 3, choose Pie Chart (instead of Table) and proceed thereafter in a similar fashion:

The data source CSV file has been modified to show the number of sunny days for only one city, since the Pie chart is visualized in percentages.

Below is a live example of the newly created pie chart. Try hovering over the individual slices of the chart – it reveals details of the percentage of days it represents:

Having created two types of charts, you can now see how easy it is to create different types of charts in WordPress with Visualizer and how you can use it to visualize data and convey a point effectively.

Start creating charts in WordPress today 🏁

It can be of immense use to websites that use data to put across stories, monitor results or identify trends. It gives a quick overview of the situation it covers, helping readers consume data in an easily digestible format.

Any industry or website that deals with data – clinical, administrative, banking, finance, labor, human resources, research studies, education – can use charts and graphs to make things easier for themselves and their readers.

👉 If you’re ready to get started, install the Visualizer plugin today.

Do you still have any questions about how to create charts in WordPress? Let us know in the comments!