Bars

Table of Contents

• How to use
• Edit Mode Goodies
• General
• Items
• Items > Hover
• Items > Opened
• Items > Shared Colors
• Open All Toggle

---

---

Introduction

Here you can learn how to use the Bars stack from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. ^_-

---

How to Use

Flex is fairly easy to get started with! Really, all you have to do is drag the stack onto the page, and then add Bar Items using the ( + ) button. After that you will see that there are a rang of settings to customize the sizing, spacing etc. of your chart.

The quickest way to get Bars setup, is to add a few items, and then simply scroll to the very bottom of the settings panel to change the colors! Then checkout the top of the settings panel to set your min/max values, and finally, select each individual item to set their values.

There are tons of layout and customization options, allowing for some amazing stuff!!

---

General

This is where you can find the general options for your bar/bar chart! The main things you will want to focus on here are the MIN/MAX Values, and the chart Direction.

Chart Range (Min / Max)

Here you will find 2 inputs for setting the minimum value, and maxium value for your chart.

NOTE: Because bar fill sizes are calculated based on percentages, if your chart max is anything other than 100, then true bar sizes will only be displayed in preview/live mode.

Not to worry though, when previewed/published true bar fill sizes will be displayed.

Fill Direction (Increasing / Decreasing)

This dropdown simply allows you to select whether the bars will fill upwards or downwards. This is useful when you want to create charts that show decreasing values, rather than increasing ones.

Max Width

The max width simply determines the maximum width that the stack can stretch. It will automatically respond to fit mobile devices.

Animation Speed

This option simply allows you to set the animation speed for the bar fills. Note that the speed should be set in Milliseconds

1000ms = 1s

Maximum Width

Here you can set the maximum width for your bar chart. Note, that the chart will automatically shrink on smaller device sizes.

Padding (Top/Botton & Left/Right)

This padding is the padding around the edge of the bar chart.

Radius

This controls the corner roundness of the outer chart backround.

---

Header (Title & Description)

Bars includes a built-in Title & Description for your chart. These can be turned on or off individually if you so choose.

Hide Title & Description (Checkbox)

If you check either of these options then the title/description will be hidden.

Header Padding

Here you can customize the padding around the header section where the title and description are located. You have access to both Top/Bottom and Left/Right

Title Size (Vertical & Horizontal Mode)

This controls the size of the chart title. You can individually set the size for Vertical & Horizontal mode.

Description Size (Vertical & Horizontal Mode)

This controls the size of the chart description. You can individually set the size for Vertical & Horizontal mode.

Text Align

This dropdown simply allows you to set the text-alignment for the main title and descrption of your chart.

---

Bar Items

This is where you will find all of the main stylilng & sizing options for your bars, values, bar titles, and icons.

Height

This is the set height for all bars when in vertical mode.

Max Width

This controls the maximum width for each Bar Section. This option is specifically useful when you have long text titles that you would like to wrap/not-wrap at a certain point.

NOTE: This is NOT The width of the bars, it is the width of the Bars, Titles, and Icons all together.

The width of the actual bars can be edited using the thickness option.

Breakpoint

Here you can set the Breakpoint at which horizontal mode is applied. After the browser window size is smaller than this point, all of the options labeled Hozontal Mode will be applied.

Gutters (Vertical & Horizontal Mode)

This controls the spacing between each bar section.

Thickness (Vertical & Horizontal Mode)

This controls the actual thickness of each bar. You will find that you can set different thickness for Vertical and Horizontal modes.

Padding (Vertical & Horizontal Mode)

This controls the amount of padding betwen the Bar Background & Bar fill.

Radius (Vertical & Horizontal Mode)

This controls the corner roundness of the bars.

Value Size (Vertical & Horizontal Mode)

This controls the font-size of the bar value that will be found along with each bar.

Value Offset (Vertical & Horizontal Mode)

This controls the offset/placement of the bar value text. By default the text is placed inside of the bars, but you can set this to a negative value to move it outside of the bars.

Val Prefix & Suffix

Here you can add a Prefix or Suffix to the bar value text. This is useful when you want to have something like a dollar sign ($) before the value, or something after the value as well.

Value Font

You will see that there is a select menu with a list of default fonts for the header and content sections. There is also an option to add your own custom Google Web fonts!

Bars provides a super quick and innovative way to add Google Web fonts, literally all you have to do is type in the name of the font! ^{0^}

V-Mode Align

This controls the alignment of the bars, titles, & icons in vertical mode. If you set it to left, you will see that all items shift to the left. By default it is set to center.

H-Mode Align

This controls the alignment of the bars, titles, & icons in horizontal mode. If you set it to center, you will see that all items shift to the center. By default it is set to left.

---

Bar Titles (Text & Icons)

Here you will find the options for control the Bar Labels & Icons

Hide Text / Icon (Checkboxes)

If you check either of these options, you can hide the label or the icon.

Spacing (Vertical & Horizontal Mode)

This controls the amount of space between the bars and the titles/icons.

Label Size (Vertical & Horizontal Mode)

This sets the font-size of the bar labels

Icon Size (Vertical & Horizontal Mode)

This sets the font-size of the label icons.

Icon Spacing (Vertical & Horizontal Mode)

This controls the amount of space between the labels and the icons.

Icon Position (Top / Bottom)

Here you can choose whether or not the icons will appear above the labels or below them.

Note: In Horizontal mode, icons are always placed to the left of the label.

Label Font

Here you can set the font-family for the label text.

You will see that there is a select menu with a list of default fonts for the header and content sections. There is also an option to add your own custom Google Web fonts!

Bars provides a super quick and innovative way to add Google Web fonts, literally all you have to do is type in the name of the font! ^{0^}

NOTE: This will also control the font family for the title and description, for aesthetic simplicity

---

Colors & Backgrounds

Here you will find all of color options for Bars!

By default, colors are meant to be shared among all bars. If you want you can customize a bar items colors individually, by clicking on the bar item, and then toggling which specific color options you want to override.

Main Title

This controls the text color of the main title

Main Description

This controls the text color of the main description

Bar Values

This controls the text color of the value text included in each bar.

Bar Icons

This controls the color of each icon below each bar.

Bar Labels

This controls the color of the label text below each bar.

Bar Fill (Color / Gradient)

Here you can set the color for the inner bar fills. You can choose a single color, or a gradient!

Bar Background (Color / Gradient)

Here you can set the color for the background of the bars. You can choose a single color, or a gradient!

Main Background (Off / Color / Gradient / Image)

Here you can set the background for the chart itself. You can choose between a variety of different options such as:

• No background
• Single Color
• Gradient (2 colors)
• Image

---

Advanced / Experimental

As an advanced / experimental option, we have included a rule to go along with your bar chart! Simple check the Show rule option, and you will see a few styling options for the rule such as:

• Rule text size
• Rule text color
• Rule line color