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.

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.
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.

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 and label.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: Backbround 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 global object 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.

Information noteMost global object properties can also be defined on chart-type level. If done, this overrides the properties set on the global object 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"
```

Example

"listBox": {
  "backgroundColor": "@light",
  "title": {
    "main": {
      "color": "@default",
      "fontSize": "@font-normal",
      "fontFamily": "sans-serif"
    }
  },
  "content": {
    "color": "@default",
    "fontSize": "@font-normal",
    "fontFamily": "sans-serif"
  }
}

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.
  - defalut: 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",
    "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"
            }
        },
        "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"]
        }
    ]
}

Theme JSON properties

object

title

label

axis

grid

referenceLine

legend

{chart-type}

Chart types

barChart

boxPlot

bulletChart

comboChart

distributionPlot

filterpane

gauge

histogram

kpi

lineChart

listBox

mapChart

pieChart

pivotTable

scatterPlot

straightTable

textImage

treemap

waterfallChart

{extension-name}

palettes

scales

sheet

Example

ON THIS PAGE

`{chart-type}`

`{extension-name}`