Custom theme JSON properties

This topic does not include all possible properties, and all properties listed in this topic are not mandatory.
Colors should be defined using hexadecimal values.

JSON structure

These are common properties of the JSON file top level structure.

Property Description
_inherit

Defines if the custom theme inherits style properties from the default theme (Sense Classic). Properties defined in the JSON file override the inherited properties.

Default or undefined: true.

Example:  

"_inherit": false,
_variables

Optional.

Variables that can be referenced within the JSON file.

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.

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

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

object

These are the common properties of the object structure.

Property Description
title

Title properties. This setting can be overridden by defining the title property on chart-type level.

Property Description
main

Main title properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@font-normal"
subTitle

Subtitle properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@font-normal"
footer

Footer properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@font-normal"
backgroundColor

Background color.

Example:  

"backgroundColor": "@light"

Example:  

"title": { "main": { "color": "@default", "fontSize": "@font-normal" }, "subTitle": { "color": "@default", "fontSize": "@font-normal" }, "footer": { "color": "@default", "fontSize": "@font-normal", "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 type label.name.color label.name.fontSize label.value.color label.value.fontSize
barChart m m
gauge m (calculated)
histogram m m
lineChart m m
pieChart m m (calculated) m
pieChart (donut) m m m m
scatterPlot m m
waterfallChart m

Label properties:

Property Description
name

Label name properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@font-normal"
value

Label value properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@font-normal"

Example:  

"label": { "name": { "color": "@default", "fontSize": "10px" }, "value": { "color": "@default", "fontSize": "10px" } }
axis

Axis properties. This setting can be overridden by defining the axis property on chart-type level for charts with axes (bar charts, box plots, combo charts, distribution plots, gauges, histograms, line charts, scatter plots, and waterfall charts).

For pie charts, axis.title can be overridden and is used for styling the dimension label.

Property Description
title

Axis title properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@font-normal"

 

label

Axis label properties.

Property Description
name

Properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@font-normal"
line

Axis line properties.

Property Description
major

Axis title properties.

Property Description
color

Font color.

Example:  

"color": "@default"
minor

Axis label properties.

Property Description
color

Font color.

Example:  

"color": "@default"

Example:  

"axis": { "title": { "fontSize": "@font-normal", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }
grid

Grid properties. This setting cannot be overridden on chart-type level.

Property Description
line

Line properties.

Property Description
highContrast

High contrast property.

Property Description
color

Font color.

Example:  

"color": "@default"
major

Major property.

Property Description
color

Font color.

Example:  

"color": "@default"
minor

Minor property.

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

Property Description
label

Label properties.

Property Description
name

Name properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@normal"
outOfBounds

Out of bounds properties.

Property Description
color

Font color.

Example:  

"color": "@default"
backgroundColor

Background color.

Example:  

"backgroundColor": "@light"
fontSize

Font size.

Example:  

"fontSize": "@normal"

Example:  

"referenceLine": { "label": { "name": { "color": "@default", "fontSize": "@font-normal" } }, "outOfBounds": { "color": "@default", "backgroundColor": "@default", "fontSize": "@H6" } }
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, pie charts, scatter plots, treemaps, waterfall charts).

Property Description
title

Legend title properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@normal"
label

Legend label properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@normal"

Example:  

"legend": { "title": { "color": "@default", "fontSize": "@font-normal" }, "label": { "color": "@default", "fontSize": "@font-normal" } }
{chart-type}

Chart type can be:

  • barChart
  • boxPlot
  • comboChart
  • distributionPlot
  • filterpane
  • gauge
  • histogram
  • kpi
  • lineChart
  • listBox
  • mapChart
  • pieChart
  • pivotTable
  • scatterPlot
  • straightTable
  • textImage
  • treemap
  • waterfallChart
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 for more details.

Chart types

These are the common chart type properties that can exist within the object structure. The properties listed for each chart are specific them.

Most global object properties can also be defined on chart-type level. If done, this overrides the properties set on the global object level.
Property Description
barChart

Bar chart properties.

Property Description
outOfRange

Out of range properties.

Property Description
color

Font color.

Example:  

"color": "@default"
boxPlot

Box plot properties.

Property Description
box

Box properties.

Property Description
whisker

Properties.

Property Description
stroke

Stroke color.

Example:  

"stroke": "@default"
line

Properties.

Property Description
stroke

Stroke color.

Example:  

"stroke": "@default"
box

Properties.

Property Description
fill

Fill color.

Example:  

"fill": "@default"
stroke

Stroke color.

Example:  

"stroke": "@default"
comboChart

Combo chart properties.

distributionPlot

Distribution plot properties.

Property Description
box

Box properties.

Property Description
fill

Fill color.

Example:  

"fill": "@default"
filterpane

Filter pane properties.

gauge

Gauge properties.

histogram

Histogram properties.

kpi

KPI properties.

lineChart

Line chart properties.

Property Description
outOfRange

Out of range properties.

Property Description
color

Font color.

Example:  

"color": "@default"
listBox

List properties. Used to style filter panes and the list boxes in the selections tool.

Property Description
content

List box content properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@normal"
mapChart

Map chart properties.

pieChart

Pie chart properties.

Property Description
axis

Pie chart axis properties.

Property Description
title

Properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@normal"
label

Pie chart label properties.

Only applicable for pie charts presented as a donut.
Property Description
value

Properties.

Property Description
color

Font color.

Example:  

"color": "@default"
pivotTable

Pivot table properties.

Property Description
header

Pivot table header properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@normal"
content

Pivot table content properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@normal"
scatterPlot

Scatterplot properties.

straightTable

Table properties.

Property Description
header

Straight table header properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@normal"
content

Straight table content properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@normal"
textImage

Text & image properties.

treemap

Treemap properties.

Property Description
branch

Branch properties.

Property Description
backgroundColor

Background color property.

label

Branch label properties.

Property Description
color

Font color.

Example:  

"color": "@default"
fontSize

Font size.

Example:  

"fontSize": "@normal"
leaf

Leaf properties.

Property Description
label

Leaf label properties.

Property Description
fontSize

Font size.

Example:  

"fontSize": "@normal"
waterfallChart

Waterfall chart properties.

Property Description
value

Value properties.

Property Description
color

Properties.

Property Description
default

Default color.

Example:  

"default": "@default"
dark

Dark color.

Example:  

"dark": "@dark"
light

Light color.

Example:  

"light": "@light"
shape

Line chart label properties.

Property Description
positiveValue

Properties.

Property Description
fill

Fill color.

Example:  

"fill": "@default"
negativeValue

Properties.

Property Description
fill

Fill color.

Example:  

"fill": "@default"
subtotal

Properties.

Property Description
fill

Fill color.

Example:  

"fill": "@default"
bridge

Properties.

Property Description
stroke

Stroke color.

Example:  

"stroke": "@default"
{extension-name}

Extension properties for this specific extension.

palettes

These are the common color palette properties.

Property Description
data

Properties for data palette. These are used for Color by dimension in the properties panel.

Property Description
name

Optional.

Name of the palette.

translation

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.

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

Property Description
name

Name of the color scheme.

Example:  

"name": "Custom Sequential Gradient"
translation

Display name for the color scheme in the UI.

Example:  

"translation": "Custom Sequential Gradient"
type

Type of the color scheme.

  • 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" ]

Example