What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Display Dynamic Charts in WordPress

How to Display Dynamic Charts in WordPress

Are you looking to showcase some dynamic charts on your blog posts to add the extra credibility? This is a great method to express your web contents vividly and boost the authority of your words. In the following, we’d like to tell you how to display dynamic charts in WordPress articles.

It is possible that you have already displayed some static bars and charts on your posts to showcase your wanted data. However, these charts are the one-time display that will never change. If you need to change the data, you have to re-create or re-draw them from the scratch using your Microsoft Office tools. In this case, we highly recommend you to try the dynamic chart. The final display of it can vary when you add or delete the data, figures or statistics. Even, when people hover the mouse on it, there can be some animated effects appeared. In the following, we’d like to list two simple methods for doing so.

Method 1 – Use the WordPress Charts Plugin

The WordPress Charts plugin allows you to generate the HTML 5 charts easily that can be showcased in an amazing way in WordPress. With the ultimate flexibility achieved by this plugin, you can choose among up to 6 chart options. All of these charts are fully customizable, retina already, great looking and animated. In addition, this lightweight plugin ensures a fallback to provide the support for both the modern browsers and the old options.

Choose the Option of the Dynamic Charts

After the plugin installation, you can click the WP Charts button from the Media tab. As the plugin allows you to showcase the charts using the shortcode, this page will teach you how to use the shortcode to better display your charts.

Now, you need to choose your preferred chart among the options of the pie chart, radar chart, bar chart, line chart, polar area chart and doughnut chart. And them, you can click the target chart to preview the final result and the use of the shortcode.

Pie Chart Example

Display the Dynamic Charts in the Front-end

Note that you now can copy and paste the shortcode to your blog post directly for the chart display. To decide the statistics of each chart component, you simply need to change the values of the “data” attribute.

In addition, you can also leverage some other attributes to decide the type, title, width, height, margin, alignment, opacity, color scheme, font and many more. Note that you can learn how to use what attribute from the same page.

All Shortcode Attributes

Method 2 – Use the Charts Ninja Plugin

The Charts Ninja plugin is a powerful option that allows you to design your dynamic charts beautifully and add to your blog posts easily. As compared with the first recommended plugin, this one gives you more freedom on deciding the appearance of the chart.

Decide the Setting of Your Dynamic Charts

To design this dynamic chart, you have to go to this official plugin page and click the wizard link to start the generation.

Chart Wizard

From the next wizard page, you firstly need to click the Settings button from the left-hand Tools bar. Here, you can give a title to this chart for the easier management, enter the exact value for the height pixel, allow the automatic refresh if needed, decide to show the title and the data box of this chart or not and determine some other settings.

Chart Settings

Design and Create the Dynamic Charts

After that, you need to click the Style button for the further design and customization. Here, you firstly need to choose the chart type among the options of the bar, line, donut, pie, stacked and pyramid. From the main screen of this page, you can check the real-time preview of your chart. It is possible that you are not satisfied with the color scheme. If so, you can focus on the Colors part to choose your preferred colors for the chart background, title and data values. Note that if you want, you can achieve a transparent background for your dynamic chart.

Chart Style

Decide the Chart Data

The last step is to enter the exact data and values you are looking to showcase on your chart. For this, you can click the Data button. Here, you can edit the values in a manual method. Or, you can import the CSV file directly to reflect the data.

Chart Data

Now, you can click the Save & Get Code button to know the exact ID of this self-designed chart. Note that before getting the code, you are required to signup for this tool. In this case, the next time you are looking to customize the data or the style of this chart, you can log to this account to find your target and to make the changes.

Display the Charts

Now, you can go to the post editing screen to add the chart. For this, you simply need to convert to the visual editor and click the Chart button. From the popup window, you need to enter the chart ID to have the chart added and displayed properly.

Display the Charts


Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.