Olga Aksamitnaya
Updated on

Elementor charts: how to create them with Crocoblock

Everybody knows that it’s easier for a person to perceive visual information. So, instead of overloading your text with digits, we suggest you display it using charts and bars. Crocoblock presents Progress Bar, Circle Progress, Pie/Doughnut Chart and Bar Chart widgets. Let’s have a closer look at each of them. 

Progress Bar widget for Elementor

The first way to showcase important data is to use the Progress Bar widget. This widget suits great to show any kind of progress. For instance, you can easily tell your site visitors about your achievements, the results in percent or any other kind of value, and present it in the most appealing way.

Let’s imagine you are responsible for the government website, educational page in particular. A new program attracting foreign volunteers with the knowledge of English has been implemented. Native speakers already work in 64% of the educational institutions of the country.  

You have to display the results on your website. With the options included in this widget, you will be able to design the bars that perfectly match your whole interface.   

elementor progress bar

There are different types of progress bars that you can choose from. They differ from each other by the position of the Title, the Icon and the Percentage, which can be either inside, above or on the right of the bar itself. 

Moreover, the bar is animated, which means once you open the page the status bar moves from left to right.

Bar Chart widget for Elementor

There is no need to create several sections with the Progress Bar widget to show the difference since the Bar Chart widget provides you with such opportunity on a spot.   

The widget’s purpose is to showcase discrete data points or categories, mainly, when large numbers are used. Bar Chart is a great solution when you need to show the results comparatively.

Let’s imagine you have to compare pasta production in tons in different countries.

elementor bar chart

Bar Chart widget is really flexible and comes with versatile settings controls, allowing us to play around with the chart’s layout and find the best one to satisfy user’s needs. At the same time, it’s quite easy to adjust the settings and select whether the chart should be vertical or horizontal, whether the grid lines should be shown or hidden, etc.

Circle Progress widget for Elementor

Circle Progress widget allows you to display not only percent but also absolute values. Why is it so unique? Single circle progress is made up of tiny details and the good thing is that you can style up and adjust each of them.  

If you need to show how much progress is achieved, and how much is left, Circle Progress widget is a good choice. It clearly shows whether the result was fully achieved.

If you want to display the number of people from 20 to 30 years old who use different social networks, you can use this widget. 

elementor circle progress widget

Circle Progress widget is a handy tool because it comes with several settings controls, which allows you to adjust it quickly and make it visually attractive. It’s an easy way to display information and at the same time make your website engaging.

Pie/Doughnut Chart widget for Elementor

Displaying the statistics is as easy as pie with a Pie Chart widget. Here you can make each section of a different color, and display the information either above, below the chart or even on hover.

Pie Chart widget is the most easy way to show the parts of a whole and let your visitors obtain information as a holistic view, at the same time being visually understandable.

The Cutout Percentage option allows you to turn a pie chart into a doughnut (we wish everything was this easy in real life)!

Let’s imagine you need to display the information on the most popular pets in different countries, such as the USA, Russia, and China.

P.S. Possible variations are shown below.

pie chart widget elementor by crocoblock

Pie Chart widget can be one of the most eye-catching elements on your site, with its nice layout and versatile settings. You are able to enrich it with the tooltips, set the height and animation duration, select the best fitting colors, etc.

The result will impress you and the widget can become a cherry on pie on your website!

Needless to say that these widgets are universal since they can be used either on scientific, research, statistical websites or even on the news channels, blogs, etc. 

Choose the one you like best and start creating!