Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing tick color via ThemeService affects doughnut charts displaying X and Y axes #2009

Open
zaniniflz opened this issue Jan 10, 2025 · 2 comments

Comments

@zaniniflz
Copy link

Hello all,

I'm using ThemeService to change the colors of some chart elements when the user switches between light and dark.
When the user selects the dark theme I need to change the font colors to white for all charts, so I'm using ThemeService to apply the colors globally. However, when I change the tick color, the doughnut chart starts displaying the X and Y axes. I haven't found a way to apply this only to some chart types.
What's the best way to get around this?

See below my implementation:

const overrides: ChartOptions = {
      elements: {
        arc: {
          borderWidth: 0
         }
      },
      scales: {
        x: {
          ticks: {
            color: '#fff'
          }
        },
        y: {
          ticks: {
            color: '#fff'
          }
        }
      },
      plugins: {
        legend: {
          labels: {
            color: '#fff'
          }
        }
      }
    }
    this.chartTheme.setColorschemesOptions(overrides)

image

@lexasq
Copy link
Contributor

lexasq commented Jan 15, 2025

This seems to be chartjs behavior. As I understand you don't need X and Y axes, but why would you change a tick color? As understand you would like to do this globally, but piechart shouldn't have ticks in the first place, so I would only suggest that you don't change the chart color right away, but instead have a theme set and then make a separate service on chart-level to work on those exclusively.

Depending on the structure of your project implementation could vary of course.

@zaniniflz
Copy link
Author

My application displays several types of charts at the same time, so I thought about using ThemeService to change the colors globally and I came across this problem.
I solved this problem by hiding the axes locally in the doughnut chart, which is working for me for now.
Thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants