By Fatema T. Zuhora on Sunday, 11 September 2016
Category: Quix Resources

How to Create a Responsive Chart using Quix Counter Elements?

Presenting the data using the pictures such as graphs or charts is an effective way, and it will add an extra credibility to your website and blog posts.

Charts or Counters are the ones which can show a visual look about something to your visitors, and help them to understand the data quickly.

You'll get three types of counter elements if you are using the Quix page builder. These are: Pie Counter, Bar Counter, and Number Counter.

Today, we aimed to describe these three elements together in this blog post. Let's do it one by one!

The Ways to Create a Responsive Chart using Quix

These three elements are premium Quix element, and you can see these in the element list if you are a PRO user of Quix Page builder.

Pie Counter

Just insert the pie counter element to use it. After that, you have to customize some settings.

quix-counter

Note: One element displays only one pie chart. So, you have to insert more than one pie counter for the different element according to your need.

General Settings:

Under the general settings option, you will see the following options and can customize those.

quix-counter

Style Settings:

Here you can see the following options.

quix-counter

Bar Counter

quix-counter

Bar counter let you the option to show all the bars using a single element. Just insert this element and then start to customize the settings.

General Settings:

Under the general settings option, you will see only one option.

quix-counter

Every new bar included with following options:

  1. Title: The title goes here.
  2. Percent: Here define the percentage in number.
  3. Bar Color: Select the color of the bar.
  4. Percentage Color: And here define the percentage color of the bar.
  5. Bar Type: Here you can choose the bar type from three options. These are: Default, Striped and Striped Animated.

Style Settings:

Customize the style options of bar counter with the following options.

quix-counter

Number Counter

quix-counter

This counter is quite same as pie counter. That means you have to insert a couple of element for different bars. So, Insert an element and then customize the settings.

General Settings:

The following options you can see under this tab.

quix-counter

Style Settings:

quix-counter

Last Words:

That's mainly it. Hope you have found this article helpful. Looking forward to hearing from you.

Leave Comments