[Bug]: Theme colors are not applied when multiple charts are present in Live Preview

[kepano]

Describe the bug

When a note contains multiple charts, several colors are no longer respected if you are in Live Preview. This is especially noticeable in dark mode.

1. Axes numbers switch from theme color (I think --text-muted) to black
2. Some grid lines are either removed or go transparent, I am not sure
3. --chart-color-1 etc are reset to default and do not use the theme color

Example from Minimal Theme with Solarized color (available via Minimal Theme Settings plugin). Issue 1 and 2 are also present when using the default theme.

Reading mode

Live preview

Relevant errors (if available)

No response

Steps to reproduce

• Create a note with multiple charts
• Switch from Reading mode to Live Preview
• Use a theme such as Minimal which specifies values for Chart scolors

Expected Behavior

No response

Additional context

No response

Code

type: line
legend: false
layout: columns
beginAtZero: false
time: month
yMin: 0

Operating system

macOS

[phibr0]

Thats weird, I will take a look over the weekend

[kepano]

Note that this issue started a few months ago, it wasn't always the case. I can't identify exactly when it started though.

[TomHall2020]

Not sure if you got any further with this but just found the same problem with chart text turning black when multiple charts are rendered. For me the issue only happens when the contextual typography plugin is enabled to control the block widths; disabling the plugin solves it.

Also worth noting that for me the dataviewjs charts appear rendered at 100% full width regardless of what I set the chart size to in minimal theme settings, which I guess makes sense as they are in a dataviewjs block not a chart block but is still confusing.

[AllJavi]

I have had the same problem, for some reason the grid disappeared and the units appeared in black. I have been researching a bit and it turns out that for some reason the plugin is loaded before the variables that it accesses to put the colors of those elements:

# chartRenderer.ts (lines: 54 - 60)
        ...
        const gridColor = getComputedStyle(el).getPropertyValue('--background-modifier-border');

        let chartOptions: ChartConfiguration;

        Chart.defaults.color = getComputedStyle(el).getPropertyValue('--text-muted');
        Chart.defaults.font.family = getComputedStyle(el).getPropertyValue('--mermaid-font');
        Chart.defaults.plugins = {
       ...

and this generates them to stay black. The simplest way to fix it and considering that it doesn't happen to everyone, is to put, like in the previous parameters, an option in the YAML that allows configuring these colors.

[sillvva]

Forked this to modify the above to allow configuration.

Changed

Chart.defaults.color = getComputedStyle(el).getPropertyValue('--text-muted');

to

Chart.defaults.color = yaml.textColor || getComputedStyle(el).getPropertyValue('--text-muted');

Result

One is using textColor: lightgrey. The other is using textColor: red