# histogram properties

Information noteSTABLE.   
  
This API is reliable and breaking changes are unlikely.

histogram()

These are the properties used by Qlik Sense histograms.

## Version history

Version history

| Version state | Details |
| --- | --- |
| Introduced | Qlik Sense June 2017 |

## Properties

### showTitles

Type: Boolean

Show title for the visualization.

Default: true.

### showDetails

Type: Boolean

Sets if visualization details should be shown.

Default: false

### title

Type: String | qStringExpression

Visualization title shown if "showTitles": true.

### subtitle

Type: String | qStringExpression

Visualization subtitle shown if "showTitles": true.

### footnote

Type: String | qStringExpression

Visualization footnote shown if "showTitles": true.

### disableNavMenu

Type: Boolean

Disables the hover menu in the visualization.

Default: false

### qHyperCubeDef

Type: Object

The hypercube definition used by most visualizations.

A subset of the properties available in the qHyperCubeDef is presented here. For complete documentation of all available properties, see [Engine API: HyperCubeDef](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/EngineJSONAPI/Content/models-hypercubedef.htm).

Properties

#### qDimension

Type: Array

Description: Extends NxDimension, see [Engine API: NxDimension](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/EngineJSONAPI/Content/models-nxdimension.htm).

Additional properties

* **qDef**

  Type: Object

  Description: Extends NxInlineDimensionDef, see [Engine API: NxInlineDimensionDef](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/EngineJSONAPI/Content/models-nxinlinedimensiondef.htm).

  qDef properties

  | Name | Type | Description |
  | --- | --- | --- |
  | autoSort | Boolean | Set to automatically sort the dimension.<br><br>Default: true |
  | cId | String | ID used by the client. Must be unique within the current chart. |
  | othersLabel | StringExpressionContainer | String expression container. |

* **qAttributeDimensions**

  Type: Array

  Description: Extends NxAttrDimDef, see [Engine API: NxAttrDimDef](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/EngineJSONAPI/Content/models-nxattrdimdef.htm).

  id

  Type: String

  One of:

  * colorByAlternative: colors the chart using different dimensions. Can be used together with color.mode="byDimension" for attribute dimensions.
  * colorByExpression: used together with color.mode="byExpression".

#### qMeasures

Type: Array

Description: Extends NxMeasure, see [Engine API: NxMeasure](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/EngineJSONAPI/Content/models-nxmeasure.htm).

Additional properties

* **qDef**

  Type: Object

  Description: Extends NxInlineMeasureDef, see [Engine API: NxInlineMeasureDef](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/EngineJSONAPI/Content/models-nxinlinemeasuredef.htm).

  qDef Properties

  | Name | Type | Description |
  | --- | --- | --- |
  | autoSort | Boolean | Set to automatically sort the measure.<br><br>Default: true |
  | cId | String | ID used by the client. Must be unique within the current chart. |
  | numFormatFromTemplate | Boolean | When enabled, the number format to use can be selected from multiple predefined formats based on the desired type: number or date.<br><br>Default: true |
  | isCustomFormatted | Boolean | Set to true to toggle off the default client formatting. |
  | othersLabel | StringExpressionContainer | String expression container. |

* **qAttributeExpressions**

  Type: Array

  Extends NxAttrExprDef, see [Engine API: NxAttrExprDef](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/EngineJSONAPI/Content/models-nxattrexprdef.htm).

  id

  Type: String

  One of:

  * colorByAlternative: colors the chart using different dimensions. Can be used together with color.mode="byDimension" for attribute dimensions.
  * colorByExpression: used together with color.mode="byExpression".

#### qLayoutExclude

Type: Object

#### customErrorMessage

Type: Object

Set to define custom error messages.

* **calcCondition**

  Type: String

  Description: Deprecated. Use qCalcCondition.qMsg instead. Set to customize the calculation condition unfilled message.

### dimensionAxis

Type: Object

Dimension axis settings.

dimensionAxis properties

| Name | Type | Description |
| --- | --- | --- |
| show | String | Defines if titles and labels should be visible. Can be one of:<br><br><ul> <li><span>all</span> </li> <li><span>labels</span> </li> <li><span>title</span> </li> <li><span>none</span> </li> </ul><br><br>Default: all |
| label | String | Defines the label orientation. Can be one of:<br><br><ul> <li><span>auto</span> </li> <li><span>horizontal</span> </li> <li><span>tilted</span> </li> </ul><br><br>Default: auto |
| dock | String | Axis docking position. Can be:<br><br><ul> <li><span>near</span> </li> <li><span>far</span> </li> </ul><br><br>Default: near |

### measureAxis

Type: Object

Measure axis settings.

measureAxis properties

| Name | Type | Description |
| --- | --- | --- |
| show | String | Set to display the labels and titles. Can be one of:<br><br><ul> <li><span>all</span> </li> <li><span>labels</span> </li> <li><span>title</span> </li> <li><span>none</span> </li> </ul><br><br>Default: all |
| dock | String | Sets the axis docking position. Can be one of:<br><br><ul> <li><span>near</span> </li> <li><span>far</span> </li> </ul><br><br>Default: near |
| spacing | Number | Set the axis scale:<br><br>Default: 1 |
| autoMinMax | Boolean | Set to use automatic min/max for measure color.<br><br>Default: true |
| minMax | String | Set custom max/min. Can be one of:<br><br><ul> <li><span>min</span> </li> <li><span>max</span> </li> <li><span>minMax</span> </li> </ul><br><br>Default: min |
| min | ValueExpressionContainer | Set the min value for the range. |
| max | ValueExpressionContainer | Set the max value for the range. |

#### label

Type: StringExpressionContainer

Spring expression container for labels.

### gridlines

Type: Object

Grid line settings.

gridLines settings

| Name | Type | Description |
| --- | --- | --- |
| auto | Boolean | Set to show grid lines.<br><br>Default: true |
| spacing | Integer | Defines the grid line spacing. Used when "auto": false. Can be one of:<br><br><ul> <li><span>0</span>: no lines</li> <li><span>1</span>: wide</li> <li><span>2</span>: medium</li> <li><span>3</span>: narrow</li> </ul><br><br>Default: 2 |

### color

Type: Object

Color settings for the distribution plot.

#### barColor

Type: Object

Bar color properties.

color properties

| Name | Type | Description |
| --- | --- | --- |
| paletteColor | Object | Description: Color information structure. Holds the actual color and index in palette.<br><br><ul> <li><strong>color</strong>: <p><span>Type: String</span></p>Description: Color as hex string (mandatory if index: -1)</li> <li><strong>index</strong>: <p><span>Type: Integer</span>Index in the palette.                                The default <span>Qlik Sense</span> color palette:</p><ul><li><span>-1</span>: set to use custom color that is not in the palette.</li><li><span>0</span>: No color</li><li><span>1</span>: White, HEX: <span>#ffffff</span></li><li><span>2</span>: Light green, HEX: <span>#46c646</span></li><li><span>3</span>: Green, HEX: <span>#276e27</span></li><li><span>4</span>: Light blue, HEX: <span>#b6d7ea</span></li><li><span>5</span>: Blue, HEX: <span>#7db8da</span></li><li><span>6</span>: Dark blue, HEX: <span>#4477aa</span></li><li><span>7</span>: Purple, HEX: <span>#8e477d</span></li><li><span>8</span>: Yellow, HEX: <span>#ffcf02</span></li><li><span>9</span>: Orange, HEX: <span>#f8981d</span></li><li><span>10</span>: Red, HEX: <span>#f93f17</span></li><li><span>11</span>: Brown, HEX: <span>#633d0c</span></li><li><span>12</span>: Light gray, HEX: <span>#b0afae</span></li><li><span>13</span>: Gray, HEX: <span>#7b7a78</span></li><li><span>14</span>: Dark gray, HEX: <span>#545352</span></li><li><span>15</span>: Black, HEX: <span>#000000</span></li></ul>Default: <span>6</span><p></p></li> </ul> |

### bins

Type: Object

Defines how the bins are visualized.

bins properties

| Name | Type | Description |
| --- | --- | --- |
| auto | Boolean | When set to true, a histogram with no special parameters is generated. When set to false, bins are defined with the binMode property.<br><br>Default: true |
| binMode | String | Sets the display mode of the bars when "auto": false. Can be:<br><br><ul> <li><span>maxCount</span>: lets you adjust the maximum number of bars to be displayed.</li> <li><span>size</span>: lets you adjust size of bars and offset from x-axis</li> </ul><br><br>Default: maxCount |
| binCount | Integer | Sets number of bars to be displayed. Applicable when "binMode": "maxCount".<br><br>Default: 10 |
| countDistinct | Boolean | Shows unique values. |
| binSize | Integer | Sets the maximum number of bars as a float. Applicable when "binMode": "size".<br><br>Default: 10 |
| offset | Integer | Sets where to start displaying bars on the x-axis. |

### dataPoint

Type: Object

Data point settings.

dataPoint properties

| Name | Type | Description |
| --- | --- | --- |
| showLabels | Boolean | Set to show labels on data points.<br><br>Default: false |

### refLine

Type: Object

Reference line settings.

#### refLines

Type: Array

refLines properties

| Name | Type | Description |
| --- | --- | --- |
| show | Boolean | Set to true to display this reference line.<br><br>Default: true |
| label | String | Reference line label. |
| color | Integer | Deprecated. Use paletteColor instead.<br><br>Color.<br><br>Default: 3 |
| paletteColor | Object | Description: Color information structure. Holds the actual color and index in palette.<br><br><ul> <li><strong>color</strong>: <p><span>Type: String</span></p>Description: Color as hex string (mandatory if index: -1)</li> <li><strong>index</strong>: <p><span>Type: Integer</span></p>Description: Index in palette. If a custom color, not in the palette, is being used, set index to <span>-1</span>.</li> </ul> |

## Example using Visualization API

Tip noteFor more examples of how to create histograms on the fly, see [Mashups: Creating histograms](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/Mashups/Content/Sense_Mashups/Create/Visualizations/Histogram/create-histogram.htm).

In this example we create a basic histogram, containing a single dimension and a custom title.

```
app.visualization.create(
  'barchart',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "DrDist"
        ],
        "qFieldLabels": [
          "Drive distance"
        ]
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Driving distance"
  }
).then(function(vis){
  vis.show("QV01");
});
```