Can't seem to theme the text inside a UDChart?

Universal Dashboard Universal Dashboard Help
1

I’ve been setting up a theme for consistency across a few dashboards and I’ve run into an issue that I feel should be fairly easy to solve and I’m going mad for not seeing something obvious.

Long story short, the text inside a UDChart always seems to be #666666 and I can’t figure out how to change this. This is ok on light themes, but sucks a bit when you switch over to a dark theme.

For an example, I’m using the Azure demo dashboard and switch it over to the ‘DarkDefault’ theme, I end up with:

image
image1510×295 32.3 KB

I can change the fontcolor all I like, but that only get’s the title above the chart.

I’ve tried applying a color/fontcolor to the “chartjs-render-monitor” class without any luck.

2

@Windos

Havent used theming ever but I know this command and can help you work around your need to set the fontcolor of the legend:

for setting the chart axes labeling font color you have to look at this: https://www.chartjs.org/docs/latest/axes/labelling.html

Can you share a code snipped what you have tried so far with ChartJS options?

3

Using the chartjs site when you close your New-UdChart Endpoint, add:

} -Options @{
				legend  = @{
					labels = @{
						fontColor = '#E933FF'
					}
				}
				scales = @{
					xAxes = @(
						@{
							ticks = @{
								fontColor = '#E933FF'
							}
							gridLines = @{
								color = '#E933FF'
							}
						}
					)
					yAxes = @(
						@{
							ticks = @{
								fontColor = '#E933FF'
							}
							gridLines = @{
								color = '#E933FF'
							}
						}
					)
				}
			}

This will set your legend font colour, gridlines and axes font colour to pink (other colours are available). the entire scriptblock can be set as a variable to be reused on multiple charts.
See also https://docs.universaldashboard.io/components/data-visualizations/charts#stacked-bar-charts

gav

3 Likes
4

Thanks for that @OpsEng, I started looking into the chartjs options but was just seeing a lot of stuff about tweaking layouts (like the stacked options) and didn’t make it far enough into the docs to find this.

Just assumed it was something CSS-able, and got some blinders on as a result.

5

There’s a bit of trial and error converting it into powershell hashes and arrays.

gav