@amad3v/solid-echarts - v1.0.2
    Preparing search index...

    Function createChart

    • Core primitive for creating and managing an ECharts instance lifecycle.

      Parameters

      • container: Accessor<HTMLElement | null | undefined>

        Reactive accessor for the container HTMLElement. The instance is created when the element becomes available and disposed when it is removed. Typically a signal setter ref from a <div>.

      • opts: CreateChartOptions = {}

        Configuration options. See CreateChartOptions.

      Returns CreateChartResult

      { instance } - a reactive accessor for the live EChartsType instance. Null before the container mounts, during reinit, and after dispose.

      Manages four concerns reactively:

      • Init/dispose - creates the instance when container is available, disposes on cleanup. Only renderer triggers a full reinit cycle.
      • Theme - applies via setTheme in place (ECharts 6+). No reinit.
      • Group - updates chart.group and calls connect in place.
      • Resize - attaches a debounced ResizeObserver. Toggles reactively without touching the instance.

      SSR-safe - returns { instance: () => null } on the server.

      // Basic usage - wire a div ref to createChart
      const [container, setContainer] = createSignal<HTMLDivElement | null>(null);
      const { instance } = createChart(container, { theme: 'dark', renderer: 'canvas' });

      // Wire option reactivity with createChartEffect
      createChartEffect(instance, option);

      <div ref={setContainer} style={{ width: '100%', height: '400px' }} />

      // Reactive theme switching - no reinit, uses setTheme() in place
      const [theme, setTheme] = createSignal<string>("default");
      const { instance } = createChart(container, { theme });

      <button onClick={() => setTheme('dark')}>Dark</button>

    Settings

    Member Visibility