
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
Bars Changelog
Version 1.0.5
- Fixed issue with bars not loading when near the very top of the page
Version 1.0.4
- Fixed issue with bars not loading when located near the bottom of the page
Version 1.0.0
- Vertical / Horizontal Modes
- Minimum / Maximum Range
- Increasing or Decreasing fill modes
- Shared or Individual color options (specific toggles)
- Text Labels
- Custom Icons!
- Custom Fonts!
- Header & Description
- Option Chart Rule (Experimental)
- Tons of sizing and styling options!!!