Skip to content
TrademarkTrademark
Docs
Contexts

DataThemeProvider

Updated: October 10, 2026
View on GitHub

The DataThemeProvider is a context provider that allows you to override the default app-level data-viz styles configuration.

Simple setup

Wrap your app with DataThemeProvider and pass the style configuration as props.

Advanced setup

Keep the chart defaults in one file, typed with defineConfig, and spread them into the provider. The keys are the provider's prop names, so nothing is cast or renamed. We also recommend a Providers component to wrap your app.

Pass the same dataStyle to ThemeInit as well, so data-viz-style is on <html> before the first paint: <ThemeInit config={style} dataStyle={dataStyle} />.

API reference

DataThemeProvider

Type
Default
childrenrequired
React.ReactNode—
variant
flatgradientoutline
gradient
mode
categoricaldivergentsequential
categorical
height
number24
axis
{ stroke: string; }—
tick
{ fill: string; fontSize: number; line: boolean; }—

useDataTheme

useDataTheme() returns the current chart options plus a setter, so a control can change how every chart on the page draws without each chart being rewired. It throws outside a DataThemeProvider.

setChartOptions takes a partial: anything you leave out keeps its current value.

Edit this page on GitHub