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

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.

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.

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

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