# Mixed Chart

## 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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkqPWfBWxgG9OGbWEr0%2F-MkqPngOgvuV_i53ja1n%2Fimage.png?alt=media\&token=8e89a689-dc6f-4712-9178-82ee71311844)

‌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.  

{% tabs %}
{% tab title="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.

```csharp
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.

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkqPWfBWxgG9OGbWEr0%2F-MkqPvRpPPy0SdrWH3ae%2Fimage.png?alt=media\&token=35627702-8c2f-4ffe-ad00-6ea448759a5c)
{% 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-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MlKMh4XgVtMI328ao8w%2F-MlKPdVPCcaO7yF1M-gi%2Fimage.png?alt=media\&token=fe0091c8-8130-4abd-9229-6ab8a90d4c13)

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

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

{% endtab %}

{% tab title="Property Configuration" %}
All 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>LineType</td><td>Property to show different types of lines</td><td><p>Smooth</p><p>Stepline</p><p>Straight</p></td><td>X</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>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for bars.</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 bars</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Line and Area chart with secondary Axis

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkqPWfBWxgG9OGbWEr0%2F-MkqPzGerQLGQmhjtcD8%2Fimage.png?alt=media\&token=771b1dcb-8ef8-467b-83db-54c73da36c6f)

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

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

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

### Column and Area Chart

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkqPWfBWxgG9OGbWEr0%2F-MkqQ5o-pGsg6J3rR25N%2Fimage.png?alt=media\&token=bb21deb2-17dd-482b-9334-389bf8811af6)

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

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

{% endtab %}

{% tab title="Property Configuration" %}

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

### Column, Line and Area Chart

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mk6h6_qso0k3_0dNo1k%2F-MkqPWfBWxgG9OGbWEr0%2F-MkqQ9qeqXECB16kYQv7%2Fimage.png?alt=media\&token=7f1b2bb4-6d00-4598-81d8-c1fd9969989d)

{% tabs %}
{% tab title="Data Configuration" %}
More than one data series is defined in the data collection

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

{% endtab %}

{% tab title="Property Configuration" %}

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