> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/powershell-commands/new-udchartjs.md).

# New-UDChartJS

New-UDChartJS renders an interactive ChartJS chart in PowerShell Universal, supporting datasets, click events, and dynamically loaded data.

### Synopsis

Creates a new ChartJS chart.

### Syntax

```powershell
New-UDChartJS [-Id <String>] [-Type <String>] [-Options <Hashtable>] [-OnClick <Endpoint>] [-LoadData <Endpoint>] [-LabelProperty <String>] [<CommonParameters>]

New-UDChartJS [-Id <String>] [-DatasetLabel <String>] [-Type <String>] [-Options <Hashtable>] [-OnClick <Endpoint>] -Data <Object> [-DataProperty <String>] [-LabelProperty <String>] [-BackgroundColor <DashboardColor[]>] [-BorderColor <DashboardColor[]>] [-HoverBackgroundColor <DashboardColor[]>] [-HoverBorderColor <DashboardColor[]>] [-BorderWidth <Int32>] [<CommonParameters>]

New-UDChartJS [-Id <String>] [-Type <String>] [-Options <Hashtable>] [-OnClick <Endpoint>] -Data <Object> -Dataset <Hashtable[]> [-LabelProperty <String>] [<CommonParameters>]
```

### Description

Creates a new ChartJS chart.

### Parameters

#### -Id

The ID of the component. It defaults to a random GUID.

```
Required?                    false
Position?                    named
Default value                [Guid]::NewGuid()
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -DatasetLabel

The label for the dataset. This is only used when the chart has a single dataset.

```
Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -Type

The type of chart to create. Valid values are bar, line, area, doughnut, radar, pie, and bubble.

```
Required?                    false
Position?                    named
Default value                bar
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -Options

A hashtable of options to pass to the chart.

```
Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -OnClick

A script block to execute when the chart is clicked. `$EventData` will include the element that was clicked.

```
Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -Data

The data to use for the chart. This is an array of objects or hashtables.

```
Required?                    true
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -LoadData

```
Required?                    false
Position?                    named
Default value                {
                                 $Data = @(
                                     @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }
                                     @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }
                                     @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }
                                     @{ Server = "Server4"; AvailableRam = 64; ; UsedRAM = 26 }
                                     @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }
                                 )
                                 New-UDChartJSDataset -Data ($Data | Select-Object -Expand AvailableRam) -DataProperty AvailableRam -Label 'Available RAM' -BackgroundColor '#126f8c' -BorderWidth 1
                             }
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -Dataset \<Hashtable\[]>

Used when defining multiple datasets. This is an array of hashtables. Use the `New-UDChartJSDataset` cmdlet to create the dataset.

```
Required?                    true
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -DataProperty

The property to use for the data. This is only used when the chart has a single dataset.

```
Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -LabelProperty

The property to use for the label. This is only used when the chart has a single dataset.

```
Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -BackgroundColor \<DashboardColor\[]>

The background color of the chart. This is only used when the chart has a single dataset.

```
Required?                    false
Position?                    named
Default value                @("#808978FF")
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -BorderColor \<DashboardColor\[]>

The border color of the chart. This is only used when the chart has a single dataset.

```
Required?                    false
Position?                    named
Default value                @("#FF8978FF")
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -HoverBackgroundColor \<DashboardColor\[]>

The hover background color of the chart. This is only used when the chart has a single dataset.

```
Required?                    false
Position?                    named
Default value                @("#807B210C")
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -HoverBorderColor \<DashboardColor\[]>

The hover border color of the chart. This is only used when the chart has a single dataset.

```
Required?                    false
Position?                    named
Default value                @("#FF7B210C")
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### -BorderWidth

The border width of the chart. This is only used when the chart has a single dataset.

```
Required?                    false
Position?                    named
Default value                1
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false
```

#### Common parameters

This cmdlet supports the common parameters: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable, and OutVariable. For more information, see [about\_CommonParameters](https://go.microsoft.com/fwlink/?LinkID=113216).

### Outputs

### Examples

#### Example 1: Bar chart

```powershell
$Data = @(
    @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }
    @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }
    @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }
    @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 }
    @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }
)
New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content {
    New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -Id 'chart1'
}
```

A bar chart with a data and label property.

#### Example 2: Bubble chart

```powershell
$Data = @(
    @{ x = 1; y = 10; r = 15 }
    @{ x = 12; y = 25; r = 35 }
    @{ x = 8; y = 10; r = 95 }
    @{ x = 6; y = 95; r = 25 }
)
New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content {
    New-UDChartJS -Type 'bubble' -Data $Data -Id 'chart2'
}
```

A bubble chart with a data property.

#### Example 3: Line chart

```powershell
$Data = @(
    @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }
    @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }
    @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }
    @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 }
    @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }
)
New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content {
    New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'line' -BorderWidth 1 -Id 'chart3'
}
```

A line chart with a data and label property.

#### Example 4: Doughnut chart

```powershell
$Data = @(
    @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }
    @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }
    @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }
    @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 }
    @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }
)
New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "10vw" } } -Content {
    New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'doughnut' -Id 'chart4'
}
```

A doughnut chart with a data and label property.

#### Example 5: Pie chart

```powershell
$Data = @(
    @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }
    @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }
    @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }
    @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 }
    @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }
)
New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "10vw" } } -Content {
    New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'pie' -Id 'chart5'
}
```

A pie chart with a data and label property.

#### Example 6: Radar chart

```powershell
$Data = @(
    @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }
    @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }
    @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }
    @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 }
    @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }
)
New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "10vw" } } -Content {
    New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'radar' -Id 'chart6'
}
```

A radar chart with a data and label property.

#### Example 7: Custom colors

```powershell
$Data = @(
    @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }
    @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }
    @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }
    @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 }
    @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }
)
New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '10vh'; width = "10vw" } } -Content {
    New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -BackgroundColor '#808978FF' -HoverBackgroundColor '#808978FF' -HoverBorderColor '#808978FF' -BorderColor '#808978FF' -Id 'chart7'
}
```

A bar chart with a data and label property and some configured colors.

#### Example 8: Click event

```powershell
$Data = @(
    @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }
    @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }
    @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }
    @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 }
    @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }
)
New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content {
    New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -OnClick {
        Show-UDToast -Message "Clicked: $Body"
    } -Id 'chart8'
}
```

A bar chart with a data and label property and a click event.

#### Example 9: Multiple datasets

```powershell
$Data = @(
    @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }
    @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }
    @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }
    @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 }
    @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }
)
$Dataset1 = New-UDChartJSDataset -DataProperty AvailableRam -Label 'Available RAM' -BackgroundColor '#126f8c' -BorderWidth 1
$Dataset2 = New-UDChartJSDataset -DataProperty UsedRAM -Label 'Used RAM' -BackgroundColor '#8da322' -BorderWidth 1
New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '10vh'; width = "10vw" } } -Content {
    New-UDChartJS -Data $Data -Dataset @($Dataset1, $Dataset2) -LabelProperty Server -Type 'line' -Id 'chart9'
}
```

A line chart with multiple datasets.

#### Example 10: Auto refresh

```powershell
New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content {
    New-UDDynamic -Content {
        $Data = 1..10 | ForEach-Object {
            [PSCustomObject]@{ Name = $_; Value = Get-Random }
        }
        New-UDChartJS -Type 'bar' -Data $Data -DataProperty Value -Id 'chart10' -LabelProperty Name -BackgroundColor Blue
    } -AutoRefresh -AutoRefreshInterval 1
}
```

A bar chart that auto refreshes every second.

#### Example 11: ChartJS options

```powershell
$Data = @(
    @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }
    @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }
    @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }
    @{ Server = "Server4"; AvailableRam = 64; UsedRAM = 26 }
    @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }
)
New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw" } } -Content {
    New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -OnClick {
        Show-UDToast -Message "Clicked: $Body"
    } -Options @{
        plugins = @{
            legend = @{
                title = @{
                    display = $true
                    text = 'Bar Chart'
                }
            }
        }
    } -Id 'chart11'
}
```

You can use ChartJS options defined as a hashtable to further configure the chart. For more information, see the [ChartJS documentation](https://www.chartjs.org/docs/3.9.1/).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.devolutions.net/powershell-universal/powershell-commands/new-udchartjs.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.