Change Chart Legend and X & Y Axis Font Color

radzenkenn · October 18, 2020, 9:29am

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.

korchev · October 19, 2020, 5:06am

Check the Chart API.

radzenkenn · October 19, 2020, 10:26am

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?

korchev · October 19, 2020, 11:32am

This is the very first property of the RadzenCategoryAxis.

radzenkenn · October 20, 2020, 12:12pm

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>