DataThemeProvider

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.

layout.tsx

<DataThemeProvider
variant="gradient" // flat | gradient | outline
mode="categorical" // categorical | divergent | sequential
height={24} // default chart height
axis={{
    stroke: "var(--neutral-alpha-weak)",
  }}
tick={{
    fill: "var(--neutral-on-background-weak)",
    fontSize: 11,
    line: false
  }}

>

  {children}

</DataThemeProvider>

Advanced setup

You can create a single source of truth for all style configuration in a separate file, for example once-ui.config.js. We also recommend using a Providers component to wrap your app.

import { dataStyle } from "@/resources/once-ui.config";
import { DataThemeProvider, ThemeProvider, IconProvider, ToastProvider } from "@once-ui-system/core";
import { ChartVariant, ChartMode } from "@once-ui-system/core/data";

export function Providers({ children }: {
  children: React.ReactNode
}) {
  return (
    <ThemeProvider>
      <DataThemeProvider
        variant={dataStyle.variant as ChartVariant}
        mode={dataStyle.mode as ChartMode}
        height={dataStyle.height}
        axis={{
          stroke: dataStyle.axis.stroke
        }}
        tick={{
          fill: dataStyle.tick.fill,
          fontSize: dataStyle.tick.fontSize,
          line: dataStyle.tick.line
        }}>
        <ToastProvider>
          <IconProvider>
            {children}
          </IconProvider>
        </ToastProvider>
      </DataThemeProvider>
    </ThemeProvider>
  );
}

API reference

DataThemeProvider

Prop	Type	Default
children	React.ReactNode	—
variant	flatgradientoutline	gradient
mode	categoricaldivergentsequential	categorical
height	number	24
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.

useDataTheme

const { mode, setChartOptions } = useDataTheme();

<SegmentedControl
value={mode}
buttons={[
  { value: "categorical", label: "Categorical" },
  { value: "divergent", label: "Divergent" },
]}
onChange={(value) => setChartOptions({ mode: value as ChartOptions["mode"] })}
/>

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