> 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/da/powershell-kommandoer/new-udchartjs.md).

# New-UDChartJS

New-UDChartJS gengiver et interaktivt ChartJS-diagram i PowerShell Universal med understøttelse af datasæt, klikhændelser og dynamisk indlæste data.

### Synopsis

Opretter et nyt ChartJS-diagram.

### Syntaks

```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>]
```

### Beskrivelse

Opretter et nyt ChartJS-diagram.

### Parametre

#### -Id

Id for komponenten. Standardværdien er et tilfældigt GUID.

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

#### -DatasetLabel

Etiketten for datasættet. Dette bruges kun, når diagrammet har et enkelt datasæt.

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

#### -Type

Den type diagram, der skal oprettes. Gyldige værdier er bar, line, area, doughnut, radar, pie og bubble.

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

#### -Options

En hashtable med indstillinger, der skal overføres til diagrammet.

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

#### -OnClick

En scriptblok, der udføres, når der klikkes på diagrammet. `$EventData` indeholder det element, der blev klikket på.

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

#### -Data

De data, der skal bruges til diagrammet. Dette er et array af objekter eller 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\[]>

Bruges ved definition af flere datasæt. Dette er et array af hashtabeller. Brug cmdletten `New-UDChartJSDataset` til at oprette datasættet.

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

#### -DataProperty

Den egenskab, der skal bruges til dataene. Dette bruges kun, når diagrammet har et enkelt datasæt.

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

#### -LabelProperty

Egenskaben, der skal bruges til etiketten. Dette bruges kun, når diagrammet har et enkelt datasæt.

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

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

Diagrammets baggrundsfarve. Dette bruges kun, når diagrammet har et enkelt datasæt.

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

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

Kantfarven på diagrammet. Dette bruges kun, når diagrammet har et enkelt datasæt.

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

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

Diagrammets baggrundsfarve ved pegning. Denne bruges kun, når diagrammet har et enkelt datasæt.

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

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

Diagrammets kantfarve ved pegning. Dette bruges kun, når diagrammet har et enkelt datasæt.

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

#### -BorderWidth

Rammebredden på diagrammet. Dette bruges kun, når diagrammet har et enkelt datasæt.

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

#### Fælles parametre

Denne cmdlet understøtter de fælles parametre: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable og OutVariable. Se [about\_CommonParameters](https://go.microsoft.com/fwlink/?LinkID=113216) for at få flere oplysninger.

### Output

### Eksempler

#### Eksempel 1: søjlediagram

```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'
}
```

Et søjlediagram med en data- og etikettegenskab.

#### Eksempel 2: boblediagram

```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'
}
```

Et boblediagram med en dataegenskab.

#### Eksempel 3: linjediagram

```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'
}
```

Et linjediagram med en data- og etikettegenskab.

#### Eksempel 4: kransediagram

```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'
}
```

Et kransediagram med en data- og etikettegenskab.

#### Eksempel 5: cirkeldiagram

```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'
}
```

Et cirkeldiagram med en data- og etikettegenskab.

#### Eksempel 6: radardiagram

```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'
}
```

Et radardiagram med en data- og etikettegenskab.

#### Eksempel 7: brugerdefinerede farver

```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'
}
```

Et søjlediagram med en data- og etikettegenskab og nogle konfigurerede farver.

#### Eksempel 8: klikhændelse

```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'
}
```

Et søjlediagram med egenskaberne data og label samt en klikhændelse.

#### Eksempel 9: flere datasæt

```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'
}
```

Et linjediagram med flere datasæt.

#### Eksempel 10: automatisk opdatering

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

Et søjlediagram, der opdateres automatisk hvert sekund.

#### Eksempel 11: ChartJS-indstillinger

```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'
}
```

De kan bruge ChartJS-indstillinger, der er defineret som en hashtable, til yderligere at konfigurere diagrammet. Yderligere oplysninger finder De i [ChartJS-dokumentationen](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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.