dankremniov · February 21, 2024 06:41 · dankremniov · Apr 3, 2023 · borglin · May 9, 2023
diff --git a/README.md b/README.md
diff --git a/Chart.tsx b/Chart.tsx
 import React, { useState, useCallback } from "react";
 import Highcharts, { Chart as HighchartsChart } from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 import { Tooltip } from "./Tooltip";

 const options = {
  title: {
    text: "Custom tooltip as React component"
  },
  series: [
    {
      type: "line",
      data: [1, 2, 3]
    }
  ],
  tooltip: {
    style: {
      pointerEvents: "auto"
    }
  }
 };

 export const Chart = () => {
  const [chart, setChart] = useState<HighchartsChart | null>(null);
  const callback = useCallback((chart: HighchartsChart) => {
    setChart(chart);
  }, []);

  return (
    <>
      <HighchartsReact
        highcharts={Highcharts}
        options={options}
        callback={callback}
      />

      <Tooltip chart={chart}>
        {(formatterContext) => {
          const { x, y } = formatterContext;
          return (
            <>
              <div>x: {x}</div>
              <div>y: {y}</div>
              <br />
              <button onClick={() => alert(`x: ${x}, y: ${y}`)}>Action</button>
            </>
          );
        }}
      </Tooltip>
    </>
  );
 };
diff --git a/Tooltip.tsx b/Tooltip.tsx
 import {
  Chart,
  TooltipFormatterCallbackFunction,
  TooltipFormatterContextObject
 } from "highcharts";
 import { useEffect, useState, useRef } from "react";
 import ReactDOM from "react-dom";

 const generateTooltipId = (chartId: number) =>
  `highcharts-custom-tooltip-${chartId}`;

 interface Props {
  chart: Chart | null;
  children(formatterContext: TooltipFormatterContextObject): JSX.Element;
 }

 export const Tooltip = ({ chart, children }: Props) => {
  const isInit = useRef(false);
  const [context, setContext] = useState<TooltipFormatterContextObject | null>(
    null
  );

  useEffect(() => {
    if (chart) {
      const formatter: TooltipFormatterCallbackFunction = function () {
        // Ensures that tooltip DOM container is rendered before React portal is created.
        if (!isInit.current) {
          isInit.current = true;

          // TODO: Is there a better way to create tooltip DOM container?
          chart.tooltip.refresh.apply(chart.tooltip, [this.point]);
          chart.tooltip.hide(0);
        }

        setContext(this);

        return `<div id="${generateTooltipId(chart.index)}"></div>`;
      };

      chart.update({
        tooltip: {
          formatter,
          useHTML: true
        }
      });
    }
  }, [chart]);

  const node = chart && document.getElementById(generateTooltipId(chart.index));

  return node && context
    ? ReactDOM.createPortal(children(context), node)
    : null;
 };
	import React, { useState, useCallback } from "react";
	import Highcharts, { Chart as HighchartsChart } from "highcharts";
	import HighchartsReact from "highcharts-react-official";
	import { Tooltip } from "./Tooltip";

	const options = {
	title: {
	text: "Custom tooltip as React component"
	},
	series: [
	{
	type: "line",
	data: [1, 2, 3]
	}
	],
	tooltip: {
	style: {
	pointerEvents: "auto"
	}
	}
	};

	export const Chart = () => {
	const [chart, setChart] = useState<HighchartsChart \| null>(null);
	const callback = useCallback((chart: HighchartsChart) => {
	setChart(chart);
	}, []);

	return (
	<>
	<HighchartsReact
	highcharts={Highcharts}
	options={options}
	callback={callback}
	/>

	<Tooltip chart={chart}>
	{(formatterContext) => {
	const { x, y } = formatterContext;
	return (
	<>
	<div>x: {x}</div>
	<div>y: {y}</div>
	<br />
	<button onClick={() => alert(`x: ${x}, y: ${y}`)}>Action</button>
	</>
	);
	}}
	</Tooltip>
	</>
	);
	};
	import {
	Chart,
	TooltipFormatterCallbackFunction,
	TooltipFormatterContextObject
	} from "highcharts";
	import { useEffect, useState, useRef } from "react";
	import ReactDOM from "react-dom";

	const generateTooltipId = (chartId: number) =>
	`highcharts-custom-tooltip-${chartId}`;

	interface Props {
	chart: Chart \| null;
	children(formatterContext: TooltipFormatterContextObject): JSX.Element;
	}

	export const Tooltip = ({ chart, children }: Props) => {
	const isInit = useRef(false);
	const [context, setContext] = useState<TooltipFormatterContextObject \| null>(
	null
	);

	useEffect(() => {
	if (chart) {
	const formatter: TooltipFormatterCallbackFunction = function () {
	// Ensures that tooltip DOM container is rendered before React portal is created.
	if (!isInit.current) {
	isInit.current = true;

	// TODO: Is there a better way to create tooltip DOM container?
	chart.tooltip.refresh.apply(chart.tooltip, [this.point]);
	chart.tooltip.hide(0);
	}

	setContext(this);

	return `<div id="${generateTooltipId(chart.index)}"></div>`;
	};

	chart.update({
	tooltip: {
	formatter,
	useHTML: true
	}
	});
	}
	}, [chart]);

	const node = chart && document.getElementById(generateTooltipId(chart.index));

	return node && context
	? ReactDOM.createPortal(children(context), node)
	: null;
	};