How to apply theme to echart, react?

Siemens iX
11

Thanks for this as well. Since I was using the ‘echarts-for-react’ library, I created a state variable to make my component re-render as the theme switcher is toggled.
Attaching a sample template for everyone.

import * as echarts from "echarts";
import { registerTheme } from "@siemens/ix-echarts";
import { useEffect, useLayoutEffect, useState } from "react";
import { themeSwitcher } from "@siemens/ix";
import ReactECharts from "echarts-for-react";

const Component = () => {
const [theme, setTheme] = useState(
    document.body.className.replace("theme-", "")
  );

  useLayoutEffect(() => {
    registerTheme(echarts);
  },[]);

  useEffect(() => {
    const prefix = "theme-";
    themeSwitcher.themeChanged.on((currentTheme) => {
      setTheme(
        currentTheme.substring(currentTheme.indexOf(prefix) + prefix.length)
      );
    });
  },[]);

const options = {
// .. set your chart options here
}

return (
    <ReactECharts
      style={{ width: "100%", height: "100%" }}
      option={options}
      theme={theme}
    />
  );
}
1 Like