# Scatter Chart

## Purpose

The scatter diagram graphs pairs of numerical data, with one variable on each axis, to look for a relationship between them. If the variables are correlated, the points will fall along a line or curve.

## Variations

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FSBJUcWzvjQm2ontx7Hdp%2Fimage.png?alt=media\&token=369581dd-bb7a-4775-90aa-a0f36260b4fd)

There are several variations of scatter charts which are supported through the configuration of data and component properties.

* Basic Scatter Chart
* Scatter Chart with Multiple Series
* Scatter Chart with Dates

## Working with Data

‌The data format for the basic scatter chart is the same as for other lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint.  

{% tabs %}
{% tab title="Static Collection example" %}
In this example, a collection with static data called `scatterChart`is defined in the Power App. The **`items`** property of the scatter chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Sales",
        color: "#ec9d4c",
        data: [
            {
                label: 14.2,
                value: 215
            },
            {
                label: 16.4,
                value: 325
            },
            {
                label: 11.9,
                value: 185
            },
            {
                label: 15.2,
                value: 332
            },
            {
                label: 18.5,
                value: 406
            },
            {
                label: 19.4,
                value: 412
            }
        ]
    }
)

```

The above code snippet will generate the following scatter chart.

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FR9EQx53ieBzVRtc8L7ke%2Fimage.png?alt=media\&token=16a3cda7-730d-4efd-b7e7-f3228ffd913c)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FkzDOuwu9ypTKx6uTwDvx%2Fimage.png?alt=media\&token=57d8a0ba-098c-4539-a890-738d66da7510)

The below code snippet will generate dynamic collection to be consumed by component.

```
ClearCollect(
    ColscatterChart,
    {
        name: "Sales",
        data: ForAll(
            'Temprature-Sales',
            {
                Value: {
                    label: ThisRecord.Temp,
                    value: ThisRecord.Sales
                }
            }
        )
    }
)
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] FillOpacity property is set to **1**
* [x]  All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](https://docs.lowcodera.com/component-properties/chart-components) 
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for radar chart.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for radar</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Scatter Chart with Multiple Series

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```csharp
Table(
    {
        name: "Team A",
        color: "#008ffb",
        data: [
            {
                label: 14.2,
                value: 215
            },
            {
                label: 16.4,
                value: 325
            },
            {
                label: 11.9,
                value: 185
            },
            {
                label: 15.2,
                value: 332
            },
            {
                label: 18.5,
                value: 406
            },
            {
                label: 19.4,
                value: 412
            }
        ]
    },
    {
        name: "Team B",
        color: "#26e7a6",
        data: [
            {
                label: 14.2,
                value: 250
            },
            {
                label: 16.4,
                value: 300
            },
            {
                label: 11.9,
                value: 700
            },
            {
                label: 15.2,
                value: 345
            },
            {
                label: 18.5,
                value: 450
            },
            {
                label: 19.4,
                value: 453
            }
        ]
    },
    {
        name: "Team C",
        color: "#fbba39",
        data: [
            {
                label: 15,
                value: 189
            },
            {
                label: 17.5,
                value: 145
            },
            {
                label: 13.6,
                value: 350
            },
            {
                label: 19,
                value: 562
            },
            {
                label: 18.5,
                value: 600
            },
            {
                label: 21,
                value: 350
            }
        ]
    },
    {
        name: "Team D",
        color: "#ff575b",
        data: [
            {
                label: 9.5,
                value: 421
            },
            {
                label: 8.4,
                value: 156
            },
            {
                label: 11.9,
                value: 360
            },
            {
                label: 17.5,
                value: 400
            },
            {
                label: 18.9,
                value: 475
            },
            {
                label: 16.5,
                value: 598
            }
        ]
    }
)


```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillOpacity` property is set to **1**&#x20;
* [x] All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Scatter Chart with Dates

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2Fn7h8kRmLb0TAkbqyTiZ3%2Fimage.png?alt=media\&token=4a512395-cf04-40b4-845e-ba6a1d3afc04)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```csharp
Table(
    {
        name: "Facebook",
        data: [
            {
                label: "2021-01-01T00:00:00",
                value: 215
            },
            {
                label: "2021-01-02T00:00:00",
                value: 325
            },
            {
                label: "2021-01-03T00:00:00",
                value: 185
            },
            {
                label: "2021-01-04T00:00:00",
                value: 332
            },
            {
                label: "2021-01-05T00:00:00",
                value: 406
            },
            {
                label: "2021-01-06T00:00:00",
                value: 412
            }
        ]
    },
    {
        name: "Instagram",
        data: [
            {
                label: "2021-01-01T00:00:00",
                value: 250
            },
            {
                label: "2021-01-021T00:00:00",
                value: 300
            },
            {
                label: "2021-01-03T00:00:00",
                value: 700
            },
            {
                label: "2021-01-04T00:00:00",
                value: 345
            },
            {
                label: "2021-01-05T00:00:00",
                value: 450
            },
            {
                label: "2021-01-06T00:00:00",
                value: 453
            }
        ]
    }
)

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `FillOpacity` property is set to **1**
* [x] `XAxisDataType` property is set to **Datetime**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}