LogoLogo
  • Getting Started
    • Overview
    • Download components
    • Installing Components
    • Using a component
    • lowcodera App Tokens
  • UI Components
    • lowcodera UI Assets
    • Button
    • Card
    • Date time picker
    • Dropdown Menu
    • Horizontal Navbar
    • Icon
    • PowerGrid
    • Progress Bar
    • TextBox
    • Vertical Navbar
  • Visualization Components
  • Area Chart
  • Bar Chart
  • Column Chart
  • Donut Chart
  • Heatmap Chart
  • Kanban Board
  • Swimlane
  • Line Chart
  • Mixed Chart
  • Pie Chart
  • Polar Chart
  • Radar Chart
  • Radial Chart
  • Strategic Roadmap
  • Scatter Chart
  • Timeline Chart
  • Properties Reference
    • UI Component Properties
    • Chart Component Properties
    • Navbar Schema
  • Page 1
Powered by GitBook
On this page
  • Purpose
  • Variations
  • Working with Data
  • Chart Properties
  • Examples
  • Scatter Chart with Multiple Series
  • Scatter Chart with Dates

Was this helpful?

Scatter Chart

lowcodera Scatter Chart

PreviousStrategic RoadmapNextTimeline Chart

Last updated 2 years ago

Was this helpful?

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

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.

In this example, a collection with static data called scatterChartis defined in the Power App. The items property of the scatter chart component is then bound to this collection.

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.

The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

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
                }
            }
        )
    }
)

Chart Properties

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

Property

Description

Accepted Values

Required

DataLabelSymbol

Property to add any symbol (eg. currency or any appened words) along with data labels

Text

X

FillType

Property to choose fill type for radar chart.

Gradient

Image

Solid

X

BackgroundImage

Property to provide background image URL for radar

URL

X

Examples

Scatter Chart with Multiple Series

A single or multiple data series is defined in the collection. 

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
            }
        ]
    }
)

Scatter Chart with Dates

A single or multiple data series is defined in the collection. 

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
            }
        ]
    }
)

For a full listing of all chart properties see the

chart components property reference