Skip to main content Skip to complementary content

Creating histograms

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

Creating a basic histogram

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

  1. Create the chart

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

    app.visualization.create(
      'histogram',
      [],
      {}
    )
    <qlik-visual appid="Tutorial-Golf.qvf"
      type="histogram"
      cols='[]'
      options='{}' >
    </qlik-visual>
  2. Define dimension

    Define the dimension as a column.

    Information noteYou can only apply a single dimension to a histogram. The dimension must be a numerical field. Histograms do not need a measure, as the frequency of the binned data is automatically calculated.
    [ { "qDef": { "qFieldDefs": [ "DrDist" ], "qFieldLabels": [ "Drive distance" ] } } ]
  3. Define the title in the options

    Then define the title in the options.

    { "title": "Driving distance" }

Result

Example histogram chart

Code examples

Setting maximum number of bars

In this example we set the maximum number of bars that we want to divide the data into. We select to display a maximum of 6 bars (or bins). We achieve this by configuring the bins object in the options.

  1. Disable auto-bins

    In the bins object, enable custom bars by setting "auto": false.

    "bins": { "auto": false }
  2. Define the maximum number of bars

    To use the maximum number of bars feature, set "binMode": "maxCount" and then define the maximum number: "binCount": 6.

    "bins": { "auto": false, "binMode": "maxCount", "binCount": 6 }

Result

Example histogram chart with bar maximum

Code examples

Setting bar width on the x-axis

In this example we define how wide each bar should be, based on the values on the x-axis, and which offset the bars are using by configuring the bins object in the options.

  1. Disable auto-bins

    Make sure that custom bars are enabled ("auto": false).

    "bins": { "auto": false }
  2. Define the bar width

    To use the bar width feature, set "binMode": "size". Set the width of each bar "binSize": 10 and then set the offset: "offset": 5.

    In this example we have set the bar width to 10 and the offset is 5. That means that in this example, the first bar is 5 to 15, the second bar is 15 to 25, and so on.

    "bins": { "auto": false, "binMode": "size", "binSize": 10, "offset": 5 }

Result

Example histogram chart with set bar width

Code examples

Presentation, colors and axis settings

In this example we define some settings for how the histogram is presented. All these settings are defined in the options.

  1. Grid line spacing

    The spacing between the grid lines are set in the gridlines object. To use narrow grid line spacing, set "auto": false and then set "spacing": 3, where 3 means narrow.

    "gridlines": { "auto": false, "spacing": 3 }
  2. Y-axis settings

    This example show labels only on the Y-axis (measure axis), uses narrow scale and has a custom value range defined. These settings are set in the measureAxis object.

    To show labels only, set "show": "labels". Then set narrow scale: "spacing": 0.5 where 0.5 means narrow. Finally, set "autoMinMax": false, "minMax": "min", "min": 100 to define the custom range.

    "measureAxis": { "show": "labels", "dock": "near", "spacing": 0.5, "autoMinMax": false, "minMax": "min", "min": 100 }
  3. X-axis settings

    To show labels only also on the X-axis (dimension axis), set "dimensionAxis": { "show": "labels" }.

    "dimensionAxis": { "show": "labels" }
  4. Value labels on data points

    To show values labels on data points, set "dataPoint": { "showLabels": true }.

    "dataPoint": { "showLabels": true }
  5. Bar colors

    The bar color is defined in the color object. In this example we define a color that is not part of the default color palette.

    "color": { "bar": { "paletteColor": { "index": -1, "color": "#d47dbe" } } }

Result

Example histogram chart with modified colour and label settings

Code examples

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!