The fontFamily property is under development. Do not rely on it. It may change or be removed in future versions.
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,
|
||||||||||
| _cards |
Optional. Defines if the custom theme should style the objects on the sheets as cards. Default or undefined: false. Example: "_cards": false,
|
||||||||||
| _variables |
Optional. Variables that can be referenced within the JSON file. Information noteVariable names must be prefixed with @.
Example: "_variables": {
"@default": "#555555",
"@dark": "#333333",
"@light": "#eeeeee",
"@H1": "24px",
"@H2": "18px",
"@H3": "14px",
"@H4": "13px",
"@H5": "12px",
"@font-normal": "12px"
}
|
||||||||||
| custom_styles |
Optional. Reference to a custom style sheet that will be inserted when theme is applied. Example: "customStyles": [{
"cssRef": "theme.css",
"classRef": "my-theme"
}]
|
||||||||||
| color |
Font color. This setting can be overridden by defining the color property on any level that supports color. Example: "color": "@default"
|
||||||||||
| fontSize |
Font size. This setting can be overridden by defining the fontSize property on any level that supports fontSize. Example: "fontSize": "@font-normal"
|
||||||||||
| fontFamily |
Font (typeface) Can be specified as a list of prioritized fonts and generic family names, separated by a comma. This setting can be overridden by defining the fontFamily property on any level that supports fontFamily. Example: "fontFamily": "Arial, Helvetica, sans-serif"
|
||||||||||
| backgroundColor |
Background color of charts. This setting can be overridden by defining the background color property on chart-type level. Example: "backgroundColor": "@light"
|
||||||||||
| object |
Object styling. object for more details. Example: "object": {
"line": {
...
},
"title": {
...
},
"label": {
...
},
"axis": {
...
},
"grid": {
...
},
"referenceLine": {
...
},
"legend": {
...
},
"barChart": {
...
},
"boxPlot": {
...
},
"distributionPlot": {
...
},
"filterpane": {
...
},
"kpi": {
...
},
"gauge": {
...
},
"histogram": {
...
},
"lineChart": {
...
},
"listBox": {
...
},
"mapChart": {
...
},
"pieChart": {
...
},
"pivotTable": {
...
},
"scatterPlot": {
...
},
"straightTable" : {
...
},
"textImage": {
...
},
"treemap": {
...
},
"waterfallChart" : {
...
}
}
|
||||||||||
| dataColors |
Data color properties.
Example: "dataColors": {
"primaryColor": "#0000FF",
"othersColor": "#808080",
"errorColor": "#FF0000",
"nullColor": "#FFFF00"
}
|
||||||||||
| palettes |
Customized color palette properties. palettes for more details. |
||||||||||
| scales |
Color scheme properties. scales for more details. |
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.
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:
Note that label.name.fontFamily and label.value.fontFamily are supported by all chart types. Label properties:
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.
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.
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.
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, pie charts, scatter plots, treemaps, waterfall charts).
Example: "legend": {
"title": {
"color": "@default",
"fontSize": "@font-normal",
"fontFamily": "sans-serif"
},
"label": {
"color": "@default",
"fontSize": "@font-normal",
"fontFamily": "sans-serif"
}
}
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| {chart-type} |
Chart type can be:
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.
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 to them.
| Property | Description | ||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| barChart |
Bar chart properties.
|
||||||||||||||||||||||||||||||||||||||||||||
| boxPlot |
Box plot properties.
|
||||||||||||||||||||||||||||||||||||||||||||
| bulletChart |
Bullet chart properties.
|
||||||||||||||||||||||||||||||||||||||||||||
| comboChart |
Combo chart properties. |
||||||||||||||||||||||||||||||||||||||||||||
| distributionPlot |
Distribution plot properties.
|
||||||||||||||||||||||||||||||||||||||||||||
| filterpane |
Filter pane properties. |
||||||||||||||||||||||||||||||||||||||||||||
| gauge |
Gauge properties. |
||||||||||||||||||||||||||||||||||||||||||||
| histogram |
Histogram properties. |
||||||||||||||||||||||||||||||||||||||||||||
| kpi |
KPI properties. |
||||||||||||||||||||||||||||||||||||||||||||
| lineChart |
Line chart properties.
|
||||||||||||||||||||||||||||||||||||||||||||
| listBox |
List properties. Used to style filter panes and the list boxes in the selections tool.
|
||||||||||||||||||||||||||||||||||||||||||||
| mapChart |
Map chart properties. |
||||||||||||||||||||||||||||||||||||||||||||
| pieChart |
Pie chart properties.
|
||||||||||||||||||||||||||||||||||||||||||||
| pivotTable |
Pivot table properties.
|
||||||||||||||||||||||||||||||||||||||||||||
| scatterPlot |
Scatterplot properties. |
||||||||||||||||||||||||||||||||||||||||||||
| straightTable |
Table properties.
|
||||||||||||||||||||||||||||||||||||||||||||
| textImage |
Text & image properties. |
||||||||||||||||||||||||||||||||||||||||||||
| treemap |
Treemap properties.
|
||||||||||||||||||||||||||||||||||||||||||||
| waterfallChart |
Waterfall chart properties.
|
||||||||||||||||||||||||||||||||||||||||||||
| {extension-name} |
Extension properties for this specific extension. |
palettes
These are the common color palette properties.
| Property | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| data |
Properties for data palette. These are used for Color by dimension in the properties panel.
|
||||||||||||
| ui |
Properties for the UI palette. You can define several palettes but the first palette defined in ui is used in the color picker for example when coloring by single color.
|
scales
These are the common color scheme properties. The scales are used for Color by measure in the properties panel.
| Property | Description |
|---|---|
| name |
Name of the color scheme. Example: "name": "Custom Sequential Gradient"
|
| translation |
Display name for the color scheme in the UI. Example: "translation": "Custom Sequential Gradient"
|
| type |
Type of the color scheme.
Example: "type": "gradient"
|
| propertyValue |
Property value of the color scheme.
Example: "propertyValue": "sg"
|
| scale |
Colors included in the color scheme, scaled from left to right. Example: "scale": [ "#1A2980", "#26D0CE" ]
|