Nivo Chart Customization Fix (Work Around)

Product: PowerShell Universal
Version: 2.6.2

I’m making this thread to possibly help anyone else out from having to look through the bundled js for the charts module. For ways to change Label Settings.

I found that Labels colors / font size are hard coded in the module currently. This causes the render to create an element.style CSS element that supersedes any attempts to change the CSS of the render. I tried using the UDStyle Module but nothing worked.

To update these you will need to open the bundled JS file in your favorite editor (NP++, VsCode, etc.) and search for #333333 the values you find correspond to the Label Color Values. Font Size can be manipulated from the same line as well.

I also believe that the DisableRadiusLabels for Pie charts is currently broken because in the current documentation for Nivo Charts it has the labels displayed as arcLabels and arcLinkLabels respectively. In the Pie JSX it’s calling and setting a parameter called enableRadiusLabels.

A few simple fixes to the Module will fix these in the future and I’m sure it will be updated at some point. These are decent work around for the time being.

Edit: Forgot to add in that if you want to utilize a different Color Theme provided by Nivo set -Colors to

-Colors @{scheme='ThemeName'}

Note: I believe changing the Label Color Values / Text Size will affect all charts in the Dashboard but I have not tested that theory. Test at your own risk.

1 Like