New-UDNivoChart -Pie arc labels overlapping and colour hard to read in dark mode!

PowerShell Universal
1

Hi,

Is there a way to adjust the height of the arc labels on the NivoChart pie chart? as they clash when at the top and bottom. Also the font colour is almost invisible in dark mode.

I’ve tried all the parameters that look like they would work (i.e RadialLabelsLinkDiagonalLength) but they dont seem to do anything!

Thanks

image
image306×133 5.38 KB

Product: PowerShell Universal
Version: 5.5.3
2

You cannot change the height as fare as I know. Instead, you could use -padangle 10
This will create some space between your data arcs making it easier to read. You can increase/decrease the number to fit your data.

You can also change the color of the individual arcs by adding “color = ‘YOURCOLOROFCHOICE’” in your data variable and then using -Colors @{datum = ‘data.color’} parameter.

For dark mode, I haven’t found a way to change the labels color on nivo charts. Nivo chart in general is badly documented and the module is missing basic features.
with that said, you can try changing the theme of your app hosting the nivochart. This can make the lables more visible on some themes.
I’ve created this simple app where you can test different themes. I’ve found that the ‘Hax0r_gr33n’ works okaish.. But there are many in there and I haven’t tested them all.

#DefaultTheme
$DefaultTheme = Get-UDTheme -name 'Hax0r_gr33n'
New-UDApp -Theme $DefaultTheme -Content {
    

    $allThemes = Get-UDTheme

    New-UDSelect -Label "Select Theme" -Option {

        $allThemes | ForEach-Object {

            New-UDSelectOption -Name $_ -Value $_

        }
    
    } -OnChange {
        
        Set-UDTheme -Name $eventData -Variant dark
        
    }

    
    

    New-UDCard -Title "Department Distribution" -Content {
        
        New-UDNivoChart -Pie -Data @(
            @{
                id = "IT"
                label = "IT"
                value = 4
                color = '#BF5290'
            },
            @{
                id = "HR"
                label = "HR"
                value = 1
                color = '#BF5290'
            },
            @{
                id = "Finance"
                label = "Finance"
                value = 3
                color = '#BF5290'
            },
            @{
                id = "Sales"
                label = "Sales"
                value = 600
                color = '#db1835'
            }
        ) -PadAngle 10 -Colors @{datum = 'data.color'}
        
    }

} -DefaultTheme Dark
2 Likes