bulletchart properties
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 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.
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
- value
-
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".
-
- segments
-
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:
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.
|
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:
|
target | Object |
Description: The target object is used to define the color of target. Default: { index: -1, color: '#000000' } Properties:
|
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.
- refId
- 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.
- size
- object
- 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
Type: String
Description: Media library path for the image in the app. Used only when type is set to media library.
- qStaticContentUrlDef
- type
dimensionAxis
Type: Object
Dimension axis settings.
Name | Type | Description |
---|---|---|
show | String |
Defines if titles and labels should be visible. Can be one of:
Default: all |
label | String |
Defines the label orientation. Can be one of:
Default: auto |
dock | String |
Axis docking position. Can be:
Default: near |
gridLine
Type: Object
Grid line settings.
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:
Default: 2 |
measureAxis
Type: Object
Measure axis settings.
Name | Type | Description |
---|---|---|
show | String |
Set to display the labels and titles. Can be one of:
Default: all |
dock | String |
Sets the axis docking position. Can be one of:
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.
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");
});