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 pos...

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.

General Settings:

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

  • Title: Define the title of the pie bar in this field.
  • Percent: Here define the percentage of the pie bar.
  • Percent Sign: This setting define will you want to show the percent sign (%) or not.

Style Settings:

Here you can see the following options.

  • Animation: Quix will give you the option of total six animations. These are: Fade In, Zoom In, Left to Right, Right to Left, Bottom to Top & Top to Bottom. Choice one among them to fetch an animated style. If you don't like an animation, then you can also select "No Animation" option.
  • Title Font: Define the font of title text from this field. Here have also some more options - font size, line height, letter case, letter spacing.
  • Bar Color: This option defines the color of pie bar.
  • Percentage Color: This option will define the color of percentage color in the bar.
  • Line Width: Here define the width of pie bar.

Bar 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.

  • Add New: Click this button to add a new bar inside the bar element.

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.

  • Animation: You will get total six animations. These are: Fade In, Zoom In, Left to Right, Right to Left, Bottom to Top & Top to Bottom. Choice one among them to fetch an animated style.
  • Title Font: Choose the font family from this setting and also define the font size, letter case, letter spacing, and line height.
  • Border Radius: Define the radius of the border. It will appear a shadow at the outside of the border.

Number Counter

Number 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.

  • Title: The title of number counter goes here.
  • Number: Insert the number of the counter bar here in digits.
  • Use Icon: If you want to use an icon just drag the button to "Yes" otherwise keep it at "No".
    1. Icon: You will only see this option if you drug the use icon setting to "Yes". So, select an icon from the list here shown to you.
  • Image: Insert an image by using the right button. Note: If you use an icon then you won't be able to use this option. So, you have to any one option only. An icon or an image.
    1. Image Alt Text: When you insert an image, use the alt text of that in this field.
  • Text Alignment: Define the alignment of text among three options - center, left and right.

Style Settings:

  • Animation: So, again choose an animation style from six animation options.
  • Title Font: Select the font of the title text.
  • Number Font: Choose the font of number font with some extra styles.
  • Title Color: Define the color of the title text.
  • Number Color: Define the color of the number.
  • Background Image: You can use a background image by using the right button shown here.
  • Background Color: Instead of a background image, you can also choose a background color.
  • Padding: If you need some space inside of the element specify it in this fields with digits.

Last Words:

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