KPI Designer Properties
Use the Vizlib KPI Designer properties panel to configure layers, customize appearance, manage templates, and control interactivity and add-ons.
Layers - Text, Icon, Icon Bar, Image, Line, Master Item
Vizlib KPI Designer layers allow you to add and customize the KPI display using 11 different layer types. This section outlines the settings specific to the text, icon, icon bar, image, line, and master item layers. More information about the shared settings for layers is also available.
Please see the Good Practice with Layers section on the Applying Layers page.
Text
You can use a Text layer for titles or descriptions and add metrics using dynamic Qlik Sense expressions or variables in Text. You can also choose to Format as a number, and set the Horizontal Alignment and Vertical Align.
Figure 1: Text, Align
You can also set the Font Color, Font Style, and Font Family and choose Auto Font Size and Auto Fit Text to have the text re-size dynamically when the object is re-sized.
Figure 2: Font, Auto
HTML
You can use a HTML layer for your KPI Designer which increases the editing capabilitiy and possibiltities available within Qlik.
Figure 3: HTML
Icon, Icon Bar
You can use an Icon layer to convey a message about your KPI by displaying a symbol or a row of symbols in an Icon Bar layer. With Icon settings, you can choose the icon from a list of pre-sets or use an expression, set the Font Color, enable Auto Size Mode, and set the Horizontal Icon Align and Vertical Icon Align.
Figure 4: Icon
Icon Bar settings allow you to choose the icon, set the Number of Icons, set a Progress level, choose the Progress Direction, select the Icon Size, and Fit to a layer or a line.
Figure 5: Icon Bar
You can also set the Horizontal Alignment and Vertical Alignment, choose a Progress Color, Remaining Color, and Swap Colors if needed.
Figure 6: Alignment, Progress Color
Image
The Image layer controls the settings for images added to the KPI. You can Use Image From a URL or a media library, set the Image Opacity, and enable advanced Image Settings to apply changes to Image X Transform, Image Y Transform, General Scale, Scale X and Scale Y.
Figure 7: Image
Line
Line layers can be used to organize and segment metrics used in your KPI. You can choose the line orientation (Vertical or Horizontal), set the Line Color, Line Size, Corner Radius, Margin Size, Line Opacity and select a Vertical Align option.
Figure 8: Line
Master Item
Master Item layers allow you to add Vizlib extensions to your KPI. Here's a list of all the extensions you can add as a master item.
Vizlib
Vizlib Activity Gauge
Vizlib Advanced Text Object
Vizlib Bar Chart
Vizlib Button
Vizlib Calendar
Vizlib Combo Chart
Vizlib Container Grid
Vizlib Filter
Vizlib Heatmap
Vizlib Line Chart
Vizlib Mekko Chart
Vizlib Pie Chart
Vizlib Pivot Table
Vizlib Ridgeline Plot
Vizlib Sankey Chart
Vizlib Scatter Chart
Vizlib Slider
Vizlib Switch
Vizlib Table
Vizlib Venn Diagram
Vizlib Waterfall
Qlik
Bullet chart
Qlik Dashboard Bundle
Date Picker
Qlik Visualization Bundle
Funnel chart
Network chart
Org chart
Radar chart
Trellis container
Word cloud chart
Figure 9: Master Item
Creating a Master Item
Create an object using one of the extensions listed.
Add it to the master items list.
Select it from the Select Master Item drop-down or add the master item using the Setup Wizard.
Please see the video to learn more about working with master items in Qlik Sense.
Note: We only recommend using one master item in a layer, as adding more than one can affect performance.
To read more about the benefits of the Read-only setting, please see our article on using Layers with Vizlib KPI Designer.
Layers - Barchart
With the Barchart layer you can add your very own customized bar chart to the KPI, using it to display complex information more compellingly. A good example is to add a bar chart as a background behind other objects with added opacity. You can find more information on the shared settings for layers here.
Dimension, Measure
You can add a Dimension and Measure, and specify a sort by either in Sorting by, and customize a Sorting method (Auto is the default). You can also select horizontal and vertical Orientation.
Figure 10: Dimension, Measure
Bars, Grid
You can customize the bars in the chart by setting a Bars Color, enabling a Bars Border, Bars Border Color, Bars Border Width. You can choose to show a Grid, and set the Grid Color.
Figure 11: Borders, Grid
X Axis
If you choose to show a label for the X Axis, you can set the X Axis Label Color, the X Axis Label Size, display an X Axis Title (setting the Font Family, X Axis Title, X Axis Title Color, X Axis Title Size and X Axis Title Opacity), show an X Axis Line, set the X Axis Color, the X Axis Opacity and X Axis Thickness.
Figure 12: X Axis
You can choose to show X Axis Ticks, setting an X Axis Ticks Color, X Axis Ticks Opacity and X Axis Ticks Size.
Figure 13: X Axis Ticks
Y Axis
If you choose to show a label for the Y Axis, you can set the Y Axis Label Color, the Y Axis Label Size, display a Y Axis Title (setting the Font Family, Y Axis Title, Y Axis Title Color, Y Axis Title Size and Y Axis Title Opacity).
Figure 14: Y Axis
You can show a Y Axis Line, set the Y Axis Color, the Y Axis Opacity and Y Axis Thickness. You can choose to show Y Axis Ticks, setting a Y Axis Ticks Color, Y Axis Ticks Opacity and Y Axis Ticks Size.
Figure 15: Y Axis Line, Ticks
Layers - Linechart
With the Linechart layer you can add your very own customized line chart to the KPI, using it to display trend or time series data. You can find more information on the shared settings for layers here.
Dimension, Measure
You can add a Dimension and Measure, and specify a sort by either in Sorting by, and customize a Sorting method (Auto is the default). You can also select horizontal and vertical Orientation.
Figure 16: Dimension, Measure
Line Styling
Line Styling settings let you set the line Representation, enable Line Visibility, Line Color, Line Opacity, Area Color, Line Thickness, Area Opacity and select a Line Type.
Figure 17: Line Styling
X Axis
If you choose to show a label for the X Axis, you can set the X Axis Label Color, the X Axis Label Size, display an X Axis Title (setting the Font Family, X Axis Title, X Axis Title Color, X Axis Title Size and X Axis Title Opacity). Show an X Axis Line, set the X Axis Color, the X Axis Opacity and X Axis Thickness.
Figure 18: X Axis
You can also show an X Axis Line, set the X Axis Color, the X Axis Opacity and X Axis Thickness. You can choose to show X Axis Ticks, setting an X Axis Ticks Color, X Axis Ticks Opacity and X Axis Ticks Size.
Figure 19: X Axis Ticks
Y Axis
If you choose to show a label for the Y Axis, you can set the Y Axis Label Color, the Y Axis Label Size, display a Y Axis Title (setting the Font Family, Y Axis Title, Y Axis Title Color, Y Axis Title Size and Y Axis Title Opacity).
Figure 20: Y Axis
If you display a Y Axis Line, set the Y Axis Color, the Y Axis Opacity and Y Axis Thickness. You can choose to show Y Axis Ticks, setting a Y Axis Ticks Color, Y Axis Ticks Opacity and Y Axis Ticks Size.
Figure 21: Y Axis Ticks
Layers - Pie Chart
A Pie Chart layer is the most straightforward and efficient visual tool for comparing parts of a whole. You can find more information on the shared settings for layers here.
Figure 22: Example
Dimensions and Measures
The Dimension and Measure settings let you define the measure and dimension in your pie chart. You can also choose to sort by Dimension or Measure and choose to customize a Sorting method.
Figure 23: Dimension and Measure
Color Mode, Piechart Styling
The pie chart offers a choice of Color Mode: Single, Dimension or Range. The Piechart Styling settings are managed using sliders for the Piechart Pad Angle, Piechart Inner Radius, Piechart Corner Radius, Piechart Opacity, Piechart Offset, Piechart Stroke Width, and select a Stroke Color with the color picker.
Figure 24: Color Mode, Piechart Styling
Label
If you choose to display a label with Show Labels, you can set the Pie Label Color, choose the Orientation, set the Labels Position, and the Piechart Font Size.
Figure 25: Labels
Layers - Bulletchart
The Bulletchart layer is a powerful visual add-on to any KPI as it nicely captures targets vs current performance. You can find more information on the shared settings for layers here.
Example
Bullet charts compare a single, primary measure (e.g. current year-to-date revenue), to one or more other measures (e.g. a target), and display it according to ranges of performance (e.g. poor, satisfactory, and good). Bullet charts use only one data series, but a dashboard may contain several bullet charts at the same time. The example here shows the actual and target values measures against poor, acceptable and good performance areas.
Figure 26: Example
Actual Value, Target Bar
You can enter the Actual Value, set a Value Color, and choose an Actual Bar Height. You can also show a Target Bar, entering a Target Value, Target Color, Target Bar Thickness, and Target Bar Height.
Figure 27: Actual Value, Target Bar
Performance Areas
There are three performance areas defined in the bullet chart: Good, Acceptable and Poor. For a Good Performance Area, you can set the Value, Background Color and Background Bar Height.
Figure 28: Good Performance Area
If you show an Acceptable Performance Area, you can enter an Acceptable Area Value, choose the First Part of Target Color, and the First Bar Height.
Figure 29: Acceptable Performance Area
If you show a Poor Performance Area, you can enter a Poor Area Value, a 2nd Part of Target Color and a Second Bar Height.
Figure 30: Poor Performance Area
Bulletchart Settings
In Bulletchart Settings, you can enable Show Axis, and choose an Axis Color, Axis Position, Axis Font Color, and Axis Labels Font Size.
Figure 31: Bulletchart Settings
You can also choose to enable Show Value Label, and enter a Label of Actual Value, set the Actual Value Label Position, Value Label Font Color and Value Label Font Size.
Figure 32: Value Label
Layers - Gauge Chart
A Gauge Chart layer is similar to a pie chart, but with a needle or dial to indicate where your data point(s) fall over a particular range. A useful visualization tool, gauge charts can be used alongside line and bar charts. You can find more information on the shared settings for layers here.
The example here shows a gauge with a range of 0 - 100 and needles to indicate the data points.
Figure 33: Example
Gauge Range
The Gauge Range settings allow you to set a Min and Max value, set the range to run Clockwise and apply a Format as Number.
Figure 34: Gauge Range
Gauge Limits
Gauge Limits allow you to display a limit on the gauge up to a certain value. You can enter a limit name, set the Value, and choose the Limit Color.
Figure 35: Gauge Limits
Gauge Needles
The settings for Gauge Needles allow you to add a label with Show Label, choose a Reference Type and enter a Value.
Figure 36: Gauge Needles
You can also set the needle Size, Color and Opacity.
Figure 37: Needle Styling
Gauge Ticks
You can add Gauge Ticks to the gauge, choosing a Scale, setting the Tick Font Style Type, Tick Font Color and Tick Font Size.
Figure 38: Gauge Ticks
Appearance, Global Actions
These settings control the visual styling of the KPI object and allow you to define global actions.
Appearance
Appearance settings help you style the look and feel of the KPI object. In the General settings, you can add a Title, Subtitle, Footnote, set a Toggle off hover menu, and Show details related to the dimensions and measures in the chart.
Figure 39: General
You can also apply Container Styling settings, setting a Background Color, Background opacity, choose to Hide header on Focus if you don't want the header displayed when the object refreshes.
Figure 40: Container Styling
With the Border settings, you can use the Border Selector to apply a border, set a Border Style, Border Color, Border Width, and Border Radius.
Figure 41: Border Settings
Global Actions
In Vizlib KPI Designer, you can define Vizlib Actions in a single layer, or for the entire KPI object. In Global Actions, you can add one or multiple actions which apply to the KPI Object, and override individual layer actions. Use the Pick Action drop-down to select the action you want, then add the information you need. This example uses Selection in Field.
Figure 42: Global Actions
Templates
Vizlib KPI Designer supports Vizlib Templates now, so you can pick the look and feel you want and apply it with one click.
Using Templates
You can find template settings in the property panel under Templates or by clicking the Choose Template icon when you're using the setup wizard.
Figure 43: Templates
To use templates, click on View Templates to open the template screen. You'll see a list of available themes, so you can choose the theme you want and it'll be applied right away. If you need to change the template theme, select one and apply the changes with one click.
Figure 44: Templates Example
Managing Templates
If you find you need to make more changes to the template theme, you can use the settings in the Appearance tab to set the look and feel you want.
If you'd like to know more about managing or working with Vizlib Templates, please see our article on creating and saving templates here.
Interactivity, Add-ons, Viztips
These settings control how users interact with the KPI object, manage data handling, and configure dynamic tooltips.
Interactivity
Interactivity settings control how users interact with the KPI object.
Figure 45: Interactivity
Enabling Snapping helps you better position and align layers on your canvas by enabling layers gravity and alignment guides. Each layer will auto-position itself to be horizontally and vertically aligned. Rescale Layers on Resize ensures your KPI object works on different screen sizes, with layers adjusted and rescaled after resizing the screen. Layers are adjusted proportionally to the new object size. If this setting is disabled, the layer sizes will remain static.
Figure 46: Snapping, Rescale
Activating Design mode in edit mode means that layers will display their borders at all times, not only when you hover over them or select them. Show Tooltip will display tooltip for the object when in edit mode. To add controls in analysis mode, showing the Fullscreen Icon expands the extension object to full screen and showing the Snapshot Icon takes snapshots of the extension which can be used for story mode.
Note: Snapshot icon has been part of the Hover Menu since the Qlik Sense September 2020 release, and is no longer controlled using the property panel.
Add-ons
The Add-ons menu contains settings that manage Data Handling. You can choose whether or not to Include zero values, and add a Calculation condition. If you set a calculation condition, data will only be displayed if the condition is met. You can set a Displayed message for the calculation condition using either plain text, or an expression.
Figure 47: Add-ons
Viztips
If you'd like to include dynamic tooltips, Viztips settings will integrate these into your visualization using a Master Item.
Figure 48: Viztips