Bar Chart Properties
Use the Vizlib Bar Chart properties panel to configure data and dimensions, customize appearance, set reference lines, manage tooltips, and control interactivity.
Data - Dimensions, Measures, Data Handling, Sorting
Vizlib Bar Chart supports using one dimension with multiple measures or two dimensions with one measure.
Add dimensions and measures in the Data section using Fields and Master Items and use alternative dimensions and measures to offer more options for analysis. See an example in our article on creating a bar chart using the wizard.
Adding Dimensions
From the Data section, click Add in the Dimensions section.
Set the Field and Label, and click in the check box if you want to Include null values.
Use the Calc. condition field to specify a conditional expression to show or hide the dimension when a condition is met.
Figure 1: Dimension
Adding Measures
From the Data section, click Add and drag the option down to the Measures section.
Enter the type of measure in the Expression field.
Enter the measure's name in the Label field.
Select a Number formatting option from the list: Auto, Number, Money, Date, Duration, Custom, or Measure expression.
Set custom Formatting to set a Format pattern.
Use the Calc. condition field to specify a conditional expression to show or hide the measure when a condition is met.
Figure 2: Measure
Using Master Item Formatting with Measures
If the measure has been created from a Master Item, you can choose to enable Master measure formatting, which means formatting for the measure will be taken from the master item definition (you can find master items in the Custom Objects menu in the left-hand panel).
This can help you apply formatting quickly across multiple charts when you slide the Master measure formatting toggle to the right.
Figure 3: Master Measure Formatting
You can also:
Specify a Bar Color and set the Bar Opacity.
Show or hide Data Values (you can choose to Show totals on stacks in a stacked chart).
Select Include only bars (only show totals for measures represented as bars when Show totals on Stacks is selected).
Select Show all values, or Show only totals.
Enable Custom Tooltip to use your own HTML code for the tooltip.
Figure 4: Bar Color, Data Values, Custom Tooltip
Setting Sorting Options
The Sorting tab controls how you order your data and has a default setting of Auto for both dimensions and measures.
Switch to Custom sorting to set your own values and sort by expression, numerically or alphabetically.
Figure 5: Sorting
Applying Data Handling Options
Data Handling options allow you to:
Pre-define Data downloading within the chart (by default, this is limited to the first 5000 rows).
Suppress Zero Values.
Show/Hide the chart depending on a Calculation condition.
Enter a custom Displayed message.
Figure 6: Data Handling
Appearance
Appearance settings help you manage the look and feel of your Vizlib Bar Chart.
Note: You can only display a chart if you have more added more than one metric or dimension.
General
In the General section, you can add a Title, Subtitle and Footnote, as well as Show Details to display descriptions and information on measures and dimensions.
Figure 7: General
Presentation
The Presentation settings control the outward appearance of the bar chart. You can select a chart Type (Group or Stack) and enable the Stack 100% bar settings if you choose Stack. You can set the chart Orientation and the Direction of the y-axis display. You can use the Bars Formatting settings to change the Groupbar width and Radius, and enable Connected Bars, setting the Opacity to make them distinct from the values they're connecting.
Figure 8: Presentation
You can use the Bar Data Values Formatting to set a Font Color, Font size mode and Font Size Scale for the bar data values in the chart, as well as choose the Orientation and where to Align the data values.
Figure 9: Bar Data Values
You can enable Scroll Preview to view the full set of available bars using a scrolling Mini chart, Advanced, and Basic scrollbar.
Figure 10: Scroll Preview
Set the Scroll Alignment to the start or end of the chart, and set the Scroll Position to Top or Bottom and use the Max bars before showing scroll to pre-define the scroll range.
Note: Hiding the scroll will display all the bars and resize them based on the available space.
You can further advance the scroll feature by changing the Scrollbar type to:
-
Mini chart
Presents a mini-cart scrollbar which can be interacted with by scrolling and resizing.
-
Advanced
You can interact by scrolling and resizing.
-
Basic
You can only interact by scrolling (This is a fixed with determined by the number of bars you want to show by the Set Threshold Limit property).
Figure 11: Scrollbar Options
Colors and Legend
In the Colors and Legend settings you can choose to either use a pre-defined collection of colors, or define your own custom color palette by comma separating a collection of hex color codes. The Auto setting will inherit colors from master items (master measures and master dimensions), we support master item colors for dimension values.
You can choose between options for Single color, color By dimension and color By measure.
Note: Coloring by expression is located in the Data section, using the Bar Color settings for Measures. This offers the ability to color the bar based on any expression. You can reverse the color palette with Reverse Colors, and choose not to reassign colors by selecting Persistent Color. You can also define your own Null Value Colors.
Figure 12: Colors
Setting Show Legend to On displays a legend in the bar chart. You can select the Legend Position and choose the alignment using Align. Top and Bottom legend position can align Left, Center or Right. Left and Right can align Top, Center or Bottom. You can also set the Legend Font Color, Font Size, and choose to Sort Legend By Load order or Value (and in ascending or descending order). If dimension values exceed a certain length, you can apply and set a customized character limit with Char limit. You can also select to Show Null Values in Legend and Show Legend Title.
Figure 13: Legend
Grid Format
The Grid Format settings allow you to control the grid settings for the chart if you choose to display one, setting the Grid Style, Grid Color, Grid Opacity and Grid Thickness.
Figure 14: Grid Format
X-Axis
If you enable the Axis by selection Show, the X-Axis settings allow you to set the axis Postion, and if you show a Dimension Title, you can set the Color, Font Size, Label Font Size, and Label Font Style. You can also display alternative dimensions with Show alternative count, and display the chart navigation with Show drilldown breadcrumbs.
Figure 15: X-Axis
You can also set a Char Limit for dimension titles and Enable multi-line labels. In Axis Styling, you can choose the Font Color, Font Size, Axis Line Color and Axis Thickness.
Figure 16: Char Limit, Labels, Axis Styling
Y-Axis
Displaying the Y-Axis settings allow you to set the axis Postion, and if you show a Dimension Title, set the Font Color, Font Size, Label Font Size, and Label Font Style. You can also display alternative dimensions with Show alternative count, and display the chart navigation with Show drilldown breadcrumbs.
Figure 17: Y-Axis
In the Axis Styling settings, you can set the Font Color, Font Size, and choose to Force Font Size. You can set the Axis Line Color and Axis Thickness, set a Ticks count, choose the Axis Tick Format, select how to display a Negative Format, enable a Currency Format and choose an Axis Range with min/max smoothing display additional tick(s) so that the bar max height is less than the axis height
Figure 18: Axis Styling, Ticks, Axis Range
Reference Lines
Vizlib Bar Chart supports Reference Lines for both the y-Axis and for the x-Axis.
Measure/Dimension Value defines the Measure or Dimension against which the reference line will be plotted in the chart. You can use the Label settings to edit your label. Position defines the position of the label, either above (left) or below (right) the reference line. The Font settings control your label font, allowing you to choose the Font Color, Font Size, Font Style and Text Opacity.
Figure 19: Value, Line, Font
You can choose a Label Position, and define the label's place in the reference line with Align. You can choose to enable an Outline, and define the Outline Background, Outline Border, Outline Stroke Width, and the Outline Border Radius.
Figure 20: Align, Outline
If you show a reference line, you can use the Line settings to define the Line Color, Line Width, Line Opacity, and the Line Style. You can also Show or Hide the reference line depending on a calculation condition.
Figure 21: Line
Viztips and Tooltips
The Viztips and Tooltips settings help you to manage tooltips in Vizlib Bar Chart, and you can also enable Viztips to add dynamic tooltips. If you'd like to find out more about Viztips, you can find our overview article here.
Viztips and Tooltips
To display Tooltips, you need to move the slider to Enabled, and then you can select the Viztips option to start working with dynamic tooltips. There's also a link to the Viztips tutorial if you need to check anything.
Figure 22: Viztips and Tooltips
Viztips Content
Viztips Content settings contain a drop-down where you select the master item, and includes a copy function for Viztips placeholder tags and a further link to the tutorial.
Figure 23: Viztips Content
Viztips Settings
With Viztips Settings you can use the sliders to change the height and width of the Viztips object in the chart.
Figure 24: Viztips Settings
Interactivity and Alternate State
These settings control user interaction with chart data and allow you to assign the Vizlib Bar Chart to an alternate selection state.
Interactivity
Interactivity settings control the different ways for a user to interact with chart data and navigate and adapt the chart view when the chart is in analysis mode. To move the chart out of read-only mode, you need to enable Allow Selections, and ticking the Enable Multiselect check box will allow you to select more than one value at a time. You can also choose to enable Animations, display a Warning message, use an Extended Context Menu, display a Full screen Icon which allows you to maximize objects. The Show Snapshot Icon setting lets you take snapshots of the object, but has been part of the Hover menu since the Qlik Sense September 2020 release, and is no longer controlled using the property panel.
Figure 25: Interactivity
In analysis mode, the extended context menu contains options to Open snapshot library, display Axis and Legends, hide or Show All Values, set the orientation (Horizontal or Vertical), select a Display Type, Show details, Take snapshot, Embed Chart into a web page and Export an Image, a PDF or the chart data.
Figure 26: Extended Context Menu
Alternate State
Alternate State settings allow you to assign the Vizlib Bar Chart to an alternate selection state. You can use alternate states to perform comparative analysis between sets of multiple data items. If you want to add the object to master visualizations, you need to set the state to Inherited.
You can use the Alternate States Manager to disable the object when the app is published, and select Show Alternate State Icon to display an icon. You can find more information about working with alternate states here.
Figure 27: Alternate States