Basic object styling

These examples show how to apply basic styling to your Qlik Sense objects using custom themes. All properties referenced in the examples below are described in detail in Custom theme JSON properties.

Styling the titles

You can style the appearance of the titles of all chart types by defining the title object. It consists of the following properties:

main: options to define the font color and the font size of the main title for all chart types, including custom object (visualization extensions and widgets).
subTitle: options to define the font color and the font size of the subtitle for all chart types, including custom object (visualization extensions and widgets).
footer: options to define the font color and the font size of the footer for all chart types, including custom object (visualization extensions and widgets). Also an option to define the background color of the footer.

Titles are on by default for all visualizations except filter panes, KPIs, and text & image visualizations.

"title": { "main": { "color" : "@grayscale-40", "fontSize" : "20px" }, "subTitle" : { "color" : "@grayscale-40", "fontSize" : "16px" }, "footer" : { "color" : "@grayscale-15", "fontSize" : "@text", "backgroundColor" : "@grayscale-85" } }

Styling the labels

The appearance of the labels are styled by defining properties in the label object. You can define the font color and the font size for the name of the label and for the value labels.

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

Styling the chart axes

You can style the appearance of the axes of all chart types by defining the axis object. It consists of the following properties:

title: options to define the font color and the font size of the axis titles for all chart types, including custom object (visualization extensions and widgets).
label: options to define the font color and the font size of the axis labels for all chart types, including custom object (visualization extensions and widgets).
line: options to define the major line color and the minor line color for all chart types, including custom object (visualization extensions and widgets).

"axis" : { "title" : { "color" : "@grayscale-35", "fontSize" : "@text" }, "label" : { "color" : "@grayscale-35", "fontSize" : "@text" }, "line" : { "major" : { "color" : "@grayscale-20" }, "minor" : { "color" : "@grayscale-40" } } }

Styling the chart grid

You can style the grid line color by defining properties in the grid object.

"grid" : { "line": { "highContrast": { "color": "#999999" }, "major": { "color": "#CCCCCC" }, "minor": { "color": "#E6E6E6" } } }

Styling the reference lines

You can style the reference line label font size and color by defining the referenceLine object. You can also style the appearance of reference lines that are out of range.

"referenceLine": { "label": { "name": { "color": "@grayscale-35", "fontSize": "@text" } }, "outOfBounds": { "color": "@grayscale-35", "backgroundColor": "@grayscale-35", "fontSize": "@text" } }

Styling the legends

The appearance of the chart legends are styled by defining properties in the legend object. You can define the font color and the font size for the legend title and for the legend labels.

"legend": { "title": { "fontSize": "@text", "color": "@grayscale-35" }, "label": { "fontSize": "@text", "color": "@grayscale-35" } }

Full code example

{
  "_inherit": false,
  "_variables" : {
    "@grayscale-100" : "#FFFFFF",
    "@grayscale-98" : "#FBFBFB",
    "@grayscale-95" : "#F2F2F2",
    "@grayscale-90" : "#E6E6E6",
    "@grayscale-85" : "#D9D9D9",
    "@grayscale-80" : "#CCCCCC",
    "@grayscale-75" : "#BFBFBF",
    "@grayscale-70" : "#B3B3B3",
    "@grayscale-65" : "#A6A6A6",
    "@grayscale-60" : "#999999",
    "@grayscale-55" : "#8C8C8C",
    "@grayscale-50" : "#808080",
    "@grayscale-45" : "#737373",
    "@grayscale-40" : "#666666",
    "@grayscale-35" : "#595959",
    "@grayscale-30" : "#4D4D4D",
    "@grayscale-28" : "#474747",
    "@grayscale-25" : "#404040",
    "@grayscale-20" : "#333333",
    "@grayscale-15" : "#262626",
    "@grayscale-10" : "#1A1A1A",
    "@grayscale-5" : "#0D0D0D",
    "@grayscale-0" : "#000000",
    "@text" : "13px"
  },
  "color": "@grayscale-20",
  "fontSize": "@text",
  "backgroundColor": "@grayscale-95",
  "dataColors": {
    "primaryColor": "@grayscale-28",
    "othersColor": "@grayscale-55",
    "errorColor": "@grayscale-90",
    "nullColor": "@grayscale-85"
  },
  "object" : {
    "title": {
      "main": {
        "color" : "@grayscale-40",
        "fontSize" : "20px"
      },
      "subTitle" : {
        "color" : "@grayscale-40",
        "fontSize" : "16px"
      },
      "footer" : {
        "color" : "@grayscale-15",
        "fontSize" : "@text",
        "backgroundColor" : "@grayscale-85"
      }
    },
    "label" : {
      "name" : {
        "color" : "@grayscale-35",
        "fontSize" : "@text"
      },
      "value" : {
        "color" : "@grayscale-35",
        "fontSize" : "@text"
      }
    },
    "axis" : {
      "title" : {
        "color" : "@grayscale-35",
        "fontSize" : "@text"
      },
      "label" : {
        "color" : "@grayscale-35",
        "fontSize" : "@text"
      },
      "line" : {
        "major" : {
          "color" : "@grayscale-20"
        },
        "minor" : {
          "color" : "@grayscale-40"
        }
      }
    },
    "grid" : {
      "line": {
        "highContrast": {
          "color": "#999999"
        },
        "major": {
          "color": "#CCCCCC"
        },
        "minor": {
          "color": "#E6E6E6"
        }
      }
    },
    "referenceLine": {
      "label": {
        "name": {
          "color": "@grayscale-35",
          "fontSize": "@text"
        }
      },
      "outOfBounds": {
        "color": "@grayscale-35",
        "backgroundColor": "@grayscale-35",
        "fontSize": "@text"
      }
    },
    "legend": {
      "title": {
        "fontSize": "@text",
        "color": "@grayscale-35"
      },
      "label": {
        "fontSize": "@text",
        "color": "@grayscale-35"
      }
    }
  },
  "palettes" : {
    "data" : [
      {
        "name": "Dark colors",
        "translation": "Dark colors",
        "propertyValue": "12",
        "type": "row",
        "scale": [
          "#808080",
          "#737373",
          "#666666",
          "#595959",
          "#4D4D4D",
          "#474747",
          "#404040",
          "#333333",
          "#262626",
          "#1A1A1A",
          "#0D0D0D",
          "#000000"
        ]
      },
      {
        "name": "Light colors",
        "translation": "Light colors",
        "propertyValue": "11",
        "type": "row",
        "scale": [
          "#FFFFFF",
          "#FBFBFB",
          "#F2F2F2",
          "#E6E6E6",
          "#D9D9D9",
          "#CCCCCC",
          "#BFBFBF",
          "#B3B3B3",
          "#A6A6A6",
          "#999999",
          "#8C8C8C"
        ]
      }
    ],
    "ui": [
      {
        "name": "Palette",
        "colors": [
          "none",
          "#FFFFFF",
          "#FBFBFB",
          "#F2F2F2",
          "#D9D9D9",
          "#BFBFBF",
          "#A6A6A6",
          "#8C8C8C",
          "#808080",
          "#737373",
          "#595959",
          "#474747",
          "#404040",
          "#262626",
          "#0D0D0D",
          "#000000"
        ]
      }
    ]
  },
  "scales": [
    {
      "name": "Light colors sequential gradient",
      "translation": "Light colors sequential gradient",
      "type": "gradient",
      "propertyValue": "sg",
      "scale": [ "#8C8C8C", "#FBFBFB" ]
    },
    {
      "name": "Light colors sequential classes",
      "translation": "Light colors sequential classes",
      "propertyValue": "sc",
      "type": "class",
      "scale": [ "#8C8C8C", "#FBFBFB" ]
    },
    {
      "name": "Dark colors diverging gradient",
      "translation": "Dark colors diverging gradient",
      "propertyValue": "dg",
      "type": "gradient",
      "scale": [ "#737373", "#0D0D0D" ]
    },
    {
      "name": "Dark colors diverging classes",
      "translation": "Dark colors diverging classes",
      "propertyValue": "dc",
      "type": "class",
      "scale": [ "#737373", "#0D0D0D" ]
    }
  ]
}

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