# Line Chart

## About <a href="#about" id="about"></a>

Line charts can retrieve output from scripts and APIs to display the data in a chart.‌

### Display Data from an API <a href="#display-data-from-an-api" id="display-data-from-an-api"></a>

You will need to return an array of JSON objects from your API in order to use a bar chart. An example would be returning a list of hashtables serialized to JSON.

```
@(
    @{
        Name = "Name1"
        Value = Get-Random
    }
    @{
        Name = "Name2"
        Value = Get-Random
    }
    @{
        Name = "Name3"
        Value = Get-Random
    }
) | ConvertTo-Json
```

In this example, you would configure the data source to an API and select your API endpoint.&#x20;

![](https://620394196-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-Mj1-pbnBAhK5PTjIKus%2F-Mj1JE9-zOw7vxo7t_s8%2Fimage.png?alt=media\&token=2b11398a-81a9-4318-94ba-cac3cc63886c)

You would then specify Name as the X axis and Value as the Y axis.​​

![](https://620394196-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-Mj1-pbnBAhK5PTjIKus%2F-Mj1J4Oigola1uVnhLg9%2Fimage.png?alt=media\&token=5f6a9c0f-5daa-4a8b-b8b2-add72d890028)

The resulting chart contains the data from the API. Each time the page is loaded, the API is called.​

![](https://620394196-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-Mj1-pbnBAhK5PTjIKus%2F-Mj1Izx2NdwSMuI1Ksux%2Fimage.png?alt=media\&token=f2fbf32e-57db-43f7-8b08-1620df9b5121)

### Display Data from a Script <a href="#display-data-from-an-api-1" id="display-data-from-an-api-1"></a>

You will need to return PSCustomObjects, objects or hashtables from your script in order to display a chart from a script.

```

@(
    @{
        Name = "Name1"
        Value = Get-Random
    }
    @{
        Name = "Name2"
        Value = Get-Random
    }
    @{
        Name = "Name3"
        Value = Get-Random
    }
) 
```

You will need to set the data source to script and select the script you want to retrieve data for.​

![](https://620394196-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-Mj1-pbnBAhK5PTjIKus%2F-Mj1IpV4wKuCJV2DDp3v%2Fimage.png?alt=media\&token=ee468cab-78fa-41ef-90ee-353501abee6a)

You will need to set the Y and X axis to the properties of the object returned from the script.​‌

The chart will appear on the page like this. Loading the page will not call the script again. It will load the result of the last time the script ran.​

![](https://620394196-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-Mj1-pbnBAhK5PTjIKus%2F-Mj1Izx2NdwSMuI1Ksux%2Fimage.png?alt=media\&token=f2fbf32e-57db-43f7-8b08-1620df9b5121)

‌

## Properties <a href="#properties" id="properties"></a>

| Property         | Description                                               | Available Since |
| ---------------- | --------------------------------------------------------- | --------------- |
| Id               | The ID of this component                                  | 2.2.0           |
| X Axis Field     | The field to use as the X Axis for data within the chart. | 2.2.0           |
| Y Axis Field     | The field to use as the Y Axis for data within the chart. | 2.2.0           |
| Data Source Type | Whether to use a script or API as a data source.          | 2.2.0           |
| Data Source      | The script or API to use as data for the chart.           | 2.2.0           |
| Color            | The bar color to use for the chart.                       | 2.2.0           |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.powershelluniversal.com/v3/userinterfaces/pages/line-chart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
