Product: PowerShell Universal
Version: 1.4.6
Unable to resize UDNivoChart -Pie. I am using a UDGrid, within the GRid my chart is in a UDCard, but I can’t resize it, make it smaller so I can get 6 Pies in a Row
New-UDGrid -Item -ExtraSmallSize 2 -Content {
New-UDCard -Title ‘Title’ -Content {
$Obj =
$([PSCustomObject]@{
id =
Value =
Color = ‘#FFFFFF’
}
[PSCustomObject]@{
id =
Value =
Color = ‘#000000’
}
)
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id ‘id’ -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = ‘data.color’ }` -MarginRight 300 -Height 350 -Responsive
}
I have no clue how to make it smaller.
You can use the -height parameter to control the size of the pie chart.
I’ve also created 3 examples below and used height 170.
- The first one uses all the elements you asked for.
- The second one looks a bit more clean
- The third one has less code and can be combined with the others
You can use either the New-UDGrid or the New-UDStack with the parameters
-Direction
-JustifyContent
-AlignItems
to control how your elements are appear.
Examples
New-UDApp -Title "Test" -Content {
$Obj = $(
[PSCustomObject]@{
id = 1
Value = $(1..100 | Get-Random)
Color = "#FFF888"
}
[PSCustomObject]@{
id = 2
Value = $(1..100 | Get-Random)
Color = "#905621"
}
)
New-UDTypography -Text "Grid version"
New-UDGrid -Container -Children {
New-UDGrid -Item -Children {
New-UDCard -Content {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
}
} -ExtraSmallSize 2
New-UDGrid -Item -Children {
New-UDCard -Content {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
}
} -ExtraSmallSize 2
New-UDGrid -Item -Children {
New-UDCard -Content {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
}
} -ExtraSmallSize 2
New-UDGrid -Item -Children {
New-UDCard -Content {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
}
} -ExtraSmallSize 2
New-UDGrid -Item -Children {
New-UDCard -Content {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
}
} -ExtraSmallSize 2
New-UDGrid -Item -Children {
New-UDCard -Content {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
}
} -ExtraSmallSize 2
} -Direction row
New-UDTypography -Text "Another version"
New-UDGrid -Container -Children {
New-UDGrid -Item -Children {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
} -ExtraSmallSize 1
New-UDGrid -Item -Children {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
} -ExtraSmallSize 1
New-UDGrid -Item -Children {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
} -ExtraSmallSize 1
New-UDGrid -Item -Children {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
} -ExtraSmallSize 1
New-UDGrid -Item -Children {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
} -ExtraSmallSize 1
New-UDGrid -Item -Children {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
} -ExtraSmallSize 1
} -Direction row -JustifyContent -AlignItems
New-UDTypography -Text "Layout Option"
New-UDContainer -Content {
New-UDLayout -Columns 6 -Content {
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
New-UDNivoChart -Pie -Data ($Obj | Where-Object { $_.Value -ne 0 }) -Id "id1" -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = "data.color" }` -MarginRight 150 -Height 170 -Responsive
}
}
}
1 Like