Change Chart Legend and X & Y Axis Font Color

Radzen.Blazor Components
1

Hi, does anyone know of a way to change the font color of the legend, x & y axis for the various charts? The font color seem to default to a muted gray and that works great against a light background but I would like to be able to use a chart against a dark background (and use themes).

I cannot apply the normal 'style' attribute/markup because the legend, x & y axis components of the Radzen charts are currently designed where you can't apply the 'style' attribute/markup, and I do not know which Css class to change to modify the font color. Thank you.

2

Check the Chart API.

3

Thanks for the relpy korcheve, but your API and documentation are the first places I look. Then when I can't figure out or see something missing, that is when I pose question here.

When I looked at your current (assuming it is updated fairly well to keep up with enhancements) API for the charts, using this as a reference RadzenCategoryAxis, the only properties/methods dealing with the labels are FormatString and Formatter -- and none of these can change the font color of the axis. Is your API document complete or does the current Radzen charts do not have this capability?

4

image
image1318×356 18.9 KB

This is the very first property of the RadzenCategoryAxis.

5

Hi korchev:

I already tried that but here it is again. . . ..

I don't think the Stroke property works properly if it's also meant to affect the color of the font. Below is a snapshot to better illustrate the point. I want to change the color of the text (font) labeling of the axis (the dollar values, "Revnue in USD", the "Q1", "Q2", "Q3", etc.) so I can use the Radzen charts against a dark background like the example "Safety KPI" at the top. The Stroke property only affects the color of the axis, not the text, and this was my original query.

<RadzenCategoryAxis Stroke="red" />
<RadzenValueAxis Stroke="red" Formatter="@FormatAsUSD">
      <RadzenGridLines Visible="true" />
      <RadzenAxisTitle Text="Revenue in USD" />
</RadzenValueAxis>

image
image616×599 19.8 KB

6

Hello,

I'm also having the same issue as well.
Setting the stroke will only change the line color, but not the text color.

Is there a way to adjust this?

Thanks,
-Jon Langford

7

Indeed, the stroke property only changes the line color. It does not affect the text.

Yes, you can set the text color via CSS:

text.rz-tick-text {
   fill: red;
}
1 Like
8

Fantastic! That worked perfectly!

Thank you so much for you help

9

where do you put/specify this CSS definition?