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

[zaniniflz]

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)

[lexasq]

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]

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!