Custom theme JSON properties
These are common properties of the JSON file top level structure.
Property | Description |
---|---|
_inherit |
Defines if the custom theme inherits style properties from the Sense Classic theme. Properties defined in the JSON file override the inherited properties. Default or undefined: true. Example: "_inherit": false,
|
_cards |
Optional. Defines if the custom theme should style the objects on the sheets as cards. Default or undefined: false. Example: "_cards": false,
|
_variables |
Optional. Variables that can be referenced within the JSON file. Information noteVariable names must be prefixed with @.
Example: "_variables": {
"@default": "#555555",
"@dark": "#333333",
"@light": "#eeeeee",
"@H1": "24px",
"@H2": "18px",
"@H3": "14px",
"@H4": "13px",
"@H5": "12px",
"@font-normal": "12px"
}
|
custom_styles |
Optional. Reference to a custom style sheet that will be inserted when theme is applied. Information noteAlthough adding custom CSS files is possible, not all CSS rules work at all times in Qlik Sense. For greater stability, use a JSON file instead.
Example: "customStyles": [{
"cssRef": "theme.css",
"classRef": "my-theme"
}]
|
color |
Font color. This setting can be overridden by defining the color property on any level that supports color. Example: "color": "@default"
|
fontSize |
Font size. This setting can be overridden by defining the fontSize property on any level that supports fontSize. Example: "fontSize": "@font-normal"
|
fontFamily |
Font (typeface) Can be specified as a list of prioritized fonts and generic family names, separated by a comma. This setting can be overridden by defining the fontFamily property on any level that supports fontFamily. Example: "fontFamily": "Arial, Helvetica, sans-serif"
|
backgroundColor |
Background color of charts. This setting can be overridden by defining the background color property on chart-type level. Example: "backgroundColor": "@light"
|
object |
Object styling. object for more details. Example: "object": {
"line": {
...
},
"title": {
...
},
"label": {
...
},
"axis": {
...
},
"grid": {
...
},
"referenceLine": {
...
},
"legend": {
...
},
"barChart": {
...
},
"boxPlot": {
...
},
"distributionPlot": {
...
},
"filterpane": {
...
},
"kpi": {
...
},
"gauge": {
...
},
"histogram": {
...
},
"lineChart": {
...
},
"listBox": {
...
},
"mapChart": {
...
},
"pieChart": {
...
},
"pivotTable": {
...
},
"scatterPlot": {
...
},
"straightTable" : {
...
},
"textImage": {
...
},
"treemap": {
...
},
"waterfallChart" : {
...
}
}
|
dataColors |
Data color properties.
Example: "dataColors": {
"primaryColor": "#0000FF",
"othersColor": "#808080",
"errorColor": "#FF0000",
"nullColor": "#FFFF00"
}
|
palettes |
Customized color palette properties. palettes for more details. |
scales |
Color scheme properties. scales for more details. |
sheet |
Properties for the background color of the sheet title. sheet for more details. |
object
These are the common properties of the object structure.
title
Title properties. This setting can be overridden by defining the title property on chart-type level.
Property | Description |
---|---|
main |
Main title properties.
|
subTitle |
Subtitle properties.
|
footer |
Footer properties.
|
Example:
label
Label properties. This setting can be overridden by defining the label property on chart-type level for charts that have labels.
Label properties are supported for the following chart types:
Chart type | label.name.color | label.name.fontSize | label.value.color | label.value.fontSize |
---|---|---|---|---|
barChart | - | - | ||
bulletChart | - | - | ||
gauge | - | - | - (calculated) | |
histogram | - | - | ||
kpi | - (calculated) | - | - (calculated) | |
lineChart | - | - | ||
mapChart | - | - | - | |
pieChart | - (calculated) | |||
pieChart (donut) | ||||
scatterPlot | - | - | ||
waterfallChart | - | - | - |
Note that label.name.fontFamily and label.value.fontFamily are supported by all chart types.
Property | Description |
---|---|
name |
Label name properties.
|
value |
Label value properties.
|
Example:
axis
Axis properties. This setting can be overridden by defining the axis property on chart-type level for charts with axes (bar charts, box plots, combo charts, distribution plots, gauges, histograms, line charts, scatter plots, and waterfall charts).
For pie charts, axis.title can be overridden and is used for styling the dimension label.
Property | Description |
---|---|
title |
Axis title properties.
|
label |
Axis label properties.
|
line |
Axis line properties.
|
Example:
grid
Grid properties. This setting cannot be overridden on chart-type level.
Property | Description |
---|---|
line |
Line properties.
|
Example:
referenceLine
Reference line properties. This setting cannot be overridden on chart-type level.
Property | Description |
---|---|
label |
Label properties.
|
outOfBounds |
Out of bounds properties.
|
Example:
legend
Legend properties. This setting can be overridden by defining the legend property on chart-type level for charts with legends (bar charts, combo charts, line charts, map charts, pie charts, scatter plots, treemaps, waterfall charts).
Property | Description |
---|---|
title |
Legend title properties.
|
label |
Legend label properties.
|
Example:
{chart-type}
See Chart types for more details.
Chart type can be:
- barChart
- boxPlot
- comboChart
- distributionPlot
- filterpane
- gauge
- histogram
- kpi
- lineChart
- listBox
- mapChart
- pieChart
- pivotTable
- scatterPlot
- straightTable
- textImage
- treemap
- waterfallChart
Chart types
These are the common chart type properties that can exist within the object structure. The properties listed for each chart are specific to them.
barChart
Bar chart properties.
Property | Description |
---|---|
outOfRange |
Out of range properties.
|
boxPlot
Box plot properties.
Property | Description |
---|---|
box |
Box properties.
|
bulletChart
Bullet chart properties.
Property | Description |
---|---|
outOfRange |
Out of range properties.
|
comboChart
Combo chart properties.
distributionPlot
Distribution plot properties.
Property | Description |
---|---|
box |
Box properties.
|
filterpane
Filter pane properties.
gauge
Gauge properties.
histogram
Histogram properties.
kpi
KPI properties.
lineChart
Line chart properties.
Property | Description |
---|---|
outOfRange |
Out of range properties.
|
listBox
List properties. Used to style filter panes and the list boxes in the selections tool.
Property | Description |
---|---|
content |
List box content properties.
|
mapChart
Map chart properties.
Property | Description |
---|---|
label |
Map chart label properties.
Example: "label": {
"value": {
"dark": {
"color": "@grayscale-20"
},
"light": {
"color": "@grayscale-70"
}
}
}
|
pieChart
Pie chart properties.
Property | Description |
---|---|
axis |
Pie chart axis properties.
|
label |
Pie chart label properties. Information noteOnly applicable for pie charts presented as a donut.
|
pivotTable
Pivot table properties.
Property | Description |
---|---|
header |
Pivot table header properties.
|
content |
Pivot table content properties.
|
scrollbar |
Pivot table scroll bar properties.
|
scatterPlot
Scatterplot properties.
straightTable
Table properties.
Property | Description |
---|---|
header |
Straight table header properties.
|
content |
Straight table content properties.
|
scrollbar |
Straight table scroll bar properties.
|
textImage
Text & image properties.
treemap
Treemap properties.
Property | Description |
---|---|
branch |
Branch properties.
|
leaf |
Leaf properties.
|
waterfallChart
Waterfall chart properties.
Property | Description |
---|---|
value |
Value properties.
|
shape |
Line chart label properties.
|
{extension-name}
Extension properties for this specific extension.
palettes
These are the common color palette properties.
Property | Description |
---|---|
data |
Properties for data palette. These are used for Color by dimension in the properties panel.
|
ui |
Properties for the UI palette. You can define several palettes but the first palette defined in ui is used in the color picker for example when coloring by single color.
|
scales
These are the common color scheme properties. The scales are used for Color by measure in the properties panel.
Property | Description |
---|---|
name |
Name of the color scheme. Example: "name": "Custom Sequential Gradient"
|
translation |
Display name for the color scheme in the UI. Example: "translation": "Custom Sequential Gradient"
|
type |
Type of the color scheme.
Example: "type": "gradient"
|
propertyValue |
Property value of the color scheme.
Example: "propertyValue": "sg"
|
scale |
Colors included in the color scheme, scaled from left to right. Example: "scale": [ "#1A2980", "#26D0CE" ]
|
sheet
These are the sheet title background color properties.
Property | Description |
---|---|
title |
Properties for sheet title background color.
|