Setting up a theme seems to bubble events

[kindunq]

Question

We've componentized several charts in nextjs.

I have several charts on one screen, and I want to use

I applied dark theme to chart a only.

but theme is applied to all charts.

I would expect event bubbling to occur.

How can I do the chart config per component?

///Acomponent.tsx
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import am4themes_dark from "@amcharts/amcharts4/themes/dark";
function Acomponent({ ...props }) {
  useLayoutEffect(() => {
    am4core.useTheme(am4themes_animated);
    am4core.useTheme(am4themes_dark);
    const chart = am4core.create(`div${props.id}`, am4plugins_forceDirected.ForceDirectedTree);
    some code...
    return () => {
      chart.dom.removeEventListener("contextmenu", function (ev) {
        ev.preventDefault();
      });
      chart.dispose();
    };
  }, []);

  return <div id={`div${props.id}`} className={customTwMerge(`w-full h-full`)}></div>;
}

///Bcomponent.tsx

import am4themes_animated from "@amcharts/amcharts4/themes/animated";
function Bcomponent({ ...props }) {
  useLayoutEffect(() => {
    am4core.useTheme(am4themes_animated);
    const chart = am4core.create(`div${props.id}`, am4plugins_forceDirected.ForceDirectedTree);
    some code...
    return () => {
      chart.dom.removeEventListener("contextmenu", function (ev) {
        ev.preventDefault();
      });
      chart.dispose();
    };
  }, []);

  return <div id={`div${props.id}`} className={customTwMerge(`w-full h-full`)}></div>;
}

<Acomponent />;
<Bcomponent />;

I only want to apply to A files...

Is my code wrong?

Environment (if applicable)

Additional context

[martynasma]

Setting themes is global in amCharts 4, meaning that whatever themes are set at the moment of creation of a chart, they all will be applied.

If you don't want a previously set theme to be set on a chart, you can unset it: https://www.amcharts.com/docs/v4/concepts/themes/#Different_themes_to_different_charts

[kindunq]

Setting themes is global in amCharts 4, meaning that whatever themes are set at the moment of creation of a chart, they all will be applied.

If you don't want a previously set theme to be set on a chart, you can unset it: https://www.amcharts.com/docs/v4/concepts/themes/#Different_themes_to_different_charts

omg...

thx a lot!

have a good day!