Radar Chart

lowcodera Radar chart component

Purpose

Radar Charts are used to compare two or more items or groups on various features or characteristics. They are used to plot one or more groups of values over multiple common variables. They do this by giving an axis for each variable, and these axes are arranged radially around a central point and spaced equally. The data from a single observation are plotted along each axis and connected to form a polygon. Multiple observations can be placed in a single chart.

Variations

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

• Basic Radar Chart

• Radar Chart with Multiple Series

• Radar Chart with Polygon fill

Working with Data

‌The data format for the Radar 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.

Static Collection example

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

ClearCollect(
    ColBasicRadar,
    {
        name: "Population",
        color:"#06d6a0",
        data: ForAll([
            {
                label: "Jan",
                value: 80
            },
            {
                label: "Feb",
                value: 50
            },
            {
                label: "Mar",
                value: 30
            },
            {
                label: "Apr",
                value: 80
            },
            {
                label: "May",
                value: 100
            },
            {
                label: "Jun",
                value: 20
            }
        ], {Value: ThisRecord})
    }
);

The above code snippet will generate the following Radar chart.

Chart Properties

For a full listing of all chart properties see the chart components property reference

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

Property	Description	Required	Accepted Values
DataLabelSymbol	Property to add any symbol (eg. currency or any appened words) along with data labels	X	Text
FillType	Property to choose fill type for radar chart.	X	Gradient Image Solid
BackgroundImage	Property to provide background image URL for radar	X	URL

Examples

Radar Chart with Multiple Series

Data Configuration

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

ClearCollect(
    ColMultiSeriesRadar,
    {
        name: "India",
        color:"#ffd166",
        data: ForAll([
            {
                label: "Jan",
                value: 100
            },
            {
                label: "Feb",
                value: 80
            },
            {
                label: "Mar",
                value: 30
            },
            {
                label: "Apr",
                value: 80
            },
            {
                label: "May",
                value: 95
            },
            {
                label: "Jun",
                value: 60
            }
        ], {Value: ThisRecord})
    }, 
    {
        name: "UK",
        color:"#06d6a0",
        data: ForAll([
            {
                label: "Jan",
                value: 70
            },
            {
                label: "Feb",
                value:50
            },
            {
                label: "Mar",
                value: 90
            },
            {
                label: "Apr",
                value: 50
            },
            {
                label: "May",
                value: 50
            },
            {
                label: "Jun",
                value: 90
            }
        ], {Value: ThisRecord})
    },
    {
        name: "US",
        color:"#ef476f",
        data: ForAll([
            {
                label: "Jan",
                value: 80
            },
            {
                label: "Feb",
                value: 25
            },
            {
                label: "Mar",
                value: 70
            },
            {
                label: "Apr",
                value: 36
            },
            {
                label: "May",
                value: 35
            },
            {
                label: "Jun",
                value: 45
            }
        ], {Value: ThisRecord})
    }  
);

Property Configuration

• All other control properties can be left as default

Radar Chart with Polygon Fill

Data Configuration

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

ClearCollect(
    ColPolygonFillRadar,
    {
        name: "Days",
        color:"#ef233c",
        data: ForAll([
            {
                label: "Sun",
                value: 20
            },
            {
                label: "Mon",
                value: 100
            },
            {
                label: "Tue",
                value: 40
            },
            {
                label: "Wed",
                value: 30
            },
            {
                label: "Thu",
                value: 50
            },
            {
                label: "Fri",
                value: 80
            },
            {
                label: "Sat",
                value: 33
            }
        ], {Value: ThisRecord})
    }
);
ClearCollect(
    ColPolarChart,
    {
        name: "Delivery",
        color:"#ef476f",
        data: 14
    },
    {
        name: "Finance",
        data: 23,
        color:"#ffd166"
    },
    {
        name: "HR",
        data: 21,
        color:"#06d6a0"
    },
    {
        name: "Planning",
        data: 17,
        color:"#118ab2"
    },
    {
        name: "Production",
        data: 10,
        color:"#073b4c"
    },
    {
        name: "Purchasing",
        data: 12,
        color:"#ef233c"
    },
    {
        name: "QA",
        data: 17,
        color:"#8338ec"
    },
    {
        name: "WareHouse",
        data: 19,
        color:"#540b0e"
    }
);
ClearCollect(
    ColPolarChartMono,
    {
        name: "Delivery",
        data: 5,
        color: "#4c782f"
    },
    {
        name: "Finance",
        data: 12,
        color: "#598a37"
    },
    {
        name: "HR",
        data: 15,
        color: "#62993e"
    },
    {
        name: "Planning",
        data: 12,
        color: "#6ca744"
    },
    {
        name: "Production",
        data: 10,
        color: "#81b464"
    },
    {
        name: "Purchasing",
        data: 10,
        color: "#a1c490"
    },
    {
        name: "QA",
        data: 17,
        color: "#b8d1ad"
    },
    {
        name: "WareHouse",
        data: 19,
        color: "#cedec7"
    }
);

Property Configuration

• All other control properties can be left as default