Skip to main content Skip to complementary content
Qlik Resources

Extended object styling

These examples show how to apply extended styling to the individual Qlik Sense chart types using custom themes. All properties referenced in the examples below are described in detail in Custom theme JSON properties.

Object type specific styling overview

In addition to the chart type specific properties presented in Custom theme JSON properties, you can also style titles and labels for the individual chart types. If you do this, the chart type styling will override the styling defined for all objects.

This example shows how the title object has been defined on object level and also on chart type level for bar charts.

Example:  

"object" : { "title": { "main": { "color" : "@grayscale-40", "fontSize" : "20px" }, "subTitle" : { "color" : "@grayscale-40", "fontSize" : "16px" }, "footer" : { "color" : "@grayscale-15", "fontSize" : "@text", "backgroundColor" : "@grayscale-85" } }, "barChart": { "title": { "main": { "color" : "@grayscale-35", "fontSize" : "22px" }, "subTitle" : { "color" : "@grayscale-35", "fontSize" : "18px" }, "footer" : { "color" : "@grayscale-35", "fontSize" : "14px", "backgroundColor" : "@grayscale-80" } }, "outOfRange": { "color": "@grayscale-40" } } }

Bar chart specific styling

In this example we define the out of range color for bar charts.

Example:  

"barChart": { "outOfRange": { "color": "@grayscale-40" } }

Boxplot specific styling

For boxplot charts, you can style the stroke colors for the whiskers, lines and boxes. In addition, you can also style the fill color for the boxes.

Example:  

"boxPlot": { "box": { "whisker": { "stroke": "@grayscale-35" }, "line": { "stroke": "@grayscale-35" }, "box": { "fill": "@grayscale-35", "stroke": "@grayscale-35" } } }

Distribution plot specific styling

You can style the fill color of the box for distribution plots.

Example:  

"distributionPlot": { "box": { "fill": "@grayscale-35" } }

Filter pane specific styling

The title is the only filterpane specific styling you can apply. Filterpanes consist of list boxes, and the content of a filterpane is controlled by the styling in the listBox object.

Example:  

"filterpane": { "title": { "main": { "color": "@grayscale-35", "fontSize": "@text" } } }

KPI specific styling

There are no KPI specific properties for styling. This example shows how to style the title of KPIs.

Example:  

"kpi": { "title": { "main": { "color": "@grayscale-35", "fontSize": "@text" } } }

Gauge specific styling

There are no gauge specific properties for styling. This example shows how to style the labels of gauges.

Example:  

"gauge": { "label": { "value": { "color": "@grayscale-35", "fontSize": "@text" } } }

Histogram specific styling

There are no histogram specific properties for styling. This example shows how to style the labels of histograms.

Example:  

"histogram": { "label": { "value": { "color": "@grayscale-35", "fontSize": "20px" } } }

Line chart specific styling

You can style the out of range colors for line charts.

Example:  

"lineChart": { "outOfRange": { "color": "@grayscale-40" } }

List box specific styling

You can style the title and the content of list boxes. The list box content also controls the content of filterpanes as well as the list boxes in the selections tool.

Example:  

"listBox": { "title": { "main": { "color": "@grayscale-40", "fontSize": "@text" } }, "content": { "color": "@grayscale-35", "fontSize": "@text" } }

Map chart specific styling

For map charts, you can style the background color, labels and legends.

Example:  

"mapChart": { "backgroundColor": "@light", "legend": { "title": { "color": "@grayscale-35" }, "label": { "color": "@grayscale-35" } }, "label": { "value": { "dark": { "color": "@grayscale-20" }, "light": { "color": "@grayscale-70" }, "fontSize": "@text" } } }

Pie chart specific styling

You can style the axis title and the labels for pie charts.

Example:  

"pieChart": { "axis": { "title": { "fontSize": "@text" } }, "label": { "name": { "color": "@grayscale-35", "fontSize": "@text" }, "value": { "color": "@grayscale-35", "fontSize": "@text" } } }

Pivot table specific styling

For pivot tables, you can style the headers and the content.

Example:  

"pivotTable": { "header" : { "fontSize" : "@text", "color": "@grayscale-35" }, "content": { "fontSize": "@text", "color": "@grayscale-35" } }

Scatter plot specific styling

You can style the labels for scatter plots.

Example:  

"scatterPlot": { "label": { "value": { "color": "@grayscale-40", "fontSize": "@14px" } } }

Straight table specific styling

For (straight) tables, you can style the headers and the content.

Example:  

"straightTable" : { "header" : { "fontSize" : "@text", "color": "@grayscale-60" }, "content": { "fontSize": "@text", "color": "@grayscale-35" } }

Treemap specific styling

You can style the branches and the leaves for treemaps.

Example:  

"treemap": { "branch": { "backgroundColor": "@grayscale-70", "label": { "color": "@grayscale-35", "fontSize": "@text" } }, "leaf": { "label": { "fontSize": "@text" } } }

Waterfall chart specific styling

For a waterfall chart, you can style labels, values and shapes.

Example:  

"waterfallChart": { "label": { "value": { "fontSize": "20px" } }, "value": { "color": { "default": "@grayscale-45", "dark": "@grayscale-20", "light": "@grayscale-70" } }, "shape": { "positiveValue": { "fill": "@grayscale-70" }, "negativeValue": { "fill": "@grayscale-45" }, "subtotal": { "fill": "@grayscale-20" }, "bridge": { "stroke": "@grayscale-35" } } }

Full code example

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here