# Creating treemaps

This section describes how to create treemaps with the Visualization API and qlik-visual.



## Creating a basic treemap

In this example we create a basic treemap, containing one dimension and one measure, and with a custom title.

1. Create the chart

   Create the container for the chart. The visualization type is treemap.

   Visualization API

   ```
   app.visualization.create(
     'treemap',
     [],
     {}
   )
   ```

   qlik-visual

   ```
   <qlik-visual appid="Tutorial-Golf.qvf"
     type="treemap"
     cols='[]'
     options='{}' >
   </qlik-visual>
   ```

2. Define dimension

   Define the dimension as a column. Note that null values have been suppressed on the dimension.

   ```
   {
     "qDef": {
       "qFieldDefs": [
         "NetScoreName"
       ]
     },
     "qNullSuppression": true
   }
   ```

3. Define measure

   Define the measure as a column.

   ```
   {
     "qDef": {
       "qFieldDefs": [
         "NetScoreName"
       ]
     },
     "qNullSuppression": true
   },
   {
     "qDef": {
       "qLabel": "Frequency",
       "qDef": "Count(NetScoreName)"
     }
   }
   ```

4. Define title

   Then define the title in the options.

   { "showTitles": true, "title": "Net score outcome" }

### Result

![Example treemap object](https://help.qlik.com/en-US/sense-developer/May2026/Subsystems/Mashups/Content/Resources/Images/on-the-fly-example-treemap-01-general.png)

### Code examples

[](https://help.qlik.com/en-US/sense-developer/Subsystems/Mashups/Content/Sense_Mashups/Create/Visualizations/Treemap/create-treemap.htm)

#### Visualization API

```
app.visualization.create(
  'treemap',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "NetScoreName"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Frequency",
        "qDef": "Count(NetScoreName)"
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Net score outcome"
  }
).then(function(vis){
  vis.show("QV01");
});
```

[](https://help.qlik.com/en-US/sense-developer/Subsystems/Mashups/Content/Sense_Mashups/Create/Visualizations/Treemap/create-treemap.htm)

#### qlik-visual

```
<qlik-visual appid="Tutorial-Golf.qvf"
  type="treemap"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "NetScoreName"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Frequency",
        "qDef": "Count(NetScoreName)"
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Net score outcome"
  }' >
</qlik-visual>
```

## Applying additional dimensions

To make full use of the treemap it is preferable to have two or three dimensions. Using more than two or three dimensions is not recommended because the treemap may become unmanageable.

In this example we add a second dimension (Year).

1. Define second dimension

   Define the new dimension (Year) as a column and place it above the existing one (NetScoreName). Note that null values have been suppressed on both dimensions.

   { "qDef": { "qFieldDefs": [ "Date.autoCalendar.Year" ], "qFieldLabels": [ "Year" ] }, "qNullSuppression": true }, { "qDef": { "qFieldDefs": [ "NetScoreName" ] }, "qNullSuppression": true }

### Result

![Example treemap object with additional dimensions and color modifiers](https://help.qlik.com/en-US/sense-developer/May2026/Subsystems/Mashups/Content/Resources/Images/on-the-fly-example-treemap-02-two-dimensions.png)

### Code examples

[](https://help.qlik.com/en-US/sense-developer/Subsystems/Mashups/Content/Sense_Mashups/Create/Visualizations/Treemap/create-treemap.htm)

#### Visualization API

```
app.visualization.create(
  'treemap',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "Date.autoCalendar.Year"
        ],
        "qFieldLabels": [
          "Year"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qFieldDefs": [
          "NetScoreName"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Frequency",
        "qDef": "Count(NetScoreName)"
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Net score outcome"
  }
).then(function(vis){
  vis.show("QV01");
});
```

[](https://help.qlik.com/en-US/sense-developer/Subsystems/Mashups/Content/Sense_Mashups/Create/Visualizations/Treemap/create-treemap.htm)

#### qlik-visual

```
<qlik-visual appid="Tutorial-Golf.qvf"
  type="treemap"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "Date.autoCalendar.Year"
        ],
        "qFieldLabels": [
          "Year"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qFieldDefs": [
          "NetScoreName"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Frequency",
        "qDef": "Count(NetScoreName)"
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Net score outcome"
  }' >
</qlik-visual>
```

## Coloring by dimension

In this example we color the treemap by one of the dimensions. When you color a visualization by a dimension, all values in the visualization are colored by the corresponding values in the dimension field selected.

1. Set the color mode

   Color by dimension is turned on in the color object in the options. Disable auto coloring by setting "auto": false. Then set "mode": "byDimension" to color by dimension.

   { "showTitles": true, "title": "Net score outcome", "color": { "auto": false, "mode": "byDimension" } }

2. Define dimension and set color palette

   Define the dimension to color by: "byDimDef": { "key": "NetScoreName" }. Then select the color palette to apply to the visualization: "dimensionScheme": "12".

   { "showTitles": true, "title": "Net score outcome", "color": { "auto": false, "mode": "byDimension", "dimensionScheme": "12", "byDimDef": { "key": "NetScoreName" } } }

3. Additional color settings

   Set "persistent": true to use persistent colors on data points between selections.

   If you color by a master dimension, that is a dimension that is stored in the library, you may want to use the colors defined for the master dimension. If so, you set "useDimColVal": true.

   { "showTitles": true, "title": "Net score outcome", "color": { "auto": false, "mode": "byDimension", "useDimColVal": true, "persistent": true, "dimensionScheme": "12", "byDimDef": { "key": "NetScoreName" } } }

4. Define qAttributeDimensions

   When coloring by dimension, you must define qAttributeDimensions for the dimension to color by: "qAttributeDimensions": [ { "qDef": "NetScoreName", "id": "colorByAlternative", "label": "Year" } ].

   { "qDef": { "qFieldDefs": [ "NetScoreName" ] }, "qNullSuppression": true, "qAttributeDimensions": [ { "qDef": "NetScoreName", "id": "colorByAlternative", "label": "Year" } ] }

### Result

![Example treemap object with more detailed color modifiers by dimension and measure](https://help.qlik.com/en-US/sense-developer/May2026/Subsystems/Mashups/Content/Resources/Images/on-the-fly-example-treemap-03-colorByDimension.png)

### Code examples

[](https://help.qlik.com/en-US/sense-developer/Subsystems/Mashups/Content/Sense_Mashups/Create/Visualizations/Treemap/create-treemap.htm)

#### Visualization API

```
app.visualization.create(
  'treemap',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "Date.autoCalendar.Year"
        ],
        "qFieldLabels": [
          "Year"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qFieldDefs": [
          "NetScoreName"
        ]
      },
      "qNullSuppression": true,
      "qAttributeDimensions": [
        {
          "qDef": "NetScoreName",
          "id": "colorByAlternative",
          "label": "Year"
        }
      ]
    },
    {
      "qDef": {
        "qLabel": "Frequency",
        "qDef": "Count(NetScoreName)"
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Net score outcome",
    "color": {
      "auto": false,
      "mode": "byDimension",
      "useDimColVal": true,
      "persistent": true,
      "dimensionScheme": "12",
      "byDimDef": {
        "key": "NetScoreName"
      }
    }
  }
).then(function(vis){
  vis.show("QV01");
});
</script>
```

[](https://help.qlik.com/en-US/sense-developer/Subsystems/Mashups/Content/Sense_Mashups/Create/Visualizations/Treemap/create-treemap.htm)

#### qlik-visual

```
<qlik-visual appid="Tutorial-Golf.qvf"
  type="treemap"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "Date.autoCalendar.Year"
        ],
        "qFieldLabels": [
          "Year"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qFieldDefs": [
          "NetScoreName"
        ]
      },
      "qNullSuppression": true,
      "qAttributeDimensions": [
        {
          "qDef": "NetScoreName",
          "id": "colorByAlternative",
          "label": "Year"
        }
      ]
    },
    {
      "qDef": {
        "qLabel": "Frequency",
        "qDef": "Count(NetScoreName)"
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Net score outcome",
    "color": {
      "auto": false,
      "mode": "byDimension",
      "useDimColVal": true,
      "persistent": true,
      "dimensionScheme": "12",
      "byDimDef": {
        "key": "NetScoreName"
      }
    }
  }' >
</qlik-visual>
```

## Coloring by expression

Coloring by expression applies colors to a visualization based on a user-defined expression. This enables you to use expressions to define both the colors used and the values upon which the colors are applied in a visualization. Supported formats for color expressions are: RGB, ARGB, and HSL.

1. Set the color mode

   Color by expression is then turned on in the color object in the options. Disable auto coloring by setting "auto": false. Then set "mode": "byExpression" to color by expression.

   { "showTitles": true, "title": "Net score outcome", "color": { "auto": false, "mode": "byExpression" }

2. Define color expression

   Define that the expression is a color code: "expressionIsColor": true. Then define the color expression used: "colorExpression": "If(NetScoreDiff&lt;0,RGB(82, 162, 204),If(NetScoreDiff&gt;0,RGB(248, 152, 29),RGB(145, 194, 106)))".

   { "showTitles": true, "title": "Net score outcome", "color": { "auto": false, "mode": "byExpression", "expressionIsColor": true, "colorExpression": "If(NetScoreDiff&lt;0,RGB(82, 162, 204),If(NetScoreDiff&gt;0,RGB(248, 152, 29),RGB(145, 194, 106)))" }, "legend": { "show": false } }

3. Define qAttributeExpressions

   When coloring by expression you must define qAttributeExpressions for the first measure: "qAttributeExpressions": [ { "qExpression": "If(NetScoreDiff&lt;0,RGB(82, 162, 204),If(NetScoreDiff&gt;0,RGB(248, 152, 29),RGB(145, 194, 106)))", "id": "colorByExpression" } ].

   { "qDef": { "qLabel": "Frequency", "qDef": "Count(NetScoreName)" }, "qAttributeExpressions": [ { "qExpression": "If(NetScoreDiff&lt;0,RGB(82, 162, 204),If(NetScoreDiff&gt;0,RGB(248, 152, 29),RGB(145, 194, 106)))", "id": "colorByExpression" } ] }

### Result

![Example treemap object colored by expression](https://help.qlik.com/en-US/sense-developer/May2026/Subsystems/Mashups/Content/Resources/Images/on-the-fly-example-treemap-04-colorByExpression.png)

### Code examples

[](https://help.qlik.com/en-US/sense-developer/Subsystems/Mashups/Content/Sense_Mashups/Create/Visualizations/Treemap/create-treemap.htm)

#### Visualization API

```
app.visualization.create(
  'treemap',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "Date.autoCalendar.Year"
        ],
        "qFieldLabels": [
          "Year"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qFieldDefs": [
          "NetScoreName"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Frequency",
        "qDef": "Count(NetScoreName)"
      },
      "qAttributeExpressions": [
        {
          "qExpression": "If(NetScoreDiff<0,RGB(82, 162, 204),If(NetScoreDiff>0,RGB(248, 152, 29),RGB(145, 194, 106)))",
          "id": "colorByExpression"
        }
      ]
    }
  ],
  {
    "showTitles": true,
    "title": "Net score outcome",
    "color": {
      "auto": false,
      "mode": "byExpression",
      "useBaseColors": "off",
      "expressionIsColor": true,
      "colorExpression": "If(NetScoreDiff<0,RGB(82, 162, 204),If(NetScoreDiff>0,RGB(248, 152, 29),RGB(145, 194, 106)))"
    },
    "legend": {
      "show": false
    }
  }
).then(function(vis){
  vis.show("QV01");
});
```

[](https://help.qlik.com/en-US/sense-developer/Subsystems/Mashups/Content/Sense_Mashups/Create/Visualizations/Treemap/create-treemap.htm)

#### qlik-visual

```
<qlik-visual appid="Tutorial-Golf.qvf"
  type="treemap"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "Date.autoCalendar.Year"
        ],
        "qFieldLabels": [
          "Year"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qFieldDefs": [
          "NetScoreName"
        ]
      },
      "qNullSuppression": true,
      "qAttributeDimensions": [
        {
          "qDef": "NetScoreName",
          "id": "colorByAlternative",
          "label": "Year"
        }
      ]
    },
    {
      "qDef": {
        "qLabel": "Frequency",
        "qDef": "Count(NetScoreName)"
      },
      "qAttributeExpressions": [
        {
          "qExpression": "If(NetScoreDiff<0,RGB(82, 162, 204),If(NetScoreDiff>0,RGB(248, 152, 29),RGB(145, 194, 106)))",
          "id": "colorByExpression"
        }
      ]
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Net score outcome",
    "color": {
      "auto": false,
      "mode": "byExpression",
      "useBaseColors": "off",
      "expressionIsColor": true,
      "colorExpression": "If(NetScoreDiff<0,RGB(82, 162, 204),If(NetScoreDiff>0,RGB(248, 152, 29),RGB(145, 194, 106)))"
    },
    "legend": {
      "show": false
    }
  }' >
</qlik-visual>
```