Do you want to add bars and charts to your WordPress website?
By adding visual aids like graphs, bars, or pie charts, you can show your data in a way that is visually appealing and easy to understand for users.
In this article, we will show you how to easily create bars and charts in WordPress with Visualizer.
The Problem With Bars and Charts in WordPress
There are many plugins to add bars, charts, and graphs to your content. However, the most common complaint we have heard from our users is that these plugins are usually too complicated to use.
Some of these plugins even expect users to add data inside a shortcode in extremely complicated formats.
Instead of using those plugins, many users end up creating charts in their office applications and converting them into an image for their WordPress websites.
This could work if you are planning to never change it. However, an image is no substitute for an interactive chart where helpful data appears when the user clicks over a particular section.
An ideal charts and graph solution would allow you to:
- Add data from a data source on your computer or the web.
- Populate charts, pies, graphs, and bars using your data.
- Create beautiful, interactive, colorful, and mobile-friendly charts.
- Most importantly, it should let you update the data whenever you want.
Adding a chart with the Visualizer will help you improve your website SEO, increase user engagement, and even make your data easy to understand.
Having said that, let’s see how to easily add bars and charts to your WordPress site.
How to Create Bars and Charts in WordPress with Visualizer
You can easily create bars and charts with WordPress using the Visualizer plugin. It is the best WordPress data visualization plugin on the market that lets you create interactive data visualizations for your site.
It even has a free plan that you can use to create bars and charts.
First, you need to install and activate the Visualizer: Tables and Charts Manager for WordPress plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Note: This tutorial will use the free version of the plugin. If you want to unlock the pro features, then you can buy a paid plan.
Upon activation, you must visit the Visualizer » Add New Chart page from the WordPress dashboard.
Once there, choose the type of chart you want to create, such as a table, pie, line, or bar chart. Then, click the ‘Next’ button.
This will take you to the next step, where you must click the ‘Choose File’ button to import your Excel spreadsheet data from the computer.
If you have saved your Excel or Google spreadsheet as a CSV file, then you can import it by expanding the ‘Import data from URL’ tab.
Once you have done that, click the ‘Import from CSV’ button. Then, you can enter your CSV file URL to embed the file.
Keep in mind that your CSV file must have column names in the first row and data type in the second row. The plugin supports these data types: string, number, boolean, date, time date, and time of day.
Please take a look at this example file we have created in Google Sheets.
If you are creating a CSV file using a text editor, then take a look at this example CSV file:
However, if you have your chart data saved as a spreadsheet on Google Drive, then you can add it to your chart without exporting it.
First, open your data file in Google Spreadsheets and then click on the File » Share » Publish to the web link.
This will bring up a popup where you must choose how to publish this document.
Simply select the Comma Separated Values (.csv) option from the dropdown menu and click on the ‘Publish’ button.
You will now see the publicly available URL of your sheet as a CSV file. You need to copy this URL and go back to the Visualizer chart.
You will have to add this URL in the ‘Import from CSV’ field.
When you enter the URL, the plugin will fetch your CSV file and show a live preview of your chart.
Now, you can switch to the ‘Settings’ tab from the top to configure the general settings like font styles, number format, size and placement, size settings, and so much more.
Once you are done, click the ‘Create’ button at the bottom of the prompt.
Adding a Chart or Graph in WordPress Posts/Pages
Adding a chart or graph to your WordPress posts and pages is as simple as adding images.
First, open a new or old page/post where you want to add the pie chart. Once you are there, click the ‘Add Block’ (+) button at the top left corner of the screen.
This will open the block menu from where you have to find and add the Visualizer Chart block.
Once you do that, click the ‘Display an Existing Chart’ button in the block itself.
This will open a new prompt in the block where you have to select the pie chart that you just created.
Finally, click the ‘Publish’ or Update’ button to store your settings.
Now, you can visit your WordPress site to view the pie chart in action.
Editing Your Visualizer Charts in WordPress
You can edit and change your charts anytime. Simply visit the Visualizer » Chart Library page from the WordPress dashboard.
From there, you can clone a chart, delete it, or edit its visual settings using the icons under the chart name.
Updating data for an existing chart without changing the chart is also quite easy with Visualizer.
If you added data from a Google spreadsheet, then all you need to do is update the data in your spreadsheet, go to the File » Share » Publish to the web option, and republish your spreadsheet.
Your changes will automatically be reflected in your chart.
On the other hand, if you uploaded a CSV file, then you need to update the CSV file on your computer. Once done, select the chart that you want to update and click on the edit link below the chart.
In the ‘Import CSV file’ section, simply upload your new CSV file. Changes in the data will automatically reflect in posts or pages where you have inserted that chart.
We hope that this article helped you add bars and charts to your WordPress site. You may also want to see our beginners’ guide on how to customize colors on your WordPress website and our expert picks for the must-have WordPress plugins for business websites.