bulletchart properties

EXPERIMENTAL.

This API is under development. Do not rely on it. It may change or be removed in future versions.

These are the properties used by Qlik Sense bullet charts. For more information about bullet charts and how they are used, see Bullet chart.

Version history

Version history
Version state	Details
Introduced	June 2020

Properties

version

Type: String

Current version of this generic object definition.

Default: 1.0.0

showTitles

Type: Boolean

Show title for the visualization.

Default: true.

showDetails

Type: Boolean

Sets if visualization details should be shown.

Default: false

title

Type: String | qStringExpression

Visualization title shown if "showTitles": true.

subtitle

Type: String | qStringExpression

Visualization subtitle shown if "showTitles": true.

footnote

Type: String | qStringExpression

Visualization footnote shown if "showTitles": true.

disableNavMenu

Type: Boolean

Disables the hover menu in the visualization.

Default: false

qHyperCubeDef

Type: Object

The hypercube definition used by most visualizations.

A subset of the properties available in the qHyperCubeDef is presented here. These properties are either required or have different defaults than those of the engine API. For complete documentation of all available properties, see Engine API: HyperCubeDef.

qDimensions

Type: Array

Description: Extends NxDimension, see Engine API: NxDimension.

Additional properties:

qDef

Type: Object

Description: Extends NxInlineDimensionDef, see Engine API: NxInlineDimensionDef.

qDef properties
Name	Type	Description
autoSort	Boolean	Set to automatically sort the dimension. Default: true
cId	String	ID used by the client. Must be unique within the current chart.
othersLabel	StringExpressionContainer	String expression container.

qAttributeExpressions

Type: Array

Description: Extends NxAttrExprDef, see Engine API: NxAttrExprDef.
- id
  
  Type: String
  
  Description: All qAttributeExpressions IDs are specifically for use with custom tooltips.
  - customTooltipExpression: An AttributeExpression with this ID sets the extra tooltip measure.
  - customTooltipTitle: An AttributeExpression with this ID sets the tooltip title.
  - customTooltipDescription: An AttributeExpression with this ID sets the tooltip description.
  - customTooltipImages: An AttributeExpression with this ID sets the tooltip image.

qMeasures

Type: Array

Description: Extends NxMeasure, see Engine API: NxMeasure.

The maximum number of measures that can be set for this chart type is 15.

Additional properties:

qDef

Type: Object

Description Extends NxInlineMeasureDef, see Engine API: NxInlineMeasureDef.

Additional properties:

autoSort

Type: Boolean

Description: Set to automatically sort the measure. Default: true.
cId

Type: String

Description: ID used by the client. Must be unique within the current chart.
isCustomFormatted

Type: Boolean

Description: Set to true to toggle off the default client formatting.
numFormatFromTemplate

Type: Boolean

Description: When enabled, the number format to use can be selected from multiple predefined formats based on the desired type: number or date. Default: true.
othersLabel

Type: StringExpressionContainer
useSegments

Type: Boolean

Description: Set to true to customize segment colors. Default: false

conditionalColoring

Type: Object

Description: Information about limits and colors for segments.

segments

Type: Object

limits

Type: Array
- value
  Type: Integer or ValueExpression
  
  Description: Numerical value for the limits between the color segments in the chart.
- gradient
  Type: Boolean
  
  Description: Set gradient of the color. Default: false

paletteColors

Type: Array

paletteColors properties
Name	Type	Description
index	Integer	Index in the palette. The default Qlik Sense color palette: -1: set to use custom color that is not in the palette. 0: No color 1: White, HEX: #ffffff 2: Light green, HEX: #46c646 3: Green, HEX: #276e27 4: Light blue, HEX: #b6d7ea 5: Blue, HEX: #7db8da 6: Dark blue, HEX: #4477aa 7: Purple, HEX: #8e477d 8: Yellow, HEX: #ffcf02 9: Orange, HEX: #f8981d 10: Red, HEX: #f93f17 11: Brown, HEX: #633d0c 12: Light gray, HEX: #b0afae 13: Gray, HEX: #7b7a78 14: Dark gray, HEX: #545352 15: Black, HEX: #000000 Default: 6
color	String	Color as HEX string. Mandatory if "index": "-1".

autoMinMax

Type: Boolean

Description: Set to true to customize the ranges of measure. Default: false
minMax

Type: String

Description: Set custom max/min. Default \"min\". Supported type are: 'min'|'max'|'minMax'.
min

Type: Integer or ValueExpression

Description: Set the min value of the range.
max

Type: Integer or ValueExpression

Description: Set the max value of the range.

qAttributeExpressions

Type: Array

Description: Extends NxAttrExprDef, see Engine API: NxAttrExprDef.
- id
  
  Type: String
  
  Description: If set to `\"bullet-target\"` the expression will be interpreted as the target for the specific measure. If set to `\"bullet-segment\"` the expression will be interpreted as a segment limit.

qSuppressMissing

Type: Boolean

Description: Removes missing values. Default: true

qSuppressZero

Type: Boolean

Description: Removes zero values. Default: false

color

Type: Object

Description: Color settings. Most color options for visualizations are set in the color object in the options. You activate custom coloring by setting auto: false, which turns off auto-coloring. If auto: true, no other properties need to be defined in the color object.

The following parameters can be set in the color object:

color properties
Name	Type	Description
auto	Boolean	Description: Set to use automatic coloring. When set to true, color settings are based on the visualization used. Default: true
paletteColor	Object	Description: Color information structure. Holds the actual color and index in palette. color: Type: String Description: Color as hex string (mandatory if index: -1) index: Type: Integer Description: Index in palette.
mode	String	Description: Sets the coloring mode for the visualization when auto-coloring has been switched off (auto: false). Default: primary Can be one of: primary: Type: Object Description: A single color (by default blue) is used for all items in the chart. In visualizations that do not benefit from multiple colors, for example, bar charts with one dimension and scatter plots, single color is the default setting. byExpression Type: Object Description: Coloring is based on an expression, which in most cases is a color code. Details are set in the expressionIsColor properties.
target	Object	Description: The target object is used to define the color of target. Default: { index: -1, color: '#000000' } Properties: paletteColor: Type: Object Description: Color information structure. Holds the actual color and index in palette. color: Type: String Description: Color as hex string (mandatory if index: -1) index: Type: Integer Description: Index in palette.

tooltip

Type: Object

Description: Custom tooltip settings.

auto
Type: Boolean
Description: Determines if the custom tooltip is displayed or not.
If set to false, custom tooltip is displayed. Default: true
data
hideBasic
Type: Boolean
Description: Hides all the basic tooltip content except the dimension and the custom tooltip content.
If set to true, basic tooltip content is hidden. Default: false
chart
Type: Object
Description: The chart objects are used to define the chart that is displayed by the custom tooltip.
- object
  Type: MasterVisualizationChartObject
  Description: Contains the master visualizations available to add to the tooltip.
  - refId
    Type: String
    Description: Input field containing the qExtendsId of the visualization, where qExtendsId is the unique id of the master visualization.
- style
  Type: MasterVisualizationChartStyle
  Description: Determines the styling available for the chart in the tooltip.
  - size
    Type: String
    Description: Size of the chart when it is displayed. One of:
    - small
    - medium
    - large
    The small, medium, and large settings yield fixed pixel sizes for the chart container. The chart is scaled to fit the tooltip.
imageComponents
Type: Array
Description: The imageComponents objects are used to define the images displayed by the custom tooltip.
- type
  Type: String
  Description: Type of the image for the current selection. One of:
  - media library
  - url
- size
  Type: String
  Description: Size of the image when it is displayed. One of:
  - small
  - medium
  - large
  - original
  The small, medium, and large settings yield fixed pixel sizes for the image container. Setting the value to original maintains the size unless it exceeds the limit of the tooltip max size. The image is scaled to fit the tooltip if it exceeds the limit.
- ref
  Type: String, StringExpression, or MediaLibraryRef
  Description: The reference value of the image.
  - MediaLibraryRef
    Type: Object
    Description: Media Library Reference structure.
    - qStaticContentUrlDef
      Object
      Description: Media Library structure that is evaluated by the engine.
      - qUrl

dimensionAxis

Type: Object

Dimension axis settings.

dimensionAxis properties
Name	Type	Description
show	String	Defines if titles and labels should be visible. Can be one of: all labels title none Default: all
label	String	Defines the label orientation. Can be one of: auto horizontal tilted Default: auto
dock	String	Axis docking position. Can be: near far Default: near

gridLine

Type: Object

Grid line settings.

gridLine properties
Name	Type	Description
auto	Boolean	Set to use automatic grid line spacing. Default: true
spacing	Integer	Grid line spacing. Used only when "auto": false. One of: 0: no lines 1: wide 2: medium 3: narrow Default: 2

measureAxis

Type: Object

Measure axis settings.

measureAxis properties
Name	Type	Description
show	String	Set to display the labels and titles. Can be one of: all labels title none Default: all
dock	String	Sets the axis docking position. Can be one of: near far Default: near
spacing	Number	Set the axis scale: Default: 1
commonAxis	Boolean	When set to true, use common axis. Default: false
commonRange	Boolean	When set to true, use common range. Default: false

orientation

Type: String

Orientation settings. Can be:

horizontal
vertical

If vertical, the dimension axis can only be docked on bottom or top and measure axis on left or right.

Default: vertical

scrollbar

Type: String

Set the styling of the scroll bar. Can be one of:

bar
none

Default: bar

scrollStartPos

Type: Number

Scroll Alignment. Generally decides if the scroll starts at the beginning or end of the data.

0: the scroll bar starts at the left/top of the chart
1: the scroll bar starts at the right/bottom of the chart

dataPoint

Type: Object

Data point settings.

dataPoint properties
Name	Type	Description
showLabels	Boolean	Set to show labels on data points. Default: false
showSegmentLabels	Boolean	Set to show labels on segments (only for stacked bar charts). Only applicable if showLabels is set to true.
showTotalLabels	Boolean	Set to show total labels (only for stacked bar charts). Only applicable if showLabels is set to true.

Example

In this example, we want to create a simple bullet-chart with two measures, three color segments (two limits) and a target. The limits and target are hard-coded numbers.

app.visualization.create(
    "bulletchart",
    [
        {
            qLibraryId: "",
            qDef: {
                qDef: "Sum(SalesDenmark)",
                qLabel: "Denmark",
                useSegments: true,
                conditionalColoring: {
                    segments: {
                        limits: 
                        [
                            {
                                value: 150000,
                            },
                            {
                                value: 250000,
                            },
                        ],
                        paletteColors: 
                        [
                            {
                                color: "#959291",
                            },
                            {
                                color: "#adaca9",
                            },
                            {
                                color: "#d7d6d5",
                            },
                        ],
                    },
                },
                autoMinMax: true,
            },
            qAttributeExpressions: 
            [
                {
                    qExpression: "290000",
                    qLibraryId: "",
                    qAttribute: true,
                    id: "bullet-target",
                },
                {
                    qExpression: "150000",
                    qLibraryId: "",
                    qAttribute: true,
                    id: "bullet-segment",
                },
                {
                    qExpression: "245000",
                    qLibraryId: "",
                    qAttribute: true,
                    id: "bullet-segment",
                },
            ],
        },
        {
            qLibraryId: "",
            qDef: {
                qDef: "Sum(SalesSweden)",
                qLabel: "Sweden",
                useSegments: true,
                conditionalColoring: {
                    segments: {
                        limits: [
                            {
                                value: 180000,
                            },
                            {
                                value: 275000,
                            },
                        ],
                        paletteColors: [
                            {
                                color: "#959291",
                            },
                            {
                                color: "#adaca9",
                            },
                            {
                                color: "#d7d6d5",
                            },
                        ],
                    },
                },
                autoMinMax: true,
            },
            qAttributeExpressions: 
            [
                {
                    qExpression: "281000",
                    qLibraryId: "",
                    qAttribute: true,
                    id: "bullet-target",
                },
                {
                    qExpression: "180000",
                    qLibraryId: "",
                    qAttribute: true,
                    id: "bullet-segment",
                },
                {
                    qExpression: "275000",
                    qLibraryId: "",
                    qAttribute: true,
                    id: "bullet-segment",
                },
            ],
        },
    ],
    {
        title: "Sales target",
    }
)
.then(function (vis) {
    vis.show("QV01");
});

A bar graph titled "Sales target" showing Sweden's Sales target one third of the way to 300k from 140k while Denmark is just above 140k.

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here