Theme JSON properties
Note: This topic does not include all possible properties, and all properties listed in this topic are not mandatory.
Note: Colors should be defined using hexadecimal values.
These are common properties of the JSON file top level structure.
Common properties
-
_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.
Note: Variable 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.
Note: Although 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.
See 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.
- primaryColor: Primary color property.
- othersColor: Others color property.
- errorColor: Error color property.
- nullColor: Null color property.
- selected: Color property for selected values. This property appears in the selection bar and all listboxes. It also appears when making selections in the Straight table and Pivot table charts in the Visualization bundle.
- alternative: Color property for alternative values. This property appears in the selection bar and all listboxes.
- excluded: Color property for excluded values. This property appears in the selection bar and all listboxes.
- selectedExcluded: Color property for selected excluded values. This property appears in the selection bar and all listboxes.
- possible: Color property for possible values. This property appears in the selection bar and all listboxes.
Example:
"dataColors": {"primaryColor": "#0000FF","othersColor": "#808080","errorColor": "#FF0000","nullColor": "#FFFF00","selected": "#ff9900","alternative": "#D9D9D9","excluded": "#4B4B4B","selectedExcluded": "#888888","possible": "#ffffff"} -
palettes: Customized color palette properties. See palettes for more details.
-
scales: Color scheme properties. See scales for more details.
-
sheet: Properties for the background color of the sheet title. See 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.
Title properties
-
main: Main title properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
subTitle: Subtitle properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
footer: Footer properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif" -
backgroundColor: Background color.
Example:
"backgroundColor": "@light"
-
Example:
"title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" }}
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 types and label support
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:
label.name.fontFamily
andlabel.value.fontFamily
are supported by all chart types.
label properties
-
name: Label name properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
value: Label value properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
Example:
"label": { "name": { "color": "@default", "fontSize": "10px", "fontFamily": "sans-serif" }, "value": { "color": "@default", "fontSize": "10px", "fontFamily": "sans-serif" }}
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.
axis properties
-
title: Axis title properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
label: Axis label properties.
-
name: Properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
-
line: Axis line properties.
-
major: Axis title properties.
-
color: Font color.
Example:
"color": "@default"
-
-
minor: Axis label properties.
-
color: Font color.
Example:
"color": "@default"
-
-
Example:
"axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } }}
grid
Grid properties. This setting cannot be overridden on chart-type level.
grid properties
-
line: line properties.
-
highContrast: High contrast property.
-
color: Font color.
Example:
"color": "@default"
-
-
major: Major property.
-
color: Font color.
Example:
"color": "@default"
-
-
minor: Minor property.
-
color: Font color.
Example:
"color": "@default"
-
-
Example:
"grid": { "line": { "highContrast": { "color": "@default" }, "major": { "color": "@default" }, "minor": { "color": "@default" } }}
referenceLine
Reference line properties. This setting cannot be overridden on chart-type level.
referenceLine properties
-
label: Label properties.
-
name: Name Properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
-
outOfBounds: Out of bounds properties.
-
color: Font color.
Example:
"color": "@default" -
backgroundColor: Background color.
Example:
"backgroundColor": "@light" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
Example:
"referenceLine": { "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "outOfBounds": { "color": "@default", "backgroundColor": "@default", "fontSize": "@H6", "fontFamily": "sans-serif" }}
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).
legend properties
-
title: Legend title properties.
-
color: Font color.
Example:
"color": "@default"-
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
label: Legend label properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
Example
"legend": { "title": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "label": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }}
{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
Note: Most global
object
properties can also be defined on chart-type level. If done, this overrides the properties set on the globalobject
level.
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.
Note: Most global
object
properties can also be defined on chart-type level. If done, this overrides the properties set on the globalobject
level.
barChart
barChart properties
-
outOfRange: Out of range properties.
-
color: Font color.
Example:
"color": "@default"
-
Example
"barChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" } }, "label": { "value": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "outOfRange": { "color": "@default" }}
boxPlot
boxPlot properties
-
box: Box properties.
-
whisker: Properties.
-
stroke: Stroke color.
Example:
"stroke": "@default"
-
-
line: Properties.
-
stroke: Stroke color.
Example:
"stroke": "@default"
-
-
box: Properties.
-
fill: Fill color.
Example:
"fill": "@default" -
stroke: Stroke color.
Example:
"stroke": "@default"
-
-
Example
"boxPlot": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "box": { "whisker": { "stroke": "@default" }, "line": { "stroke": "@default" }, "box": { "fill": "@default", "stroke": "@default" } }}
bulletChart
bulletChart properties
-
outOfRange: Out of range properties.
-
color: Font color.
Example:
"color": "@default"
-
Example
"bulletChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" } }, "label": { "value": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "outOfRange": { "color": "@default" }}
comboChart
Combo chart properties
Example
"comboChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" } }}
distributionPlot
distributionPlot properties
-
box: Box properties.
-
fill: Fill color.
Example:
"fill": "@default"
-
Example
"distributionPlot": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "box": { "fill": "@default" }}
filterpane
Filter pane properties
Example
"filterpane": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }}
gauge
Gauge properties
Example
"gauge": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "label": { "value": { "color": "@default" } }}
histogram
Histogram properties
Example
"histogram": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "label": { "value": { "color": "@default", "fontSize": "40px", "fontFamily": "sans-serif" } }}
kpi
KPI properties
Example
"kpi": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "label": { "name": { "color": "@default", "fontFamily": "@font-family" }, "value": { "fontFamily": "@font-family" } }}
lineChart
lineChart properties
-
outOfRange: Out of range properties.
-
color: Font color.
Example:
"color": "@default"
-
Example
"lineChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" } }, "outOfRange": { "color": "@default" }, "label": { "value": { "color": "@dark", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }}
listBox
List properties. Used to style filter panes and the list boxes in the selections tool.
listBox properties
-
content: List box content properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
dataColors: Data color properties for list boxes.
-
selected: Color property for selected values. This color property appears in all listboxes, including in filter panes, the selection tool, and when searching values in charts.
Example:
"selected": "#ff9900" -
alternative: Color property for alternative values. This color property appears in all listboxes, including in filter panes, the selection tool, and when searching values in charts.
Example:
"alternative": "#D9D9D9" -
excluded: Color property for excluded values. This color property appears in all listboxes, including in filter panes, the selection tool, and when searching values in charts.
Example:
"excluded": "#4B4B4B" -
selectedExcluded: Color property for selected excluded values. This color property appears in all listboxes, including in filter panes, the selection tool, and when searching values in charts.
Example:
"selectedExcluded": "#888888" -
possible: Color property for possible values. This color property appears in all listboxes, including in filter panes, the selection tool, and when searching values in charts.
Example:
"possible": "#ffffff" -
fontSize: Font size.
-
Example
"listBox": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "content": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "dataColors": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "selected": "#0000ff", "alternative": "#D9D9D9", "excluded": "#4B4B4B", "selectedExcluded": "#888888", "possible": "#ffffff"}}
mapChart
mapChart properties
-
label: Map chart label properties.
-
value: Properties.
-
dark.color: Dark font color.
-
light.color: Light font color.
Example:
"label": {"value": {"dark": {"color": "@grayscale-20"},"light": {"color": "@grayscale-70"}}}
-
-
Example
"mapChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "legend": { "title": { "color": "@grayscale-35" }, "label": { "color": "@grayscale-35" } }, "label": { "value": { "dark": { "color": "@grayscale-20" }, "light": { "color": "@grayscale-70" }, "fontSize": "@text" } }}
pieChart
pieChart properties
-
axis: Pie chart axis properties.
-
title: Properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
label: Pie chart label properties.
Note: Only applicable for pie charts presented as a donut.
-
value: Properties.
-
color: Font color.
Example:
"color": "@default"
-
-
-
Example
"pieChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" } }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "value": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }}
pivotTable
pivotTable properties
-
header: Pivot table header properties.
-
color: Font color.
Example:
"color": "@default"-
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
-
content: Pivot table content properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif" -
hover: Properties.
-
backgroundColor: Background color when hovering.
Example:
"backgroundColor": "@light" -
color: Font color when hovering.
Example:
"color": "@default"
-
-
-
scrollbar: Pivot table scroll bar properties.
- size: Scroll bar width.
Example:
"size": "small"
Example
"pivotTable": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "header": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "content": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" } "scrollbar": { "size": "small" }}
scatterPlot
Scatterplot properties
Example
"scatterPlot": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" } }, "label": { "value": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }}
straightTable
straightTable properties
-
header: Straight table header properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
content: Straight table content properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif" -
hover: Properties.
-
backgroundColor: Background color when hovering.
Example:
"backgroundColor": "@light" -
color: Font color when hovering.
Example:
"color": "@default"
-
-
-
scrollbar: Straight table scroll bar properties.
-
size: Scroll bar width.
Example:
"size": "small"
-
Example
"straightTable": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "header": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "content": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" } "scrollbar": { "size": "small" }}
textImage
Text & image properties
Example
"textImage": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }}
treemap
treemap properties
-
branch: Branch properties.
-
backgroundColor: Background color property
-
label: Branch label properties.
-
color: Font color.
Example:
"color": "@default" -
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
-
leaf: Leaf properties.
-
label: Leaf label properties.
-
fontSize: Font size.
Example:
"fontSize": "@font-normal" -
fontFamily: Font (typeface).
Example:
"fontFamily": "sans-serif"
-
-
Example
"treemap": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" } }, "branch": { "backgroundColor": "@default", "label": { "color": "@light", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "leaf": { "label": { "fontSize": "@font-normal", "fontFamily": "sans-serif" } }}
waterfallChart
waterfallChart properties
-
value: Value properties.
-
color: Properties.
-
default: Default color.
-
Example:
"default": "@default" -
dark: Dark color.
Example:
"dark": "@dark" -
light: Light color.
Example:
"light": "@light"
-
-
-
shape: Line chart label properties.
-
positiveValue: Properties.
-
fill: Fill color.
Example:
"fill": "@default"
-
-
negativeValue: Properties.
-
fill: Fill color.
Example:
"fill": "@default"
-
-
subtotal: Properties.
-
fill: Fill color.
Example:
"fill": "@default"
-
-
bridge: Properties.
-
stroke: Stroke color.
Example:
"stroke": "@default"
-
-
Example
"waterfallChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "label": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" } }, "label": { "value": { "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "value": { "color": { "default": "@default", "dark": "@dark", "light": "@light" } }, "shape": { "positiveValue": { "fill": "white" }, "negativeValue": { "fill": "#ccccc" }, "subtotal": { "fill": "#000000" }, "bridge": { "stroke": "#333333" } }}
{extension-name}
Extension properties for this specific extension.
Example
"MyVizExtension": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }}
palettes
These are the common color palette properties.
palettes properties
-
data: Properties for data palette. These are used for Color by dimension in the properties panel.
-
name: Name of the palette. Optional.
-
othersColor: Display name for the color palette in the UI.
Example:
“translation”: “12 colors”
-
propertyValue: Identifier of the palette. Must be unique in the system.
-
type: Type of color palette.
- pyramid
- row
-
scale: Definition of all colors used in the palette. Scales from top to bottom, and left to right.
-
-
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.
-
name: Name of the palette.
-
colors: Colors used in the UI palette. Should always be unique colors defined.
-
scales
These are the common color scheme properties. The scales are used for Color by measure in the properties panel.
scales properties
-
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.
-
gradient
-
class
Example
"type": "gradient"
-
-
propertyValue: Property value of the color scheme
-
sg for Sequential Gradient
-
sc for Sequential Classes
-
dg for Diverging gradient
-
dc for Diverging Classes
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.
sheet properties
-
title: Properties for sheet title background color.
-
private: Private sheets that have not been shared.
-
titleBackgroundColor: Defines the background color of the sheet title.
-
titleBackgroundGradientColor: Defines the color of the gradient within the sheet title.
-
-
-
approved: Published and approved sheets.
-
titleBackgroundColor: Defines the background color of the sheet title.
-
titleBackgroundGradientColor: Defines the color of the gradient within the sheet title.
-
-
published: Published by you or others and not approved.
-
titleBackgroundColor: Defines the background color of the sheet title.
-
titleBackgroundGradientColor: Defines the color of the gradient within the sheet title.
-
Example
Full example of theme.json
{ "_cards": false, "_inherit": false, "_variables": { "@default": "#555555", "@dark": "#333333", "@light": "#eeeeee", "@H1": "24px", "@H2": "18px", "@H3": "14px", "@H4": "13px", "@H5": "12px", "@H6": "10px", "@font-normal": "12px", "@font-family": "sans-serif" }, "sheet": { "title": { "private":{ "titleBackgroundColor":"#ff0000", "titleBackgroundGradientColor":"#ffffff" }, "approved":{ "titleBackgroundColor":"#00ff00", "titleBackgroundGradientColor":"#000000" }, "published":{ "titleBackgroundColor":"#0000ff", "titleBackgroundGradientColor":"#ff0000" } } }, "customStyles": [ { "cssRef": "theme.css", "classRef": "my-theme" } ], "color": "@default", "dataColors": { "selected": "#ff9900", "alternative": "#D9D9D9", "excluded": "#4B4B4B", "selectedExcluded": "#888888", "possible": "#ffffff" }, "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light", "object": { "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "label": { "name": { "color": "@default", "fontSize": "@font-normal" }, "value": { "color": "@default", "fontSize": "@font-normal" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "grid": { "line": { "highContrast": { "color": "@default" }, "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "referenceLine": { "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "outOfBounds": { "color": "@default", "backgroundColor": "@default", "fontSize": "@H6" } }, "legend": { "title": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "label": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "barChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" } }, "label": { "value": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "outOfRange": { "color": "@default" } }, "boxPlot": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "box": { "whisker": { "stroke": "@default" }, "line": { "stroke": "@default" }, "box": { "fill": "@default", "stroke": "@default" } } }, "comboChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" } } }, "distributionPlot": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "box": { "fill": "@default" } }, "filterpane": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } } }, "gauge": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "label": { "value": { "color": "@default" } } }, "histogram": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "label": { "value": { "color": "@default", "fontSize": "40px" } } }, "kpi": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "label": { "name": { "color": "@default", "fontFamily": "@font-family" }, "value": { "fontFamily": "@font-family" } } }, "lineChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" } }, "outOfRange": { "color": "@default" }, "label": { "value": { "color": "@dark", "fontSize": "@font-normal", "fontFamily": "@font-family" } } }, "listBox": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "content": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "dataColors": { "selected": "#ff9900", "alternative": "#D9D9D9", "excluded": "#4B4B4B", "selectedExcluded": "#888888", "possible": "#ffffff" } }, "mapChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } } }, "pieChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "axis": { "title": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" } }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "value": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } } }, "pivotTable": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "header": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "content": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" } }, "scatterPlot": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" } }, "label": { "value": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } } }, "straightTable": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "header": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "content": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" } }, "textImage": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } } }, "treemap": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "legend": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" } }, "branch": { "backgroundColor": "@default", "label": { "color": "@light", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "leaf": { "label": { "fontSize": "@font-normal", "fontFamily": "@font-family" } } }, "waterfallChart": { "backgroundColor": "@light", "title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family", "backgroundColor": "@light" } }, "axis": { "title": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }, "legend": { "label": { "fontSize": "@font-normal", "fontFamily": "@font-family", "color": "@default" } }, "label": { "value": { "fontSize": "@font-normal", "fontFamily": "@font-family" } }, "value": { "color": { "default": "@default", "dark": "@dark", "light": "@light" } }, "shape": { "positiveValue": { "fill": "white" }, "negativeValue": { "fill": "#ccccc" }, "subtotal": { "fill": "#000000" }, "bridge": { "stroke": "#333333" } } } }, "dataColors": { "primaryColor": "blue", "othersColor": "grey", "errorColor": "red", "nullColor": "yellow" }, "palettes": { "data": [ { "name": "First data palette", "translation": "12 colors", "propertyValue": "data-palette-1", "type": "pyramid", "scale": [ ["#4477aa"], ["#4477aa", "#cc6677"], ["#4477aa", "#ddcc77", "#cc6677"], ["#4477aa", "#117733", "#ddcc77", "#cc6677"], ["#332288", "#88ccee", "#117733", "#ddcc77", "#cc6677"], ["#332288", "#88ccee", "#117733", "#ddcc77", "#cc6677", "#aa4499"], [ "#332288", "#44aa99", "#88ccee", "#117733", "#ddcc77", "#cc6677", "#aa4499" ], [ "#332288", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#cc6677", "#aa4499" ], [ "#332288", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499" ], [ "#332288", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#661100", "#cc6677", "#882255", "#aa4499" ], [ "#332288", "#6699cc", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#661100", "#cc6677", "#882255", "#aa4499" ], [ "#332288", "#6699cc", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#661100", "#cc6677", "#aa4466", "#882255", "#aa4499" ] ] }, { "name": "Second data palette", "translation": "4 Colors", "propertyValue": "data-palette-2", "type": "row", "scale": ["#ff00ff", "#00ff00", "#0000ff", "#000000"] } ], "ui": [ { "name": "Palette", "colors": [ "#cccccc", "#aaaaaa", "#111111", "#999999", "#acacac", "#dddddd", "#eeeeee", "#ffffff", "#000000" ] } ] }, "scales": [ { "name": "Custom Sequential Gradient", "translation": "Custom Sequential Gradient", "propertyValue": "sg", "type": "gradient", "scale": ["#1A2980", "#26D0CE"] }, { "name": "Custom Sequential Classes", "translation": "Custom Sequential Classes", "propertyValue": "sc", "type": "class", "scale": ["#d32b1d", "#023474"] }, { "name": "Custom Diverging gradient", "translation": "Custom Diverging gradient", "propertyValue": "dg", "type": "gradient", "scale": ["#1A2980", "#FFFFFF", "#26D0CE", "#d32b1d"] }, { "name": "Custom Diverging Classes", "translation": "Custom Diverging Classes", "propertyValue": "dc", "type": "class", "scale": ["#9C824A", "#EF0107", "#DB0007", "#FFFFFF", "#023474"] } ]}