这是我的折线图。
https://i.stack.imgur.com/wpsHu.jpg
并希望自定义它像下面的图像。我可以做些什么，使它像这样？
https://i.stack.imgur.com/4oXp2.jpg
代码https://i.stack.imgur.com/qPdz7.jpg
https://i.stack.imgur.com/AC7Lf.jpg

import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  CartesianAxis
} from "recharts";
import { format, parseISO } from "date-fns";

const data = [
  {
    Deposit: 11.1,
    data: "2020-08-05",
    Credit: 6.1
  },
  {
    Deposit: 10.9,
    data: "2020-08-15",
    Credit: 5.6
  },
  {
    Deposit: 11.1,
    data: "2020-08-22",
    Credit: 5.4
  },
  {
    Deposit: 11,
    data: "2020-09-7",
    Credit: 5.6
  },
  {
    Deposit: 12,
    data: "2020-09-15",
    Credit: 5.3
  },
  {
    Deposit: 10.47,
    data: "2020-10-05",
    Credit: 5.1
  },
  {
    Deposit: 10.5,
    data: "2020-10-10",
    Credit: 5.5
  },
  {
    Deposit: 10.1,
    data: "2020-10-25",
    Credit: 5.1
  },
  {
    Deposit: 10.9,
    data: "2020-11-20",
    Credit: 5.9
  },
  {
    Deposit: 11,
    data: "2020-12-05",
    Credit: 5.6
  },
  {
    Deposit: 11.3,
    data: "2020-12-14",
    Credit: 5.9
  },
  {
    Deposit: 11.39,
    data: "2020-12-26",
    Credit: 6
  },
  {
    Deposit: 11.5,
    data: "2021-01-01",
    Credit: 6.6,
  },
];

const LineShape = () => {
  return (

    <LineChart width={1000} height={500} data={data} margin={{ top: 80 }}>
      <XAxis dataKey="data" tickLine={false} axisLine={false} dx={15} dy={10} tickFormatter={str => {
        const date = parseISO(str);
        if (date.getMonth() % 2 === 0) {
          return format(date, "MMM y");
        }
        return " ";
      }} />
      <YAxis axisLine={false} domain={[6, 12]} tickLine={false} />

      <Tooltip />
      <Legend verticalAlign="top" height={36} iconType="circle" align="left" />
      <Line dataKey="Deposit" stroke="#8884d8" />
      <Line dataKey="Credit" stroke="#82ca9d" />
      <CartesianGrid opacity={0.5} />
    </LineChart>
  );
}

export default LineShape