T
TanStack•2y ago
correct-apricot

Is there a way to prevent tick labels from being rotated?

I couldn't find an appropriate prop for this. It seems to me that 
styles: { 
  tick: { ... },
},
styles: { 
  tick: { ... },
},
is being ignored by the library. Currently, I've settled on this horrible hack: 
function useRemoveTranformRotateFromTickLabels(
  chartWrapperRef: React.RefObject<HTMLDivElement>,
) {
  const doneRemovingTransformRotate = useRef(false);

  useEffect(() => {
    function removeTransformRotate(el: SVGTextElement) {
      if (el.transform.baseVal.length > 1) {
        el.transform.baseVal.removeItem(1);
      } else {
        doneRemovingTransformRotate.current = true;
      }
    }

    const observer = new MutationObserver(() => {
      if (doneRemovingTransformRotate.current) {
        return;
      }

      const tickLabels =
        chartWrapperRef.current!.querySelectorAll(".tickLabel");
      tickLabels.forEach((t) => {
        removeTransformRotate(t as SVGTextElement);
      });
    });

    observer.observe(chartWrapperRef.current!, {
      childList: true,
      subtree: true,
    });

    return () => {
      observer.disconnect();
    };
  }, [chartWrapperRef]);
}
function useRemoveTranformRotateFromTickLabels(
  chartWrapperRef: React.RefObject<HTMLDivElement>,
) {
  const doneRemovingTransformRotate = useRef(false);

  useEffect(() => {
    function removeTransformRotate(el: SVGTextElement) {
      if (el.transform.baseVal.length > 1) {
        el.transform.baseVal.removeItem(1);
      } else {
        doneRemovingTransformRotate.current = true;
      }
    }

    const observer = new MutationObserver(() => {
      if (doneRemovingTransformRotate.current) {
        return;
      }

      const tickLabels =
        chartWrapperRef.current!.querySelectorAll(".tickLabel");
      tickLabels.forEach((t) => {
        removeTransformRotate(t as SVGTextElement);
      });
    });

    observer.observe(chartWrapperRef.current!, {
      childList: true,
      subtree: true,
    });

    return () => {
      observer.disconnect();
    };
  }, [chartWrapperRef]);
}
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?