useChartTheme

Documentation

Documentation / @elitechart/react / useChartTheme

function useChartTheme(handle, initial): readonly [ChartForgeTheme, (theme) => void];

Defined in: react/src/use-chart-theme.ts:37

Theme state hook for a <Chart /> instance.

Returns a [theme, setTheme] tuple identical in shape to useState. Whenever setTheme runs (or the handle transitions from null to a live engine), the new theme is pushed through to chart.setTheme(theme). No-ops while handle is null.

Parameters

handle

ChartHandle | null

initial

ChartForgeTheme

Returns

readonly [ChartForgeTheme, (theme) => void]

Example

const ref = useRef<ChartRef>(null);
const handle = useChart(ref);
const [theme, setTheme] = useChartTheme(handle, darkTheme);
return (
  <>
    <button onClick={() => setTheme(lightTheme)}>Light</button>
    <Chart ref={ref} series={series} theme={theme} />
  </>
);