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

    Type Alias SolidEChartProps

    SolidEChartProps: Partial<WithMaybeAccessor<SolidEChartMaybeProps>> & Omit<
        JSX.HTMLAttributes<HTMLDivElement>,
        "ref" | "style" | "class" | "onResize",
    > & {
        class?: string;
        onDispose?: () => void;
        onInit?: (instance: EChartsType) => void;
        onReInit?: (instance: EChartsType) => void;
        onResize?: () => void;
        option?: Accessor<EChartsOption>;
        ref?: EchartsRef;
        style?: JSX.CSSProperties | string;
    }

    Props for the SolidEChart component.

    Type Declaration

    • Optionalclass?: string

      CSS class applied to the chart container <div>.

    • OptionalonDispose?: () => void

      Called before each dispose - including mid-session renderer reinits, not only on final component unmount.

    • OptionalonInit?: (instance: EChartsType) => void

      Called on the first instance creation only. Receives the fresh EChartsType instance. For subsequent instance creations caused by a renderer reinit, see SolidEChartProps for onReInit.

      onInit is intentionally limited to the first creation so callers can perform one-time setup (e.g. registering maps, installing plugins) without guarding against re-entry. Use onReInit when you need to react to every instance creation including reinits.

    • OptionalonReInit?: (instance: EChartsType) => void

      Called on every instance creation after the first, triggered by a renderer prop change which causes a dispose -> reinit cycle. Receives the fresh EChartsType instance.

      Separating reinit from init allows callers to distinguish "first mount setup" from "reattach state after reinit" without introducing entry-count tracking in user code.

    • OptionalonResize?: () => void

      Called after every successful chart.resize() triggered by the ResizeObserver. Not called when resize is skipped by Guard 1 (unchanged dimensions on first observation) or Guard 2 (zero-sized container).

      Static: read once at init time.

      Natural use case: read post-resize dimensions to sync external UI.

      <SolidEChart
        option={option}
        onResize={() => setPixels(`${chart.getWidth()} × ${chart.getHeight()}`)}
      />
    • Optionaloption?: Accessor<EChartsOption>

      The full ECharts option object. Optional.

      Reactive mode: pass an Accessor<EChartsOption> (signal or memo). createChartEffect is wired automatically and calls setOption whenever the accessor's value changes. Never pass a plain object, it would snapshot at mount time and never update reactively.

      Manual mode: omit option entirely. No reactive binding is wired. Use ref or useChart to call setOption, appendData, or any other instance method directly. Useful for streaming large datasets or custom render loops where reactive overhead is undesirable.

      // Reactive mode
      const option = () => ({ series: [{ type: 'bar', data: data() }] });
      <SolidEChart option={option} />

      // Manual mode - setOption called imperatively in onInit
      <SolidEChart onInit={(chart) => chart.setOption(initialOption)} />
    • Optionalref?: EchartsRef

      Forwards the raw EChartsType instance. Accepts a plain callback or a SolidJS signal setter (Setter<EChartsType | null>). Receives null when the instance is disposed.

      // Plain callback
      let chartRef: EChartsType | null = null;
      <SolidEChart ref={el => { chartRef = el; }} option={option} />

      // Signal setter
      const [chart, setChart] = createSignal<EChartsType | null>(null);
      <SolidEChart ref={setChart} option={option} />
    • Optionalstyle?: JSX.CSSProperties | string

      CSS styles applied to the chart container <div>.

    All properties in SolidEChartMaybeProps accept both plain values and reactive accessors (signals) via WithMaybeAccessor.

    option must always be an Accessor<EChartsOption>, passing a plain object is intentionally a compile-time error. A plain object would snapshot at mount time and never update reactively.

    Props that match SolidEChartConfig fields override the nearest SolidEChartProvider ancestor for this chart only.

    Inline callback type inference

    TypeScript's contextual typing does not flow callback parameter types through mapped types (WithMaybeAccessor) or union types (MaybeAccessor). Inline arrow functions passed to onInit, onDispose, ref, and onEvents handlers may show implicit any errors for their parameters.

    The recommended pattern is to extract handlers to explicitly typed variables.

    const handleInit = (chart: EChartsType) => { ... };
    const handleClick = (params: EventParams) => { ... };

    <SolidEChart onInit={handleInit} onEvents={{ click: handleClick }} />

    Alternatively, annotate inline.

    <SolidEChart
      onInit={(chart: EChartsType) => { ... }}
      onEvents={{ click: (params: EventParams) => { ... } }}
    />

    Settings

    Member Visibility