Mixed Chart

lowcodera Mixed Chart Component

Purpose

Combination charts let you display different types of data in different ways on the same chart. You may display columns, lines, areas, and steps all on the same combination chart. Use them to visually highlight the differences between different sets of data.

Variations

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

• Line and Column Chart

• Line and Column with secondary axis

• Column and Area Chart

• Column, Line and Area Chart

Working with Data

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

Table(
    {
        name: "Blogs",
        type: "column",
        data: [
            {
                label: 2001,
                value: 544
            },
            {
                label: 2002,
                value: 650
            },
            {
                label: 2003,
                value: 258
            },
            {
                label: 2004,
                value: 352
            },
            {
                label: 2005,
                value: 356
            },
            {
                label: 2006,
                value: 453
            },
            {
                label: 2007,
                value: 555
            },
            {
                label: 2008,
                value: 214
            }
        ]
    },
    {
        name: "Social Media",
        type: "Line",
        data: [
            {
                label: 2001,
                value: 670
            },
            {
                label: 2002,
                value: 880
            },
            {
                label: 2003,
                value: 450
            },
            {
                label: 2004,
                value: 460
            },
            {
                label: 2005,
                value: 620
            },
            {
                label: 2006,
                value: 470
            },
            {
                label: 2007,
                value: 583
            },
            {
                label: 2008,
                value: 357
            }
        ]
    }
)

The above code snippet will generate the following bar chart.

Dynamic 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: "Blogs",
        type: "column",
        data: ForAll(
            'Social Media Trend',
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Blogs
                }
            }
        )
    },
    {
        name: "Social Media",
        type: "Line",
        data: ForAll(
            'Social Media Trend',
            {
                Value: {
                    label: ThisRecord.Year,
                    value: ThisRecord.Blogs
                }
            }
        )
    }
)

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 bars.	Gradient Image Solid	X
BackgroundImage	Property to provide background image URL for bars	URL	X

Examples

Line and Area chart with secondary Axis

Data Configuration

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

Table(
    {
        name: "Blogs",
        type: "column",
        data: [
            {
                label: 2001,
                value: 544
            },
            {
                label: 2002,
                value: 650
            },
            {
                label: 2003,
                value: 258
            },
            {
                label: 2004,
                value: 352
            },
            {
                label: 2005,
                value: 356
            },
            {
                label: 2006,
                value: 453
            },
            {
                label: 2007,
                value: 555
            },
            {
                label: 2008,
                value: 214
            }
        ]
    },
    {
        name: "Social Media",
        oppositetitle: "Social Media",
        type: "Line",
        opposite: true,
        data: [
            {
                label: 2001,
                value: 70
            },
            {
                label: 2002,
                value: 80
            },
            {
                label: 2003,
                value: 50
            },
            {
                label: 2004,
                value: 40
            },
            {
                label: 2005,
                value: 60
            },
            {
                label: 2006,
                value: 40
            },
            {
                label: 2007,
                value: 58
            },
            {
                label: 2008,
                value: 35
            }
        ]
    }
)

Property Configuration

All control properties can be left as default

Column and Area Chart

Data Configuration

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

ClearCollect(
    ColColArea,
    {
        name: "Team A",
        type: "column",
        data: [
            {
                label: 2001,
                value: 23
            },
            {
                label: 2002,
                value: 11
            },
            {
                label: 2003,
                value: 21
            },
            {
                label: 2004,
                value: 27
            },
            {
                label: 2005,
                value: 13
            },
            {
                label: 2006,
                value: 12
            },
            {
                label: 2007,
                value: 37
            },
            {
                label: 2008,
                value: 44
            }
        ]
    },
    {
        name: "Team B",
        type: "column",
        data: [
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 55
            },
            {
                label: 2003,
                value: 51
            },
            {
                label: 2004,
                value: 67
            },
            {
                label: 2005,
                value: 43
            },
            {
                label: 2006,
                value: 40
            },
            {
                label: 2007,
                value: 56
            },
            {
                label: 2008,
                value: 27
            }
        ]
    },
    {
        name: "Team C",
        type: "area",
        dashlength: 2,
        data: [
            {
                label: 2001,
                value: 30
            },
            {
                label: 2002,
                value: 25
            },
            {
                label: 2003,
                value: 26
            },
            {
                label: 2004,
                value: 30
            },
            {
                label: 2005,
                value: 45
            },
            {
                label: 2006,
                value: 35
            },
            {
                label: 2007,
                value: 67
            },
            {
                label: 2008,
                value: 42
            }
        ]
    }
)

Property Configuration

• LineType property is set to Smooth

• All other control properties can be left as default

Column, Line and Area Chart

Data Configuration

More than one data series is defined in the data collection

Table(
    {
        name: "Team A",
        type: "column",
        data: [
            {
                label: 2001,
                value: 23
            },
            {
                label: 2002,
                value: 11
            },
            {
                label: 2003,
                value: 21
            },
            {
                label: 2004,
                value: 27
            },
            {
                label: 2005,
                value: 13
            },
            {
                label: 2006,
                value: 12
            },
            {
                label: 2007,
                value: 37
            },
            {
                label: 2008,
                value: 44
            }
        ]
    },
    {
        name: "Team B",
        type: "Area",
        dashlength: 2,
        oppositetitle: "Social Media",
        data: [
            {
                label: 2001,
                value: 44
            },
            {
                label: 2002,
                value: 55
            },
            {
                label: 2003,
                value: 51
            },
            {
                label: 2004,
                value: 67
            },
            {
                label: 2005,
                value: 43
            },
            {
                label: 2006,
                value: 40
            },
            {
                label: 2007,
                value: 56
            },
            {
                label: 2008,
                value: 27
            }
        ]
    },
    {
        name: "Team C",
        type: "Line",
        dashlength: 2,
        data: [
            {
                label: 2001,
                value: 30
            },
            {
                label: 2002,
                value: 25
            },
            {
                label: 2003,
                value: 26
            },
            {
                label: 2004,
                value: 30
            },
            {
                label: 2005,
                value: 45
            },
            {
                label: 2006,
                value: 35
            },
            {
                label: 2007,
                value: 67
            },
            {
                label: 2008,
                value: 42
            }
        ]
    }
)

Property Configuration

• LineType property is set to Smooth

• All other control properties can be left as default