Line Chart

lowcodera Line chart component

Purpose

Line graphs are used to track changes over short and long periods of time. When smaller changes exist, line graphs are better to use than bar graphs. Line graphs can also be used to compare changes over the same period of time for more than one group.

Variations

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

• Basic Line Chart

• Spline Line Chart

• Step line Line Chart

• Dashed Line Chart

• Gradient Line Chart

Working with Data

‌The data format for the Line 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 LineChartColBasics is defined in the Power App. The items property of the line chart component is then bound to this collection.

Table(
    {
        name: "Actual",
        data: ForAll([
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 60
            },
            {
                label: 2003,
                value: 28
            },
            {
                label: 2004,
                value: 32
            },
            {
                label: 2005,
                value: 36
            },
            {
                label: 2006,
                value: 43
            },
            {
                label: 2007,
                value: 55
            },
            {
                label: 2008,
                value: 21
            }
        ],{Value: ThisRecord})
    },
    {
        name: "Budgeted",
        data: ForAll([
            {
                label: 2001,
                value: 25
            },
            {
                label: 2002,
                value: 42
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 18
            },
            {
                label: 2005,
                value: 17
            },
            {
                label: 2006,
                value: 19
            },
            {
                label: 2007,
                value: 58
            },
            {
                label: 2008,
                value: 35
            }
        ],{Value: ThisRecord})
    }
)

The above code snippet will generate the following line chart.

Dyamic Collection Example

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.

Table(
    {
        name: "Actual",
        data: ForAll(
            Finances,
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Actual
                }
            }
        )
    },
    {
        name: "Budgeted",
        data: ForAll(
            Finances,
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Budget
                }
            }
        )
    }
)

Property Configuration

All control properties can be left as default

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	Accepted Values	Required
LineType	Property to show different types of lines	Smooth Stepline Straight	X
DataLabelSymbol	Property to add any symbol (eg. currency or any appened words) along with data labels	Text	X
ShowReversed	Property to represent the Y-Axis from the right side	Boolean	X
FillType	Property to choose fill type for lines.	Gradient Image Solid	X
BackgroundImage	Property to provide background image URL for lines	URL	X

Examples

Spline Line Chart

Data Configuration

A single or multiple data series is defined in the collection. You can use the same collection used in section.

Property Configuration

• LineType property is set to Smooth

• All other control properties can be left as default

Stepline Line Chart

Stepline line chart

Data Configuration

More than one data series is defined in the data collection

ClearCollect(
    ColStepline,
    {
        data: ForAll(
            'Malaga Weather',
            {
                Value: {
                    label: ThisRecord.Date,
                    value: ThisRecord.Temperature
                }
            }
        ),
        name: "Malaga"
    }
);

Property Configuration

• LineType property is set to Stepline

• All other control properties can be left as default

Dashed Line Chart

Data Configuration

More than one data series is defined in the data collection.

ClearCollect(
    CollDashedLineChart,
    {
        name: "Population",
        dashlength: 7, // Resposible for Dashline
        data: ForAll([
            {
                label: "Cairo",
                value: 115
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 80
            }
        ],{Value: ThisRecord})
    },
    {
        name: "Education",
        dashlength: 9,
        data: [
            {
                label: "Cairo",
                value: 180
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 70
            }
        ]
    },
    {
        name: "Income",
        dashlength: 2,
        data: ForAll([
            {
                label: "Cairo",
                value: 100,
                isnull: false
            },
            {
                label: "Damietta",
                value: 100
            },
            {
                label: "Alex",
                value: 150
            }
        ],{Value: ThisRecord})
    }
);

Property Configuration

• LineType property is set to Smooth

• All other control properties can be left as default

Gradient Line Chart

Data Configuration

More than one data series is defined in the data collection.

ClearCollect(
    ColGradientLineChart,
    {
        name: "Population",
        
        data: ForAll([
            {
                label: "Cairo",
                value: 115
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 80
            }
        ],{Value: ThisRecord})
    },
    {
        name: "Education",
     
        data: ForAll([
            {
                label: "Cairo",
                value: 180
            },
            {
                label: "Damietta",
                value: 50
            },
            {
                label: "Alex",
                value: 70
            }
        ],{Value: ThisRecord})
    },
    {
        name: "Income",
        dashlength: 2,
        data: ForAll([
            {
                label: "Cairo",
                value: 100,
                isnull: false
            },
            {
                label: "Damietta",
                value: 100
            },
            {
                label: "Alex",
                value: 150
            }
        ],{Value: ThisRecord})
    }
);

Property Configuration

• LineType property is set to Smooth

• FillType property is set to Gradient

• GradientShadeIntensity property is set to 3

• GradientOpcityFrom property is set to 5

• GradientOpcityTo property is set to 10

• GradientStop property is set to 3

• All other control properties can be left as default