# Creating scatter plots

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



## Basic scatter plot with number formatting

In this example we create a basic scatter plot, containing one dimension and two measures. The measures have basic number formatting applied and a title is added to the scatter plot.

1. Create the chart

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

   Visualization API

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

   qlik-visual

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

2. Define dimension

   Define the dimension as a column.

   ```
   {
     "qDef": {
       "qFieldDefs": [
         "=[Date.autoCalendar.YearQuarter]"
       ],
       "qFieldLabels": [
         "Year & Qtr"
       ]
     },
     "qNullSuppression": true
   }
   ```

3. Define first measure

   Define the first measure as a column.

   ```
   {
     "qDef": {
       "qFieldDefs": [
         "=[Date.autoCalendar.YearQuarter]"
       ],
       "qFieldLabels": [
         "Year & Qtr"
       ]
     },
     "qNullSuppression": true
   },
   {
     "qDef": {
       "qLabel": "FIR%",
       "qDef": "Avg(FwHit)",
       "qNumFormat": {
         "qType": "F",
         "qnDec": 2,
         "qUseThou": 0,
         "qFmt": "0.0%",
         "qDec": ".",
         "qThou": ","
       }
     }
   }
   ```

4. Define second measure

   Define the second measure as a column.

   { "qDef": { "qFieldDefs": [ "=[Date.autoCalendar.YearQuarter]" ], "qFieldLabels": [ "Year & Qtr" ] }, "qNullSuppression": true }, { "qDef": { "qLabel": "FIR%", "qDef": "Avg(FwHit)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "0.0%", "qDec": ".", "qThou": "," } } }, { "qDef": { "qLabel": "GIR%", "qDef": "Avg(GIR)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "0.0%", "qDec": ".", "qThou": "," } } }

5. Define title

   Then define the title in the options.

   { "showTitles": true, "title": "Fairways hit vs. Greens hit relation" }

### Result

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

### Code examples

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

#### Visualization API

```
app.visualization.create(
  'scatterplot',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "=[Date.autoCalendar.YearQuarter]"
        ],
        "qFieldLabels": [
          "Year and Qtr"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "FIR%",
        "qDef": "Avg(FwHit)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      }
    },
    {
      "qDef": {
        "qLabel": "GIR%",
        "qDef": "Avg(GIR)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      }
    }    
  ],
  {
    "showTitles": true,
    "title": "Fairways hit vs. Greens hit relation"
  }
).then(function(vis){
  vis.show("QV01");
});
```

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

#### qlik-visual

```
<qlik-visual appid="Tutorial-Golf.qvf"
  type="scatterplot"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "=[Date.autoCalendar.YearQuarter]"
        ],
        "qFieldLabels": [
          "Year and Qtr"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "FIR%",
        "qDef": "Avg(FwHit)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      }
    },
    {
      "qDef": {
        "qLabel": "GIR%",
        "qDef": "Avg(GIR)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      }
    }    
  ]'
  options='{
    "showTitles": true,
    "title": "Fairways hit vs. Greens hit relation"
  }' >
</qlik-visual>
```

## Using calculated bubble size

In this example we add a third measure to the scatter plot, which is used to calculate the bubble size.

1. Define third measure

   Define the third measure as a column.

   { "qDef": { "qLabel": "Holes played", "qDef": "Count(HoID)" } }

2. Define bubble size range

   The bubble size range is defined in the dataPoint object in the options: "dataPoint": { "rangeBubbleSizes": [ 1, 11 ] }.

   Tip noterangeBubbleSizes is an array of integers where the first index is the from-size, and the second is the to-size. From-size should always be smaller than the to-size. 1 is the minimum value and 20 is the maximum value.

   { "showTitles": true, "title": "Fairways hit vs. Greens hit relation", "dataPoint": { "rangeBubbleSizes": [ 1, 11 ] } }

### Result

![Example scatter plot chart with bubble size modified by data](https://help.qlik.com/en-US/sense-developer/November2025/Subsystems/Mashups/Content/Resources/Images/on-the-fly-example-scatterplot-02-BubbleSize.png)

### Code examples

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

#### Visualization API

```
app.visualization.create(
  'scatterplot',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "=[Date.autoCalendar.YearQuarter]"
        ],
        "qFieldLabels": [
          "Year and Qtr"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "FIR%",
        "qDef": "Avg(FwHit)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      }
    },
    {
      "qDef": {
        "qLabel": "GIR%",
        "qDef": "Avg(GIR)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      }
    },
    {
      "qDef": {
        "qLabel": "Holes played",
        "qDef": "Count(HoID)"
      }
    }  
  ],
  {
    "showTitles": true,
    "title": "Fairways hit vs. Greens hit relation",
    "dataPoint": {
      "rangeBubbleSizes": [
        1,
        11
      ]
    }
  }
).then(function(vis){
  vis.show("QV01");
});
```

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

#### qlik-visual

```
<qlik-visual appid="Tutorial-Golf.qvf"
  type="scatterplot"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "=[Date.autoCalendar.YearQuarter]"
        ],
        "qFieldLabels": [
          "Year and Qtr"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "FIR%",
        "qDef": "Avg(FwHit)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      }
    },
    {
      "qDef": {
        "qLabel": "GIR%",
        "qDef": "Avg(GIR)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      }
    },
    {
      "qDef": {
        "qLabel": "Holes played",
        "qDef": "Count(HoID)"
      }
    }  
  ]'
  options='{
    "showTitles": true,
    "title": "Fairways hit vs. Greens hit relation",
    "dataPoint": {
      "rangeBubbleSizes": [
        1,
        11
      ]
    }
  }' >
</qlik-visual>
```

## Customizing the bubble colors

In this example we customize the color of the bubbles by an expression, where three different colors are applied depending on the return value of the expression.

1. Enable custom colors

   The bubble color is defined in the color object. We enable custom coloring "auto": false and set "mode": "byExpression". Then define the expression to be used for coloring: "colorExpression": "If(Avg(Stableford)&gt;2,rgb(82, 162, 204),If(Avg(Stableford)&lt;1.65,rgb(248, 152, 29),rgb(128, 128, 128)))". Since the expression includes an actual color code, set "expressionIsColor": true.

   "color": { "auto": false, "mode": "byExpression" }

2. Define color expression

   We then define the expression to be used for coloring: "colorExpression": "If(Avg(Stableford)&gt;2,rgb(82, 162, 204),If(Avg(Stableford)&lt;1.65,rgb(248, 152, 29),rgb(128, 128, 128)))". Since the expression includes an actual color code, set "expressionIsColor": true.

   "color": { "auto": false, "mode": "byExpression", "expressionIsColor": true, "colorExpression": "If(Avg(Stableford)&gt;2,rgb(82, 162, 204),If(Avg(Stableford)&lt;1.65,rgb(248, 152, 29),rgb(128, 128, 128)))" }

3. Add attribute expression on first measure

   Since color expressions must be added as attribute expressions on the first measure, we define this inside the first measure definition in the columns: "qAttributeExpressions": [ { "qExpression": "If(Avg(Stableford)&gt;2,rgb(82, 162, 204),If(Avg(Stableford)&lt;1.65,rgb(248, 152, 29),rgb(128, 128, 128)))", "id": "colorByExpression" } ].

   { "qDef": { "qLabel": "FIR%", "qDef": "Avg(FwHit)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "0.0%", "qDec": ".", "qThou": "," } }, "qAttributeExpressions": [ { "qExpression": "If(Avg(Stableford)&gt;2,rgb(82, 162, 204),If(Avg(Stableford)&lt;1.65,rgb(248, 152, 29),rgb(128, 128, 128)))", "id": "colorByExpression" } ] },

### Result

![Example scatter plot chart with colour and attribute modifiers](https://help.qlik.com/en-US/sense-developer/November2025/Subsystems/Mashups/Content/Resources/Images/on-the-fly-example-scatterplot-03-Coloring.png)

### Code examples

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

#### Visualization API

```
app.visualization.create(
  'scatterplot',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "=[Date.autoCalendar.YearQuarter]"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "FIR%",
        "qDef": "Avg(FwHit)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      },
      "qAttributeExpressions": [
        {
          "qExpression": "If(Avg(Stableford)>2,rgb(82, 162, 204),If(Avg(Stableford)<1.65,rgb(248, 152, 29),rgb(128, 128, 128)))",
          "id": "colorByExpression"
        }
      ]
    },
    {
      "qDef": {
        "qLabel": "GIR%",
        "qDef": "Avg(GIR)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      }
    },
    {
      "qDef": {
        "qLabel": "Holes played",
        "qDef": "Count(HoID)"
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Fairways hit vs. Greens hit relation",
    "showDetails": false,
    "navigation": false,
    "dataPoint": {
      "bubbleSizes": 5,
      "rangeBubbleSizes": [
        1,
        11
      ]
    },
    "labels": {
      "mode": 0
    },
    "compressionResolution": 5,
    "gridLine": {
      "auto": false,
      "spacing": 3
    },
    "color": {
      "auto": false,
      "mode": "byExpression",
      "useBaseColors": "off",
      "expressionIsColor": true,
      "colorExpression": "If(Avg(Stableford)>2,rgb(82, 162, 204),If(Avg(Stableford)<1.65,rgb(248, 152, 29),rgb(128, 128, 128)))"
    },
    "xAxis": {
      "show": "labels"
    },
    "yAxis": {
      "show": "labels"
    }
  }
).then(function(vis){
  vis.show("QV01");
});
```

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

#### qlik-visual

```
<qlik-visual appid="Tutorial-Golf.qvf"
  type="scatterplot"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "=[Date.autoCalendar.YearQuarter]"
        ]
      },
      "qNullSuppression": true
    },
    {
      "qDef": {
        "qLabel": "FIR%",
        "qDef": "Avg(FwHit)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      },
      "qAttributeExpressions": [
        {
          "qExpression": "If(Avg(Stableford)>2,rgb(82, 162, 204),If(Avg(Stableford)<1.65,rgb(248, 152, 29),rgb(128, 128, 128)))",
          "id": "colorByExpression"
        }
      ]
    },
    {
      "qDef": {
        "qLabel": "GIR%",
        "qDef": "Avg(GIR)",
        "qNumFormat": {
          "qType": "F",
          "qnDec": 2,
          "qUseThou": 0,
          "qFmt": "0.0%",
          "qDec": ".",
          "qThou": ","
        }
      }
    },
    {
      "qDef": {
        "qLabel": "Holes played",
        "qDef": "Count(HoID)"
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Fairways hit vs. Greens hit relation",
    "showDetails": false,
    "navigation": false,
    "dataPoint": {
      "bubbleSizes": 5,
      "rangeBubbleSizes": [
        1,
        11
      ]
    },
    "labels": {
      "mode": 0
    },
    "compressionResolution": 5,
    "gridLine": {
      "auto": false,
      "spacing": 3
    },
    "color": {
      "auto": false,
      "mode": "byExpression",
      "useBaseColors": "off",
      "expressionIsColor": true,
      "colorExpression": "If(Avg(Stableford)>2,rgb(82, 162, 204),If(Avg(Stableford)<1.65,rgb(248, 152, 29),rgb(128, 128, 128)))"
    },
    "xAxis": {
      "show": "labels"
    },
    "yAxis": {
      "show": "labels"
    }
  }' >
</qlik-visual>
```