treemap properties
This API is reliable and breaking changes are unlikely.
treemap()
These are the properties used by Qlik Sense treemaps.
Version history
Version state | Details |
---|---|
Introduced | 2.2 |
Properties
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
showDisclaimer
Type: Boolean
Set to false to hide visualization disclaimers that appear at the bottom of the chart, such as limited data or the chart has negative values.
Default: true
qHyperCubeDef
Type: Object
The hypercube definition used by most visualizations.
A subset of the properties available in the qHyperCubeDef is presented here. 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. -
qAttributeDimensions
Type: Array
Description: Extends NxAttrDimDef, see Engine API: NxAttrDimDef.
-
id
Type: String
One of:
- colorByAlternative: colors the chart using different dimensions. Can be used together with color.mode="byDimension" for attribute dimensions.
- colorByExpression: used together with color.mode="byExpression".
-
-
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.
qDef Properties Name Type Description autoSort Boolean Set to automatically sort the measure.
Default: true
cId String ID used by the client. Must be unique within the current chart. numFormatFromTemplate Boolean When enabled, the number format to use can be selected from multiple predefined formats based on the desired type: number or date.
Default: true
isCustomFormatted Boolean Set to true to toggle off the default client formatting. othersLabel StringExpressionContainer String expression container. -
qAttributeExpressions
Type: Array
Extends NxAttrExprDef, see Engine API: NxAttrExprDef.
id
Type: String
One of:
- cellBackgroundColor: for attribute expression, expression for background color of table cell.
- cellForegroundColor: for attribute expression, expression for text color of table cell.
qLayoutExclude
Type: Object
customErrorMessage
Type: Object
Set to define custom error messages.
-
calcCondition
Type: String
Description: Deprecated. Use qCalcCondition.qMsg instead. Set to customize the calculation condition unfilled message.
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
labels
Type: Object
Label settings for treemaps.
Name | Type | Description |
---|---|---|
auto | Boolean |
Set automatic label handling. Default: true |
headers | Boolean |
Display labels on headers. Default: true |
overlay | Boolean |
Display overlay labels. Default: true |
leaves | Boolean |
Display labels on leaves. Default: true |
values | Boolean |
Display data point values. Default: true |
color
Type: Object
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:
auto
Type: Boolean
Set to use automatic coloring.
When "auto": true, color settings are based on the visualization used and the number of dimensions and measures, that is, the settings are not fixed, but are dependent on the data input.
Default: true
mode
Type: String
Sets the coloring mode for the visualization when auto-coloring has been switched off ("auto": false). Can be one of:
- primary: a single color (by default blue) is used for all items in the chart. In visualizations that do not benefit from multiple colors (bar charts with one dimension and scatter plots), single color is the default setting.
-
byDimension: coloring is based upon the amount of dimension values. Details are set in the byDimensionDef property.
Information notebyDimension can only be used in conjunction with an attribute dimension on the dimension to color by, as shown in the example below.{ "qDef": { "qFieldDefs": [ "NetScoreName" ] }, "qAttributeDimensions": [ { "qDef": "NetScoreName", "id": "colorByAlternative", "label": "Year" } ] } -
byExpression: coloring is based on an expression, which in most cases is a color code. Details are set in the expressionIsColor, expressionLabel and colorExpression properties.
- byMeasure: coloring is based on the measure value. Details are set in the byMeasureDef property.
- byMultiple: can be used when more than one measure is used. By default, 12 colors are used for the dimensions. The colors are reused when there are more than 12 dimension values.
useBaseColors
Type: String
Only applicable when "mode": "primary" or "mode": "byMultiple" has been defined.
Use colors encoded in master items. Should only be defined when a master dimension or master measure used in the visualization has a color assigned to it.
One of:
- off
- measure: use colors encoded in master measure.
- dimension: use colors encoded in master dimension.
Default: off
singleColor
Type: Integer
Deprecated. Use paletteColor instead.
Set to use single color.
Default: 3
paletteColor
Type: Object
The paletteColor object is used to define the color when you color by single color ("mode": "primary"). It has the following properties:
Name | Type | Description |
---|---|---|
index | Integer |
Index in the palette. The default Qlik Sense color palette:
Default: 6 |
color | String |
Color as HEX string. Mandatory if "index": "-1". |
persistent
Type: Boolean
Set to true to use persistent colors on data points between selection states. Only applicable when using one dimension and when "mode": "byDimension" or when "mode": "byMultiple".
Default: false
expressionIsColor
Type: Boolean
Set to true to define whether the result of the expression is a valid CSS3 color.
Only applicable when "mode": "byExpression".
Default: true
expressionLabel
Type: String
Defines the label on tool tips when using a coloring expression. Only applicable when "mode": "byExpression" and only used if "expressionIsColor": false
colorExpression
Type: Value Expression Container
Sets the color expression to be used when "mode": "byExpression" is defined.
Supported formats:
- RGB
- ARGB
- HSL
Example:
measureScheme
Type: String
Color scheme when "mode": "byMeasure". Can be one of:
- sg: (sequential gradient) the transition between the different color groups is made using different shades of colors. High measure values have darker hues
- sc: (sequential classes) the transition between the different color groups is made using distinctly different colors.
- dg: (diverging gradient) used when working with data that is ordered from low to high, for instance, to show the relationship between different areas on a map. Low and high values have dark colors, mid-range colors are light.
- dc: (diverging classes) can be seen as two sequential classes combined, with the mid-range shared. The two extremes, high and low, are emphasized with dark colors with contrasting hues, and the mid-range critical values are emphasized with light colors.
Default: sg
useMeasureGradient
Type: Boolean
Set to true if you want to apply the colors defined for library measures when used. Only applicable if "mode": "byMeasure".
Default: true
dimensionScheme
Type: String
Color scheme when "mode": "byDimension" or "mode": "byMultiple". Can be one of:
- 12: 12 colors where all can be distinguished by people with vision deficiency.
- 100: 100 colors where not all can be distinguished by people with vision deficiency
Default: 12
useDimColVal
Type: Boolean
Set to true if you want to apply the colors defined for library dimensions when used. Only applicable if "mode": "byDimension".
Default: true
reverseScheme
Type: Boolean
Set to true to reverse the color scheme.
autoMinMax
Type: Boolean
Set to false to define custom color range. Custom color range is only applicable when coloring is by measure ("mode": "byMeasure") or by expression ("mode": "byExpression").
When coloring is by expression, "expressionIsColor": "false" must be set for custom color range to work.
Default: true
measureMin
Type: Value Expression Container
Set the min value for the color range.
Only applicable if autoMinMax: false. Can be used in conjunction with measureMax or by its own.
measureMax
Type: Value Expression Container
Set the max value for the color range.
Only applicable if autoMinMax: false. Can be used in conjunction with measureMin or by its own.
legend
Type: Object
Legend settings.
Name | Type | Description |
---|---|---|
show | Boolean |
Set to show the legend. Default: true |
dock | String |
Sets the legend position. Can be one of:
Default: auto |
showTitle | Boolean |
Show the legend title. Default: true |
Example using Visualization API
In this example we create a basic treemap, containing one dimension and one measure, and with a custom title.
app.visualization.create(
'treemap',
[
{
"qDef": {
"qFieldDefs": [
"NetScoreName"
]
},
"qNullSuppression": true
},
{
"qDef": {
"qLabel": "Frequency",
"qDef": "Count(NetScoreName)"
}
}
],
{
"showTitles": true,
"title": "Net score outcome"
}
).then(function(vis){
vis.show("QV01");
});