New-UDChartJS Pie/Doughnut Colors

PowerShell Universal Universal Dashboard
1

Hi all,

I’ve been lurking for a bit as I’ve started to dabble with Universal Dashboard. One task I wanted to try was a quick MS Licensing consumption dashboard showing a grid of cards, each with a a pie/doughnut chart for a given product and its licensing status. I’ve got the grid working well and I can display the data as I like, but I’m having a heck of a time figuring out how to color the chart elements. Basically, I’m iterating through our licensed products one by one, calculating the details, and displaying the chart.

Below are two of the chart cards. The left chart shows the two different data in different colors because I’m hovering over the “available” section. The right chart has both “Available” and “Consumed” displayed as the same color. My goal is to have “Available” and “Consumed” display as different colors without having to hover over the chart itself. Thanks so much for any suggestions!

chart
chart759×311 10.8 KB 

foreach ($l in $session:licenseSkuLookup.getEnumerator()) {
                                #Select the given consumption details
                                $consumptionDetails = $licenseConsumption | where {$_.SkuID -eq $l.name}
                                #New collection to display
                                $consumptionCollection = New-Object System.Collections.ArrayList
                                #Calculate available licenses
                                $availableLicenses = New-Object PSObject
                                $availableLicenses | add-member -memberType NoteProperty -name "Licenses" -Value ($consumptionDetails.Enabled - $consumptionDetails.consumedUnits)
                                $availableLicenses | add-member -memberType NoteProperty -name "Type" -value "Available"
                                #Calculate consumed licenses
                                $consumedLicenses = New-Object PSObject
                                $consumedLicenses | add-member -memberType NoteProperty -name "Licenses" -Value $consumptionDetails.consumedUnits
                                $consumedLicenses | add-member -memberType NoteProperty -name "Type" -value "Consumed"
                                #Add available and consumed licenses to display collection
                                $consumptionCollection.add($availableLicenses)
                                $consumptionCollection.add($consumedLicenses)
                                
                                #Chart options
                                $chartOptions = @{
                                    Type = 'pie'
                                    Data = $consumptionCollection
                                    HoverBackgroundColor = 'salmon'
                                    DataProperty = 'Licenses'
                                    LabelProperty = 'Type'
                                }

                                #Display
                                New-UDColumn -LargeSize 3 {
                                    New-UDCard -Title $l.value -Content {
                                        New-UDChartJS @chartOptions
                                    }
                                }
                            }
2

I think you can specify an array of colors to accomplish this.

BackgroundColor = @('red','green')

If that doesn’t work, let me know and I’ll mess around with it.

3

That did it. So simple, thanks!

1 Like
4

This post put me on the path of figuring out how to get x random colors, it still requires one to know the minimum amount of datasets to avoid color reuse though.

$Options = @{
    Type            = 'doughnut'
    Data            = $PipelineOutput
    LabelProperty   = "Type"
    DataProperty    = "Count"
    BackgroundColor = 1..4 | foreach { "#{0:X6}" -f (Get-Random -Maximum 0xFFFFFF)}
}