# Creating distribution plots

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



## Creating a basic distribution plot

In this example we want to create a basic distribution plot, containing one dimension and two measures, with a custom title and horizontal orientation.

1. Create the chart

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

   Visualization API

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

   qlik-visual

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

2. Define the dimension

   Define the dimension as a column.

   ```
   [
     {
       "qDef": {
         "qFieldDefs": [
           "=NetScoreName"
         ],
         "qFieldLabels": [
           "Net result"
         ]
       },
       "qNullSuppression": true
     }
   ]
   ```

3. Define measures

   Define the measures as columns.

   ```
   [
     {
       "qDef": {
         "qFieldDefs": [
           "=NetScoreName"
         ],
         "qFieldLabels": [
           "Net result"
         ]
       },
       "qNullSuppression": true
     },
     {
       "qDef": {
         "qLabel": "Occurancies",
         "qDef": "Count(HoID)",
         "qNumFormat": {
           "qType": "F",
           "qnDec": 2,
           "qUseThou": 0
         }
       }
     }
   ]
   ```

4. Define the title in the options

   Then define the title and the orientation in the options.

   { "showTitles": true, "title": "Net score result per hole" }

### Result

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

### Code examples

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

#### Visualization API

```
app.visualization.create(
  'distributionplot',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "=NetScoreName"
        ],
        "qFieldLabels": [
          "Net result"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Occurancies",
        "qDef": "Count(HoID)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0
        }
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Net score result per hole"
  }
).then(function(vis){
  vis.show("QV01");
});
```

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

#### qlik-visual

```
<qlik-visual appid="Tutorial-Golf.qvf"
  type="distributionplot"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "=NetScoreName"
        ],
        "qFieldLabels": [
          "Net result"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Occurancies",
        "qDef": "Count(HoID)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0
        }
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Net score result per hole"
  }' >
</qlik-visual>
```

## Presentation and color settings

In the example we change the way the distribution plot is presented by adding narrow grid line spacing and customizing the colors. All these changes are set in the options.

1. Add narrow grid line spacing

   Changes to the grid line spacing is set in the gridlines object. Disable auto grid lines and set spacing to 3 which means narrow.

   "gridlines": { "auto": false, "spacing": 3 }

2. Add custom colors to the chart

   You can set the presentation colors of the distribution plot: box color and point color. They are defined in the color object and each array consists of a paletteColor definition where you set the actual color as an index number in the palette or as a HEX string color.

   This example use colors that are not in the default palette, defined by "index": -1. The box color is a lighter shade of blue ("color": "#68b5de") while the point color is a darker shade of blue ("color": "#3a7391").

   "color": { "box": { "paletteColor": { "index": -1, "color": "#68b5de" } }, "point": { "paletteColor": { "index": -1, "color": "#3a7391" } } }

### Result

![Example distribution plot with color settings](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/Mashups/Content/Resources/Images/on-the-fly-example-distributionplot-02-presentation-color.png)

### Code examples

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

#### Visualization API

```
app.visualization.create(
  'distributionplot',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "=NetScoreName"
        ],
        "qFieldLabels": [
          "Net result"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Occurancies",
        "qDef": "Count(HoID)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0
        }
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Net score result per hole",
    "gridlines": {
      "auto": false,
      "spacing": 3
    },
    "color": {
      "box": {
        "paletteColor": {
          "index": -1,
          "color": "#68b5de"
        }
      },
      "point": {
        "paletteColor": {
          "index": -1,
          "color": "#3a7391"
        }
      }
    }
  }
).then(function(vis){
  vis.show("QV01");
});
```

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

#### qlik-visual

```
<qlik-visual appid="Tutorial-Golf.qvf"
  type="distributionplot"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "=NetScoreName"
        ],
        "qFieldLabels": [
          "Net result"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Occurancies",
        "qDef": "Count(HoID)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0
        }
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Net score result per hole",
    "gridlines": {
      "auto": false,
      "spacing": 3
    },
    "color": {
      "box": {
        "paletteColor": {
          "index": -1,
          "color": "#68b5de"
        }
      },
      "point": {
        "paletteColor": {
          "index": -1,
          "color": "#3a7391"
        }
      }
    }
  }' >
</qlik-visual>
```

## Dimension and measure axis settings

In this example we define how the measure axis is presented. This is set in the measureAxis object. If more than one dimension is used, the dimension axis settings are defined in the dimensionAxis object. This example display labels only on the measure axis . The axis also has narrow spacing and a custom range. The visualization consists of only one dimension so no dimension axis settings are needed.

1. Labels and spacing

   Set to display labels only on the measure axis: "show": "labels".

   Define that narrow spacing should be used: "spacing": 0.5.

   "measureAxis": { "show": "labels", "dock": "near", "spacing": 0.5 }

2. Customize the range

   Enable custom range by setting "autoMinMax": false. Set the mode to display Max: "minMax": "minMax" and then define the minimum and maximum values (0 and 1200).

   "measureAxis": { "show": "labels", "dock": "near", "spacing": 0.5, "autoMinMax": false, "minMax": "minMax", "min": 0, "max": 1100 }

### Result

![Example distribution plot with dimension and measure axis settings](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/Mashups/Content/Resources/Images/on-the-fly-example-distributionplot-03-axis.png)

### Code examples

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

#### Visualization API

```
app.visualization.create(
  'distributionplot',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "=NetScoreName"
        ],
        "qFieldLabels": [
          "Net result"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Occurancies",
        "qDef": "Count(HoID)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0
        }
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Net score result per hole",
    "gridlines": {
      "auto": false,
      "spacing": 3
    },
    "color": {
      "box": {
        "paletteColor": {
          "index": -1,
          "color": "#68b5de"
        }
      },
      "point": {
        "paletteColor": {
          "index": -1,
          "color": "#3a7391"
        }
      }
    },
    "measureAxis": {
      "show": "labels",
      "dock": "near",
      "spacing": 0.5,
      "autoMinMax": false,
      "minMax": "minMax",
      "min": 0,
      "max": 1100
    }
  }
).then(function(vis){
  vis.show("QV01");
});
```

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

#### qlik-visual

```
<qlik-visual appid="Tutorial-Golf.qvf"
  type="distributionplot"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "=NetScoreName"
        ],
        "qFieldLabels": [
          "Net result"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Occurancies",
        "qDef": "Count(HoID)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0
        }
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Net score result per hole",
    "gridlines": {
      "auto": false,
      "spacing": 3
    },
    "color": {
      "box": {
        "paletteColor": {
          "index": -1,
          "color": "#68b5de"
        }
      },
      "point": {
        "paletteColor": {
          "index": -1,
          "color": "#3a7391"
        }
      }
    },
    "measureAxis": {
      "show": "labels",
      "dock": "near",
      "spacing": 0.5,
      "autoMinMax": false,
      "minMax": "minMax",
      "min": 0,
      "max": 1100
    }
  }' >
</qlik-visual>
```

## Multiple lines using inner and outer dimensions

In this example we add a second dimension which gives us one line for each value of the second (or outer) dimension.

1. Add the outer dimension as a column

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

2. Define the dimension axis

   Since we now have two dimensions we can configure the dimension axis. This example show labels only for the outer dimension.

   "dimensionAxis": { "show": "labels" }

3. Add sorting

   For distribution plots, sorting is done in the sorting object inside the options. This example is sorted alphabetically in descending order.

   "sorting": { "autoSort": false, "sortCriteria": { "sortByAscii": -1, "sortByLoadOrder": 1 } }

### Result

![Example distribution plot with multiple dimensions and measures](https://help.qlik.com/en-US/sense-developer/May2025/Subsystems/Mashups/Content/Resources/Images/on-the-fly-example-distributionplot-04-outer-dimension.png)

### Code examples

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

#### Visualization API

```
app.visualization.create(
  'distributionplot',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "=NetScoreName"
        ],
        "qFieldLabels": [
          "Net result"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qFieldDefs": [
          "Date.autoCalendar.Year"
        ],
        "qFieldLabels": [
          "Year"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Occurancies",
        "qDef": "Count(HoID)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0
        }
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Net score result per hole and year",
    "gridlines": {
      "auto": true,
      "spacing": 2
    },
    "color": {
      "box": {
        "paletteColor": {
          "index": -1,
          "color": "#68b5de"
        }
      },
      "point": {
        "paletteColor": {
          "index": -1,
          "color": "#3a7391"
        }
      }
    },
    "measureAxis": {
      "show": "labels",
      "dock": "near",
      "spacing": 1,
      "autoMinMax": true
    },
    "dimensionAxis": {
      "show": "labels"
    },
    "sorting": {
      "autoSort": false,
      "sortCriteria": {
        "sortByAscii": -1,
        "sortByLoadOrder": 1
      }
    }
  }
).then(function(vis){
  vis.show("QV01");
});
```

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

#### qlik-visual

```
<qlik-visual appid="Tutorial-Golf.qvf"
  type="distributionplot"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "=NetScoreName"
        ],
        "qFieldLabels": [
          "Net result"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qFieldDefs": [
          "Date.autoCalendar.Year"
        ],
        "qFieldLabels": [
          "Year"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "Occurancies",
        "qDef": "Count(HoID)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0
        }
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Net score result per hole and year",
    "gridlines": {
      "auto": true,
      "spacing": 2
    },
    "color": {
      "box": {
        "paletteColor": {
          "index": -1,
          "color": "#68b5de"
        }
      },
      "point": {
        "paletteColor": {
          "index": -1,
          "color": "#3a7391"
        }
      }
    },
    "measureAxis": {
      "show": "labels",
      "dock": "near",
      "spacing": 1,
      "autoMinMax": true
    },
    "dimensionAxis": {
      "show": "labels"
    },
    "sorting": {
      "autoSort": false,
      "sortCriteria": {
        "sortByAscii": -1,
        "sortByLoadOrder": 1
      }
    }
  }' >
</qlik-visual>
```