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

    Function useChart

    • Returns the live instance accessor, a safe dispatch function, and a stable chart proxy from the nearest SolidEChart ancestor in the tree.

      Returns UseChart

      { instance, dispatch, chart }

      Must be called inside a SolidEChart subtree. Outside one, instance always returns null, dispatch silently no-ops, and all chart methods return undefined, never throws.

      instance: reactive Accessor<EChartsType | null>. Used in reactive contexts (createEffect, createMemo) where tracking instance changes matters.

      dispatch: safe dispatchAction wrapper with built-in null and dispose guards. Use seActions for typed payloads.

      chart: stable proxy for calling instance methods imperatively, without null checks or signal unwrapping.

      // Before - null check + optional chaining every time
      const width = instance()?.getWidth();
      const url   = instance()?.getDataURL({ type: 'png' });

      // After - clean method calls, guards built in
      const width = chart.getWidth();
      const url   = chart.getDataURL({ type: 'png' });

      The chart object is stable, safe to pass as a prop or store in a variable. Methods close over instance() and read it at call time.

      const ChartToolbar = () => {
        const { dispatch, chart } = useChart();

        const exportPng = () => {
          const url = chart.getDataURL({ type: 'png', pixelRatio: 2 });
          if (url) triggerDownload(url, 'chart.png');
        };

        const highlightFirst = () =>
          dispatch(seActions.highlight({ seriesIndex: 0, dataIndex: 0 }));

        return (
          <>
            <button onClick={exportPng}>Export PNG</button>
            <button onClick={highlightFirst}>Highlight first bar</button>
          </>
        );
      }

      <SolidEChart option={option}>
        <ChartToolbar />
      </SolidEChart>

      // Coordinate conversion - position a custom tooltip
      const CustomTooltip = () => {
        const { chart } = useChart();

        const [pos, setPos] = createSignal({ x: 0, y: 0 });

        const handleClick = (params: EventParams) => {
          const [x, y] = chart.convertToPixel(
            { seriesIndex: 0 },
            [params.dataIndex, params.value as number]
          ) as number[];
          setPos({ x, y });
        };

        return ...; // render tooltip at pos()
      }

    Settings

    Member Visibility