How to Add Charts in WordPress Site?

Sometimes you need to explain the topic to your users with lots of statistical data. It will bore your reader, if you try to show the technical data analysis in a text, image or video format. Though you can use tables, it has limitations like stuffing the content in smaller area. The best way is to use charts like you use on PowerPoint or Keynote presentations. Chart is a useful tool to showcase the graphical representation of your data analysis. Whether you are compiling research data or sharing data analysis on a given subject, there is no better tool to present such information than charts.

Advantages of Adding Charts in WordPress

You may be wondering why you need to add charts on your site while you can create the charts with a powerful graph building tool like Excel and insert a screenshot of the same into your post/ page. While this method works, it may not be the best option in many situations.

Embedding charts in WordPress offer:

A single consolidated area for all your graph development tasks.
A quick way to edit the charts to update any changes.
Extra interactive features.

Fortunately, there are numerous WordPress plugins to simplify the process of publishing charts on your website. In this post, we will focus on how you can add charts in WordPress site with Visualizer WordPress plugin. We will also, explain other options with WPBakery Page Builder and Bootstrap progress bars options.

Install and Activate Visualizer Plugin

Go to “Add New” plugin and search for ‘Visualizer’. Install and activate the plugin.

The plugin is free, but you can upgrade to Pro version to get more features. It supports a variety of charts including pie charts, area charts and line graphs among others.

Create and Add Chart in WordPress

In order to add new charts, go to the “Media” menu on your dashboard and select “Visualizer Library”.

If you already have charts in the library, they will be displayed under different tabs depending on the type.

To create a chart, click the “Add New” button at the top of the Visualizer page.
Select the type of chart/graph you want to create and click “Next” at the bottom of the page.

Under the “Chart Data” section, you can import the data from a CSV file or URL. Depending on where you have stored the data, choose one of the options.

For our case, we have the data in a CSV file. So we browse for the file and click “Import”.

The plugin will automatically generate the chart for you.

Customizing Chart Settings

At the bottom of the chart data options, click the “Advanced” setting link to open the chart settings.

This opens the “Chart Settings” panel on the right, providing various options to customize the chart.
Under the “General Settings”, you can add a chart title, specify the font family, size and color, as well as the legend position.

Expand the “Pie Chart Settings” options and for the 3D settings select “Yes” if you want a 3D chat.
You may also set the slice text content, start angle and order of categories among other chart elements.

You can also configure other settings such as:
Layout and Chart Area – Resizing the chart area, background color and margins among other options.

Front-End Actions – Allow/ lock printing, copying or downloading chart or data.
Residue settings – to enhance chart visibility and so on.
After customizing the settings, Click the “Create/ Save Chart” at the bottom of the page.

SEO Offer: Optimize your site with Semrush Pro special 14 days free trial.

Embedding Chart in WordPress Page or Post

Add a new or open existing post in the visual editor. Select the location where you want to display the chart.
Add a new block and select “Visualizer Chart” under the common blocks.

If you are using the classic post editor, you can click on the visualizer chart icon on the toolbar.

Click on the “Display an existing chart” option to show one of the previously created charts.

Pick the chart you want to embed from the chart library list.

Click “Done” at the bottom of the block. You can also adjust the chart settings from the right sidebar panel.

Now click the “Preview” button to check the chart and then “Publish” to publish the chart.

Note:

You can create multiple charts for the same data set.
The Visualizer Pro allows users to import data from a database, other charts, websites and manual entry.

2. Create Charts Using WPBakery Page Builder

There are many other options for your like using Google Charts or using other plugins like WPBakery Page Builder. The Visual Composer or WPBakery Page Builder plugin is offered as a bundled plugin with many popular themes. It offers multiple type of charts with animations. If you have this plugin, it is very easy to insert charts in minutes.

On any page or post, you can click on “Add Elements” and search for “chart”. You can find different charts like pie, round, line and circle. Choose the chart element and insert it on your site.

You can edit the chart and add your custom values to create the chart instantly. It will just take few minutes to create chart with this plugin.

3. Using Bootstrap Progress Bars

Some of the WordPress themes use Bootstrap framework as a base. If you have a Bootstrap based WordPress theme then you can use the standard progress bars component to insert horizontal progress or skill bars on your site. Below is an example of how Bootstrap 4 progress bars will look like:

Summary

Charts and graphs can boost the quality of website content, increasing the visitors’ experience. They can be used to summarize complex data, research findings or any other narrative that could be boring for readers. The Visualizer plugin enables you to create, manage and insert interactive charts in WordPress pages/post within a minute. The plugin is user-friendly and highly customizable, offering a variety of chart types for all your visualization needs from pie charts, scatter graph to geo charts. Besides, the plugin is free but you can upgrade to the Pro version to access additional features.

You have also options like Google Charts, Visual Composer or Bootstrap charts depending upon your requirements.