Help with line graphs and their overlapping labels

[lucaspieran]

I am graphing 4 lines with their respective labels but when these are close or the same they overlap, does anyone know how to solve it? I've been dealing with this for 1 day. Thank you so much

const CustomizedLabel: FunctionComponent<any> = ({
  x,
  y,
  stroke,
  value,
  detailKind,
  calculateAdjustedY,
}: any) => {
  return (
    <text x={x} y={y} dy={-10} fill={stroke} fontSize={10} textAnchor="middle">
      {detailKind === 'billing' ? `$${value}` : value}
    </text>
  )
}

const CLineChart = ({
  data,
  lineToShow,
  detailKind,
  types,
}: {
  data: Datatypes[]
  lineToShow?: { [key: string]: boolean }
  detailKind: 'billing' | 'detail'
  types?: string[]
}) => {
  const [chartToShow, setChartToShow] = useState<state[]>([])

  useEffect(() => {
   ....
  }, [data, detailKind, lineToShow, types])

  return (
    <div data-testid="lineGraph" className="h-full w-full overflow-auto pb-6">
      <ResponsiveContainer width={data?.length > 12 ? 1900 : '100%'} height={400}>
        <LineChart
          id="lineGraph"
          data={data}
          margin={{
            top: 20,
            left: 0,
          }}
        >
          <CartesianGrid vertical={false} />
          <XAxis
            padding={{ left: 30, right: 10 }}
            dataKey="day"
            axisLine={false}
            tickLine={false}
            tickMargin={8}
            tick={{ fill: '#000000' }}
          />
          <YAxis
            tickSize={12}
            axisLine={false}
            fill="#5B5B65"
            tick={{ fill: '#000000' }}
            domain={lineToShow?.all && data.length !== 0 ? [0, 'auto'] : [0, 100]}
          />
          <Tooltip />

          {chartToShow?.map(
            (el) =>
              el.show && (
                <Line
                  isAnimationActive={false}
                  key={generateUniqueKey()}
                  type="monotone"
                  dataKey={el.dataKey}
                  stroke={el.stroke}
                  name={el.name}
                  strokeWidth={4}
                  dot={{ strokeWidth: 1, r: 6, cx: 10 }}
                >
                  <LabelList
                    content={<CustomizedLabel stroke={el.stroke} detailKind={detailKind} />}
                  />
                </Line>
              ),
          )}
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}

export default CLineChart

[ckifer]

no way to handle it automatically, but you can use a combo of position and offset props on LabelList