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
is being ignored by the library.
Currently, I've settled on this horrible hack:
styles: {
tick: { ... },
},
styles: {
tick: { ... },
},
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