tooltip is moving out of the page when I hover on the dots of my line chart

hi, Im having a really rare problem with my line chart from rechart: when i hover on the dots of my line chart , the tooltip moves toward right and goes out of the page . Im using the simple linechart example of the Rechart library and rapping it up with these layouts:

this is my chart container which is named ‘ManangementContainer’:

`import React, { Component } from “react”; import { bar, line, pie } from “react-chartjs-2”; import PropTypes from “prop-types”; import { makeStyles } from “@material-ui/core/styles”; import Box from “@material-ui/core/Box”; import Collapse from “@material-ui/core/Collapse”; import IconButton from “@material-ui/core/IconButton”; import Table from “@material-ui/core/Table”; import TableBody from “@material-ui/core/TableBody”; import TableCell from “@material-ui/core/TableCell”; import TableContainer from “@material-ui/core/TableContainer”; import TableHead from “@material-ui/core/TableHead”; import TableRow from “@material-ui/core/TableRow”; import Typography from “@material-ui/core/Typography”; import KeyboardArrowDownIcon from “@material-ui/icons/KeyboardArrowDown”; import KeyboardArrowUpIcon from “@material-ui/icons/KeyboardArrowUp”; import CssBaseline from “@material-ui/core/CssBaseline”; import AppBar from “@material-ui/core/AppBar”; import Toolbar from “@material-ui/core/Toolbar”; import Paper from “@material-ui/core/Paper”; import Fab from “@material-ui/core/Fab”; import EditIcon from “@material-ui/icons/Edit”; import Chip from “@material-ui/core/Chip”; import Button from “@material-ui/core/Button”; import Menu from “@material-ui/core/Menu”; import MenuItem from “@material-ui/core/MenuItem”; import Fade from “@material-ui/core/Fade”; import Grid from “@material-ui/core/Grid”; import TextField from “@material-ui/core/TextField”; import FilterListIcon from “@material-ui/icons/FilterList”; import FormControlLabel from “@material-ui/core/FormControlLabel”; import Switch from “@material-ui/core/Switch”; import Management from “./Management”; import { useTheme } from “@material-ui/core/styles”;

const useStyles = makeStyles((theme) => ({ layout: { width: “auto”, marginTop: theme.spacing(20), marginLeft: theme.spacing(10), marginRight: theme.spacing(2), [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: { width: 1000, marginLeft: “auto”, marginRight: “auto”, textAlign: “center”, }, textAlign: “center”, }, paper: { marginTop: theme.spacing(3), marginBottom: theme.spacing(3), padding: theme.spacing(2), [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: { marginTop: theme.spacing(6), marginBottom: theme.spacing(6), padding: theme.spacing(3), textAlign: “center”, }, backgroundColor: “#cdd1c4”, textAlign: “center”, }, })); export default function ManagementContainer() { const classes = useStyles();

return ( <React.Fragment> <CssBaseline /> <main className={classes.layout}> <Paper> <Management /> </Paper> </main> </React.Fragment> ); } and this is my chart component which is named 'Management':import React, { Component } from “react”; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from “recharts”;

const data = [ { name: “Page A”, uv: 4000, pv: 2400, amt: 2400, }, { name: “Page B”, uv: 3000, pv: 1398, amt: 2210, }, { name: “Page C”, uv: 2000, pv: 9800, amt: 2290, }, { name: “Page D”, uv: 2780, pv: 3908, amt: 2000, }, { name: “Page E”, uv: 1890, pv: 4800, amt: 2181, }, { name: “Page F”, uv: 2390, pv: 3800, amt: 2500, }, { name: “Page G”, uv: 3490, pv: 4300, amt: 2100, }, ];

export default class Managment extends Component { static jsfiddleUrl = “https://jsfiddle.net/alidingling/xqjtetw0/”;

render() { return ( <ResponsiveContainer width={“100%”} height={250}> <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} > <CartesianGrid strokeDasharray="5 5" /> <XAxis dataKey=“name” padding={{ left: 30, right: 30 }} stroke=“#084C61” tick={{ stroke: “#ED6B86” }} /> <YAxis padding={{ top: 20, bottom: 20 }} stroke=“#084C61” tick={{ stroke: “#ED6B86” }} /> <Legend /> <Line type="monotone" dataKey="pv" stroke="#084C61" /> <Line type="monotone" dataKey="uv" stroke="#ED6B86" /> </LineChart> </ResponsiveContainer> ); } } ` and my project text direction is right to left;

https://codesandbox.io/s/xenodochial-bohr-5236f?file=/src/index.css

[nikanhg]

@nikanhg the link is pointing to the wrong URL but if you copy paste it into the browser I can get there. Correct URL: https://codesandbox.io/s/xenodochial-bohr-5236f?fontsize=14&hidenavigation=1&theme=dark

So I think the issue is just that recharts doesn’t support right to left text because everything works fine until I change direction: rtl. This would have to be a pretty large feature to support I’d think.

thank you very much

[justice47]

I have the same issue

UPD: Its fixable with overflow: hidden; on chart element or wrapper.