Theming

Customization is possible on a chart-by-chart basis, but if you have multiple charts, you might want to set some properties globally.

Compose

VicoTheme houses default chart colors. Functions like rememberColumnCartesianLayer and rememberLineCartesianLayer use these for their default arguments. You can use ProvideVicoTheme to provide a custom instance. Use vicoTheme to access the provided value (e.g., vicoTheme.textColor).

ProvideVicoTheme(remember(...) { VicoTheme(...) }) { ... }

You can use rememberM2VicoTheme or rememberM3VicoTheme to create a VicoTheme with the colors from your app’s Material Theme. These functions come from the compose-m2 and compose-m3 modules.

ProvideVicoTheme(rememberM2VicoTheme()) { ... }

ProvideVicoTheme(rememberM3VicoTheme()) { ... }

Beyond VicoTheme, to reuse a customized version of a component across multiple charts, you can create a wrapper for the function that creates this component and apply your styling there.

Views

You can easily reuse and extend XML styles. Also, you can set the values of attributes at the theme level. For example, if you added <item name="showTopAxis">true</item> to your theme, all charts would have a top axis by default.