Es mi gráfico de líneas.

https://i.stack.imgur.com/wpsHu.jpg

Y quieres personalizarlo como la imagen de abajo. ¿Qué puedo hacer para que quede así?

https://i.stack.imgur.com/4oXp2.jpg

Código. 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