Line Chart Properties

Use the Vizlib Line Chart properties panel to configure dimensions and measures, customize appearance, set reference objects, and manage interactivity and alternate states.

Dimensions and Measures

In Vizlib Line Chart, settings for dimensions and measures are held in the Data section of the property panel. Vizlib Line Chart supports either one dimension with up to ten measures or two dimensions with one measure.

Figure 1: Line Chart Example

Dimensions

When you add a dimension, you can enter your own Label name for the Field, and choose to Include null values. You can also select a Limitation when you're displaying values (No limitation, Fixed number, Exact value and Relative value) and add a new Master Item. You can click Add alternative if you'd like to use alternative dimensions. If you add alternatives, you'll be able to choose the dimension you use in analysis mode.

Figure 2: Dimension

Measures

When you add a measure, you can enter your own Label name for the Expression you use with the measure, select the Number formatting you'd like to use from the dropdown, enter an expression for Custom Tooltip, and choose Keep native value.

Figure 3: Measure

Dynamic Label

If you choose to show a Dynamic Label, you can add a Label Expression, and you can also enter a Condition if you'd like to add a Visibility Condition. You can also set the Axis Position for the measure (Primary sets the axis to the left, Secondary to the right), allowing you to customise the axis to display multiple measures on the same line chart.

Figure 4: Dynamic Label, Visibility Condition, Axis Position

Markers

If you choose to show Markers to visualize the data points on the line chart, you can choose between three Representation options: Symbol, Icon and Image.

If you display a Symbol, you select an option from the drop-down, and set the Symbol Size (by expression or using the slider).

Figure 5: Symbol

If you choose an Icon, you can make your selection either by entering an expression in the editor, or by using the icon picker and the slider.

Figure 6: Icon

If you're adding an Image, you can choose an online URL or upload your image with the Qlik Sense content editor in Image URL, and set the Symbol Size.

Figure 7: Image

Line Style

You can select the Line Style for the line chart, choosing a Line Curve Style from the drop-down and a line or area Representation. If you enable Stack data, the dimensions in the chart will be "stacked" on top of each other rather than overlapping. You can use expressions or a slider to set the Line Opacity, Data Point Opacity and Line Thickness.

Figure 8: Line Style

Trend Lines

If you enable the Trend Lines settings, you can choose a Regression Type from the drop-down, set the regression Line Style and use the sliders to set the Regression Line Opacity and the Regression Line Thickness. You can customize the Color mode, and if you choose to display a Regression Equation, you can set the Equation position, Equation vertical position, the Equation Font Size and the Equation Opacity Offset.

Figure 9: Trend Lines

Show Values

If you switch Show Values to On, you can set the Position mode, customize the Color Mode and choose the Font Size.

Figure 10: Show Values

Forecast Settings

The Forecast settings allow you to manage the look and feel of the forecasting elements in your line chart. The first (and most important) control is Excluded From Forecasting, which is set to Included by default. If you don't want a measure to be used in the forecast, it should be set to Excluded. If the measure is included, you can customize the % Confidence Area to set the Area Background Color and Area Opacity, choose your own Line Styling options by selecting a Line Color and Line Style, and enable the Accumulate Values setting.

Figure 11: Forecast Settings

As with dimensions, you can click Add alternative if you'd like to use alternative measures. If you add alternatives, you'll be able to choose the measure you use in analysis mode.

Appearance

The Appearance settings help you to control the look and feel of your Vizlib Line Chart.

General

In the General settings, you can enter a Title, Subtitle and Footnote. You can also choose to Toggle off hover menu and Show details to display information about dimensions and measures in your chart.

Figure 12: General

Data Gaps and Grid

In the Data Gaps and Grid settings, you can select an option for displaying Data Gaps, select your Grid Settings display with Show Grid, Horizontal Grid Lines: Show and Vertical Grid Lines: Show, set your Grid Style, Grid Color, Grid Opacity and the Grid Horizontal Thickness and Grid Vertical Thickness.

Figure 13: Data Gaps and Grid

Background

In the Background settings, you can choose the Inner Background and control the Stripes Orientation for striped inner backgrounds, setting an Even Color and Odd Color, select the Opacity and choose a theme for the Outer Background.

Figure 14: Background

X-axis

If you choose to Show an X-axis, you can choose:

a Timeaware Axis,
to set the Dimension Labels Position, to Horizontal, Angled or Vertical,
to add the option to Preserve edge ticks if you find that not all the ticks on the x-axis are displayed,
and to select a Font Color and Font Size.

Figure 15: X-Axis

You can also set a Dimension Title, by entering a Label, Color, Label Font Size, and Label Font Style. You can also set the Axis Line Color and Axis Thickness.

Figure 16: Dimension Title, Axis

Y-axis

If you choose to Show a Y-axis, you can choose a Color, Font Size, display a Dimension Title, enter a Label, set the Font Color, Label Font Size and Label Font Style.

Figure 17: Y-Axis

You can set the Axis Line Color, Axis Thickness, and customize Auto Ticks, selecting an Auto Tick Format, and choosing a display setting for a Negative Format. You can also choose an Axis Range with min/max smoothing to round off your start and end values to a whole number.

Figure 18: Axis, Ticks, Range

2nd Dimension Split

There are several options to display the split of the second dimension in the line chart. The default is Line, but it's also possible to choose Pie (with a setting to vary the Radius) and Donut (settings for Outer Radius and Inner Radius). The following figure shows the settings for Donut.

Figure 19: 2nd Dimension Split

Colors and Legend

In the Colors settings, you can set the colors in the line chart by using a Color Scheme or entering a list of HEX color codes. You can also choose to Reverse Colors or use Consistent Colors.

Figure 20: Colors

You can also customize Null Value Colors, setting the Null Value Color.

Figure 21: Null Value Colors

If you choose to Show a Legend, you can choose the Legend Position, Align the legend, set the Legend Font Color and Font Size, and set a Char Limit.

Figure 22: Legend

Scroll Preview

In the Scroll Preview settings, you can customize the Scroll alignment, Scroll position, set the Max. Data points showing scroll and control the Scroll preview size.

Figure 23: Scroll Preview

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 24: Scrollbar Options

Reference Objects

The Reference Objects menu helps you use Vizlib Line Chart to highlight particular areas or values which need more attention.

You can add dynamic Reference Lines and Annotations using text or Qlik Sense expressions. You can also enable Data Driven Annotations by linking the annotation to fields from a data source and using them as variables. This is especially powerful as a new annotation will automatically be added to the chart for any new record added to the field.

Figure 25: Reference Objects Added

Note: If you add a reference object the a number will display beside the settings.

Reference Lines

This section describes formatting options for using dynamic reference lines in Vizlib Line Chart. To start, open the Reference Lines menu and Select Add Reference Y Axis or Add Reference X Axis, depending on where you want the line to be plotted. When the settings panel appears you'll be asked to enter a reference Value (text or expression) on the axis you've chosen and select the Axis Position. You can also name the reference line by entering a Label.

Figure 26: Reference Line Panel

In the Label settings, you can set the Font Color, Font Size, Font Style, Titles Position and Label Position.

Figure 27: Label

The Line settings lets you set the Line Color, Line Width and Line Style.

Figure 28: Line

If you select Enable Borders, you'll display a border round the label, and set the Background Color, Border Color, Border Width and Radius (changing the radius will make the border square or circle shaped).

Figure 29: Enable Borders

You can also choose to only Show the reference line if a condition is met by entering an expression.

Figure 30: Show

The following figure shows reference lines which are only displayed when a condition is met (Sales Unit figures lower than 230k are referenced as Poor and higher than 450k are Great).

Figure 31: Reference Line Example

Annotations

This section describes formatting options for using Annotations in Vizlib Line Chart. To start, open the Annotations menu and Select Add Annotation. When the settings panel appears you'll be asked to enter a reference Value on x-Axis (the first dimension you want to use) and a Measure value. You can also select the position of the Annotation Axis.

Figure 32: Annotation Panel

In the Title settings, you can set the Title, Title Color, Title Font Style, Title Font Size and Annotation Title Font Family.

Figure 33: Title

If you choose to show an Annotation Description, you can set the Description Color, Description Font Style, Description Font Size, and Annotation Description Font Family.

Figure 34: Annotation Description

The Annotation Type settings lets you select from the list of available annotation types: Annotation Distance, Annotation Angle, Connector Style, Text Padding, Annotation Color, Circle Radius, Double Circle.

You can customize the Annotation Color, Line Width and Line Style for each type.

Figure 35: Annotation Type

You can choose to only Show the annotation if a condition is met by entering an expression.

Figure 36: Show

The following figure shows annotations which are displayed only when the calculation condition is true.

Figure 37: Annotations Example

Data-Driven Annotations

This section describes formatting options for using Data-Driven Annotations in Vizlib Line Chart. To start, open the Data-Driven Annotations menu and select Add Annotation. When the settings panel appears you'll be asked to enter a reference Value on x-Axis (the first dimension you want to use) and a Measure value. You can also select the position of the Annotation Axis.

Note: Data-driven annotations will only be displayed if there are the same number of data values for Value on x-Axis, Measure value and Title (e.g. 4 dimension values, 4 measure values and 4 title values). If you add another (or remove) a value (e.g. 4 dimension values, 5 measure values and 4 title values) data-driven annotations will not display.

Figure 38: Annotation Panel

Note: In the Annotation Panel, you can only enter values without square brackets. For example, if the Measure value is [SalesAnnotation] instead of SalesAnnotation, the Data-Driven Annotations don't work.

In the Title settings, you can set the Title, Title Color, Title Font Style, Title Font Size and Annotation Title Font Family.

Figure 39: Title

If you choose to show an Annotation Description, you can set the Description, Description Color, Description Font Style, Description Font Size, and Annotation Description Font Family.

Figure 40: Annotation Description

You can customize the Annotation Distance, Annotation Angle, Connector Style, Text Padding, the Annotation Color, Connector Size, Rectangle Width, Rectangle Height, Rectangle Color, and the Rectangle Color Opacity.

Figure 41: Annotation Type

You can choose to only Show the annotation if a condition is met by entering an expression.

Figure 42: Show

The following figure shows an example Product Sales Support with Data-Driven Annotations.

Figure 43: Data-Driven Annotations

Interactivity and Alternate State

Interactivity settings enable the users to interact with line chart data, as well as navigate within the line chart to create the most useful view of your data.

Tooltips

When you enable Use Tooltips, you'll display tooltip text in the line chart. You can choose Tooltip positioning (Sticky or Cursor), Tooltip values (Single or Multi), and the Tooltip Font Size.

Figure 44: Tooltips

Animations, Highlighting, Read-Only, Zoom to Scroll

When you enable Animations, users will be able to select multiple rows and accumulate selections until they're applied. You can also apply Highlighting when hovering the cursor over line chart elements, deactivate chart selections with Read-Only and use the scroll function to enlarge parts of the chart with Zoom to Scroll.

Figure 45: Animations

Prevent Label Overlapping, Context Menu, Full Screen Icon

You can also choose to enable a setting to Prevent label overlapping, display a Context Menu to make display changes in analysis mode, and display a Full Screen Icon.

Note: Since the Qlik Sense September 2020 release, Take Snapshot Icon is no longer controlled by the property panel, and can be found in the Hover menu when the sheet is in analysis mode.

Figure 46: Prevent Label Overlapping

Alternate State

Alternate States permits you to assign your Vizlib Line Chart to an alternate selection state, which you can then use to perform comparative analysis between sets of multiple data items. If you want to add the object to master visualizations, choose <inherited state> from Set Alternate State to Object. You can also choose to display an Alternate States Manager, and select Show Alternate State Icon. You can find more information about working with alternate states here.

Figure 47: Alternate State